npm - @lit-material/chip - Versions diffs - 0.0.2 → 0.1.0 - Mend

@lit-material/chip 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md CHANGED Viewed

@@ -59,6 +59,41 @@ action triggers, removable tags), not a value a `<form>` submits, matching how M
 itself treats chips. Track a `filter` chip set's selection or an `input` chip list by listening for
 `change`/`remove` rather than reading `FormData`.
+## `lit-material-chip-input`
+A field that turns what you type into chips: tags, labels, email addresses, allowed hosts.
+```html
+<lit-material-chip-input id="hosts" label="Allowed hosts" placeholder="api.example.com"></lit-material-chip-input>
+<script type="module">
+  import "@lit-material/chip";
+  const hosts = document.querySelector("#hosts");
+  hosts.validator = (v) => (/^[a-z0-9.-]+$/.test(v) ? "" : "Not a host name");
+  hosts.addEventListener("change", (e) => console.log(e.detail.values));
+</script>
+```
+| Property          | Attribute          | Type                  | Default |
+| ----------------- | ------------------ | --------------------- | ------- |
+| `values`          | —                  | `string[]`            | `[]`    |
+| `label`           | `label`            | `string`              | `""`    |
+| `placeholder`     | `placeholder`      | `string`              | `""`    |
+| `supportingText`  | `supporting-text`  | `string`              | `""`    |
+| `validator`       | —                  | `(value) => string`   | —       |
+| `allowDuplicates` | `allow-duplicates` | `boolean`             | `false` |
+| `max`             | `max`              | `number` (0: no limit)| `0`     |
+| `disabled`        | `disabled` (reflected) | `boolean`         | `false` |
+| `invalid`         | `invalid` (reflected, read it) | `boolean` | `false` |
+Enter or a comma adds the typed value; a paste of several values (commas, spaces, new lines) adds
+them all and leaves any refused ones in the field. Backspace in the empty field removes the last
+chip; each chip's remove button is named "Remove <value>". A refused value keeps its text and shows
+why under the field (duplicates, `max`, `validator`). Methods `add(value)` (returns the refusal,
+`""` when added) and `removeAt(index)`; event `change` with `detail: { values }`. Additions and
+removals are announced.
+`lit-material-chip` also gained `remove-label` (default `"Remove"`), the remove button's name.
 ## License
 MIT

package/custom-elements.json ADDED Viewed

@@ -0,0 +1,730 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/chip-input.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A field that turns what you type into chips: tags, labels, email\naddresses, allowed hosts. Enter or a comma adds the typed value; pasting\nseveral values separated by commas, spaces or new lines adds them all.\nEach chip has a remove button, and Backspace in the empty field removes\nthe last one.\n\n`validator` refuses a value with a message (shown under the field, the\ntext stays for fixing); duplicates are refused unless `allow-duplicates`.",
+          "name": "LitMaterialChipInput",
+          "cssParts": [
+            {
+              "description": "The box holding the chips and the input.",
+              "name": "field"
+            },
+            {
+              "description": "The text input.",
+              "name": "input"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "values",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The chips' values."
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Visible label above the field; also names the input.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "supportingText",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Help under the field, replaced by an error while there is one.",
+              "attribute": "supporting-text"
+            },
+            {
+              "kind": "field",
+              "name": "validator",
+              "type": {
+                "text": "(value: string) => string | undefined"
+              },
+              "description": "Refuses a value: return a message, or `\"\"` to accept."
+            },
+            {
+              "kind": "field",
+              "name": "allowDuplicates",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "allow-duplicates"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Most chips allowed; `0` for no limit.",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set while the typed value was refused; reflected.",
+              "attribute": "invalid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "announcement",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "uid",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`chip-input-${++nextId}`"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "add",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "raw",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Adds `raw` (trimmed); returns the refusal message, `\"\"` on success."
+            },
+            {
+              "kind": "method",
+              "name": "removeAt",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Removes the chip at `index`."
+            },
+            {
+              "kind": "method",
+              "name": "setError",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "commitTyped",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onPaste",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "ClipboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "After a value is added or removed; `detail: { values }`."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Visible label above the field; also names the input.",
+              "fieldName": "label"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "supporting-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Help under the field, replaced by an error while there is one.",
+              "fieldName": "supportingText"
+            },
+            {
+              "name": "allow-duplicates",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "allowDuplicates"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Most chips allowed; `0` for no limit.",
+              "fieldName": "max"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set while the typed value was refused; reflected.",
+              "fieldName": "invalid"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-chip-input",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialChipInput",
+          "declaration": {
+            "name": "LitMaterialChipInput",
+            "module": "src/chip-input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-chip-input",
+          "declaration": {
+            "name": "LitMaterialChipInput",
+            "module": "src/chip-input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/chip-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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); } slot.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; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/chip-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/chip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Material Design 3 chip.\n\nUnlike checkbox/radio/switch, chips are not form-associated: they're\nauxiliary UI (filters, action triggers, removable tags) rather than a\nvalue a `<form>` submits, matching how Material Design itself treats\nchips. A `filter` chip's `selected` state and an `input` chip's removal\nare communicated via `change`/`remove` events instead.",
+          "name": "LitMaterialChip",
+          "cssParts": [
+            {
+              "description": "The outer container (background/border/elevation).",
+              "name": "chip"
+            },
+            {
+              "description": "The main clickable `<button>` or `<a>` (icon + label).",
+              "name": "action"
+            },
+            {
+              "description": "The trailing remove `<button>`, when `removable`.",
+              "name": "remove-button"
+            },
+            {
+              "description": "The state-layer element the hover/press feedback is drawn on.",
+              "name": "ripple"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The chip's label.",
+              "name": ""
+            },
+            {
+              "description": "An optional icon before the label. Ignored on a selected `filter` chip, which shows a checkmark in its place.",
+              "name": "leading-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ChipVariant"
+              },
+              "default": "\"assist\"",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "elevated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "elevated",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "removable"
+            },
+            {
+              "kind": "field",
+              "name": "removeLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Remove\"",
+              "description": "Accessible name of the remove button, e.g. \"Remove app=web\".",
+              "attribute": "remove-label"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the main action as a link (`<a>`) instead of a `<button>`.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "stateLayerElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ripple",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new RippleController(this)"
+            },
+            {
+              "kind": "method",
+              "name": "handleActionClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLinkClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleRemoveClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Bubbles when a `filter` chip's `selected` state toggles via user interaction."
+            },
+            {
+              "name": "remove",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Cancelable; fires when the remove button is activated. Unless `event.preventDefault()` is called, the chip removes itself from the DOM afterward."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "ChipVariant"
+              },
+              "default": "\"assist\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "elevated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "elevated"
+            },
+            {
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "removable"
+            },
+            {
+              "name": "remove-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Remove\"",
+              "description": "Accessible name of the remove button, e.g. \"Remove app=web\".",
+              "fieldName": "removeLabel"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the main action as a link (`<a>`) instead of a `<button>`.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "target"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-chip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialChip",
+          "declaration": {
+            "name": "LitMaterialChip",
+            "module": "src/chip.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-chip",
+          "declaration": {
+            "name": "LitMaterialChip",
+            "module": "src/chip.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialChip",
+          "declaration": {
+            "name": "LitMaterialChip",
+            "module": "./chip.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ChipVariant",
+          "declaration": {
+            "name": "ChipVariant",
+            "module": "./chip.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialChipInput",
+          "declaration": {
+            "name": "LitMaterialChipInput",
+            "module": "./chip-input.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/chip-input.d.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+import "./chip.js";
+/**
+ * A field that turns what you type into chips: tags, labels, email
+ * addresses, allowed hosts. Enter or a comma adds the typed value; pasting
+ * several values separated by commas, spaces or new lines adds them all.
+ * Each chip has a remove button, and Backspace in the empty field removes
+ * the last one.
+ *
+ * `validator` refuses a value with a message (shown under the field, the
+ * text stays for fixing); duplicates are refused unless `allow-duplicates`.
+ *
+ * @element lit-material-chip-input
+ *
+ * @fires change - After a value is added or removed; `detail: { values }`.
+ *
+ * @csspart field - The box holding the chips and the input.
+ * @csspart input - The text input.
+ */
+export declare class LitMaterialChipInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The chips' values. */
+    values: string[];
+    /** Visible label above the field; also names the input. */
+    label: string;
+    placeholder: string;
+    /** Help under the field, replaced by an error while there is one. */
+    supportingText: string;
+    /** Refuses a value: return a message, or `""` to accept. */
+    validator?: (value: string) => string;
+    allowDuplicates: boolean;
+    /** Most chips allowed; `0` for no limit. */
+    max: number;
+    disabled: boolean;
+    /** Set while the typed value was refused; reflected. */
+    invalid: boolean;
+    private error;
+    private announcement;
+    private readonly input;
+    private readonly uid;
+    focus(options?: FocusOptions): void;
+    /** Adds `raw` (trimmed); returns the refusal message, `""` on success. */
+    add(raw: string): string;
+    /** Removes the chip at `index`. */
+    removeAt(index: number): void;
+    private setError;
+    private emit;
+    private commitTyped;
+    private onKeyDown;
+    private onPaste;
+    private onInput;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-chip-input": LitMaterialChipInput;
+    }
+}
+//# sourceMappingURL=chip-input.d.ts.map

package/dist/chip-input.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"chip-input.d.ts","sourceRoot":"","sources":["../src/chip-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,WAAW,CAAC;AAInB;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAgEpB;IAEF,yBAAyB;IACO,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtD,2DAA2D;IAC/C,KAAK,SAAM;IAEX,WAAW,SAAM;IAE7B,qEAAqE;IACzB,cAAc,SAAM;IAEhE,4DAA4D;IAC5B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEV,eAAe,UAAS;IAEpF,4CAA4C;IAChB,GAAG,SAAK;IAEQ,QAAQ,UAAS;IAE7D,wDAAwD;IACZ,OAAO,UAAS;IAEnD,OAAO,CAAC,KAAK,CAAM;IAEnB,OAAO,CAAC,YAAY,CAAM;IAEnB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoB;IAE1D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA4B;IAEvC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI5C,0EAA0E;IAC1E,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAexB,mCAAmC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,OAAO;IAIN,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

package/dist/chip-input.js ADDED Viewed

@@ -0,0 +1,263 @@
+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 { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import "./chip.js";
+let nextId = 0;
+/**
+ * A field that turns what you type into chips: tags, labels, email
+ * addresses, allowed hosts. Enter or a comma adds the typed value; pasting
+ * several values separated by commas, spaces or new lines adds them all.
+ * Each chip has a remove button, and Backspace in the empty field removes
+ * the last one.
+ *
+ * `validator` refuses a value with a message (shown under the field, the
+ * text stays for fixing); duplicates are refused unless `allow-duplicates`.
+ *
+ * @element lit-material-chip-input
+ *
+ * @fires change - After a value is added or removed; `detail: { values }`.
+ *
+ * @csspart field - The box holding the chips and the input.
+ * @csspart input - The text input.
+ */
+let LitMaterialChipInput = class LitMaterialChipInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The chips' values. */
+        this.values = [];
+        /** Visible label above the field; also names the input. */
+        this.label = "";
+        this.placeholder = "";
+        /** Help under the field, replaced by an error while there is one. */
+        this.supportingText = "";
+        this.allowDuplicates = false;
+        /** Most chips allowed; `0` for no limit. */
+        this.max = 0;
+        this.disabled = false;
+        /** Set while the typed value was refused; reflected. */
+        this.invalid = false;
+        this.error = "";
+        this.announcement = "";
+        this.uid = `chip-input-${++nextId}`;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, Roboto, system-ui, sans-serif);
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    label {
+      display: block;
+      margin-block-end: 4px;
+      color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
+      font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
+    }
+    .field {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+      box-sizing: border-box;
+      min-height: 56px;
+      padding: 8px 12px;
+      border: 1px solid var(--md-sys-color-outline, light-dark(#79747e, #938f99));
+      border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+      cursor: text;
+    }
+    .field:focus-within {
+      border-color: var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff));
+      box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff));
+    }
+    :host([invalid]) .field {
+      border-color: var(--md-sys-color-error, light-dark(#b3261e, #f2b8b5));
+    }
+    :host([disabled]) .field {
+      opacity: 0.38;
+      cursor: default;
+    }
+    input {
+      flex: 1;
+      min-width: 8ch;
+      padding: 4px 0;
+      border: 0;
+      outline: none;
+      background: transparent;
+      color: var(--md-sys-color-on-surface, light-dark(#1d1b20, #e6e0e9));
+      font: inherit;
+      font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    }
+    .supporting {
+      margin: 4px 16px 0;
+      color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
+      font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
+    }
+    :host([invalid]) .supporting {
+      color: var(--md-sys-color-error, light-dark(#b3261e, #f2b8b5));
+    }
+    .sr {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  `; }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    /** Adds `raw` (trimmed); returns the refusal message, `""` on success. */
+    add(raw) {
+        const value = raw.trim();
+        if (!value)
+            return "";
+        let message = "";
+        if (this.max && this.values.length >= this.max)
+            message = `At most ${this.max}`;
+        else if (!this.allowDuplicates && this.values.includes(value))
+            message = `${value} is already added`;
+        else
+            message = this.validator?.(value) ?? "";
+        this.setError(message);
+        if (message)
+            return message;
+        this.values = [...this.values, value];
+        this.announcement = `${value} added`;
+        this.emit();
+        return "";
+    }
+    /** Removes the chip at `index`. */
+    removeAt(index) {
+        const value = this.values[index];
+        if (value === undefined)
+            return;
+        this.values = this.values.filter((_, i) => i !== index);
+        this.announcement = `${value} removed`;
+        this.emit();
+    }
+    setError(message) {
+        this.error = message;
+        this.invalid = Boolean(message);
+    }
+    emit() {
+        this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { values: this.values } }));
+    }
+    commitTyped() {
+        if (!this.add(this.input.value))
+            this.input.value = "";
+    }
+    onKeyDown(event) {
+        if (event.key === "Enter" || event.key === ",") {
+            if (!this.input.value.trim())
+                return;
+            event.preventDefault();
+            this.commitTyped();
+        }
+        else if (event.key === "Backspace" && this.input.value === "" && this.values.length) {
+            event.preventDefault();
+            this.removeAt(this.values.length - 1);
+        }
+    }
+    onPaste(event) {
+        const text = event.clipboardData?.getData("text/plain") ?? "";
+        const parts = text.split(/[\s,;]+/).filter(Boolean);
+        if (parts.length < 2)
+            return;
+        event.preventDefault();
+        const refused = parts.filter((part) => this.add(part));
+        // Leave what was refused in the field, to fix.
+        this.input.value = refused.join(", ");
+        if (refused.length)
+            this.setError(`${refused.length} not added: ${refused.join(", ")}`);
+    }
+    onInput() {
+        if (this.error)
+            this.setError("");
+    }
+    render() {
+        const message = this.error || this.supportingText;
+        return html `
+      ${this.label ? html `<label for=${this.uid}>${this.label}</label>` : nothing}
+      <div part="field" class="field" @click=${(e) => e.target === e.currentTarget && this.focus()}>
+        ${repeat(this.values, (value, i) => `${i}:${value}`, (value, i) => html `<lit-material-chip
+            variant="input"
+            removable
+            remove-label=${`Remove ${value}`}
+            ?disabled=${this.disabled}
+            @remove=${(e) => {
+            e.preventDefault();
+            this.removeAt(i);
+            this.focus();
+        }}
+            >${value}</lit-material-chip
+          >`)}
+        <input
+          part="input"
+          id=${this.uid}
+          type="text"
+          autocomplete="off"
+          spellcheck="false"
+          placeholder=${this.values.length ? "" : this.placeholder}
+          ?disabled=${this.disabled}
+          aria-invalid=${this.invalid ? "true" : "false"}
+          aria-describedby=${message ? `${this.uid}-msg` : nothing}
+          @keydown=${this.onKeyDown}
+          @paste=${this.onPaste}
+          @input=${this.onInput}
+          @blur=${() => this.input.value.trim() && this.commitTyped()}
+        />
+      </div>
+      ${message ? html `<div class="supporting" id="${this.uid}-msg">${message}</div>` : nothing}
+      <div class="sr" role="status">${this.announcement}</div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], LitMaterialChipInput.prototype, "values", void 0);
+__decorate([
+    property()
+], LitMaterialChipInput.prototype, "label", void 0);
+__decorate([
+    property()
+], LitMaterialChipInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: "supporting-text" })
+], LitMaterialChipInput.prototype, "supportingText", void 0);
+__decorate([
+    property({ attribute: false })
+], LitMaterialChipInput.prototype, "validator", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "allow-duplicates" })
+], LitMaterialChipInput.prototype, "allowDuplicates", void 0);
+__decorate([
+    property({ type: Number })
+], LitMaterialChipInput.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialChipInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialChipInput.prototype, "invalid", void 0);
+__decorate([
+    state()
+], LitMaterialChipInput.prototype, "error", void 0);
+__decorate([
+    state()
+], LitMaterialChipInput.prototype, "announcement", void 0);
+__decorate([
+    query("input")
+], LitMaterialChipInput.prototype, "input", void 0);
+LitMaterialChipInput = __decorate([
+    customElement("lit-material-chip-input")
+], LitMaterialChipInput);
+export { LitMaterialChipInput };
+//# sourceMappingURL=chip-input.js.map

package/dist/chip-input.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/chip-styles.js CHANGED Viewed

@@ -91,7 +91,7 @@ export const styles = css `
     opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1);
   }
-  .leading-icon ::slotted(*) {
+  slot.leading-icon::slotted(*) {
     width: 18px;
     height: 18px;
     display: block;

package/dist/chip.d.ts CHANGED Viewed

@@ -31,6 +31,8 @@ export declare class LitMaterialChip extends LitElement {
     disabled: boolean;
     elevated: boolean;
     removable: boolean;
+    /** Accessible name of the remove button, e.g. "Remove app=web". */
+    removeLabel: string;
     /** If set, renders the main action as a link (`<a>`) instead of a `<button>`. */
     href: string;
     target: string;

package/dist/chip.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAc;IAExE,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"}
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;IAC/C,mEAAmE;IAC1B,WAAW,SAAY;IAEhE,iFAAiF;IACrE,IAAI,SAAM;IACV,MAAM,SAAM;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAc;IAExE,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 CHANGED Viewed

@@ -40,6 +40,8 @@ let LitMaterialChip = class LitMaterialChip extends LitElement {
         this.disabled = false;
         this.elevated = false;
         this.removable = false;
+        /** Accessible name of the remove button, e.g. "Remove app=web". */
+        this.removeLabel = "Remove";
         /** If set, renders the main action as a link (`<a>`) instead of a `<button>`. */
         this.href = "";
         this.target = "";
@@ -111,7 +113,7 @@ let LitMaterialChip = class LitMaterialChip extends LitElement {
                 part="remove-button"
                 type="button"
                 ?disabled=${this.disabled}
-                aria-label="Remove"
+                aria-label=${this.removeLabel}
                 @click=${this.handleRemoveClick}
               >
                 <svg class="remove-icon" viewBox="0 0 18 18" aria-hidden="true">
@@ -164,6 +166,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], LitMaterialChip.prototype, "removable", void 0);
+__decorate([
+    property({ attribute: "remove-label" })
+], LitMaterialChip.prototype, "removeLabel", void 0);
 __decorate([
     property()
 ], LitMaterialChip.prototype, "href", void 0);

package/dist/chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI1C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAGO,YAAO,GAAgB,QAAQ,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAChC,cAAS,GAAG,KAAK,CAAC;~~QAE~~/C,iFAAiF;QACrE,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAG,EAAE,CAAC;QAIP,WAAM,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAiHvD,CAAC;~~aA/HiB~~,WAAM,GAAG,MAAM,AAAT,CAAU;~~IAgBb~~,YAAY;QAC7B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC;QAC3C,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;QAEhD,MAAM,WAAW,GAAG;YAClB,MAAM;YACN,IAAI,CAAC,OAAO;YACZ,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,MAAM,OAAO,GAAG,aAAa;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;SAIH;YACH,CAAC,CAAC,IAAI,CAAA,wDAAwD,CAAC;QAEjE,MAAM,aAAa,GAAG,IAAI,CAAA;;QAEtB,OAAO;;KAEV,CAAC;QAEF,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI;YACtB,CAAC,CAAC,IAAI,CAAA;;;;mBAIO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;qBACjC,IAAI,CAAC,MAAM,IAAI,OAAO;kBACzB,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO;4BAChD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;qBAC5B,IAAI,CAAC,eAAe;;cAE3B,aAAa;;SAElB;YACH,CAAC,CAAC,IAAI,CAAA;;;;;wBAKY,IAAI,CAAC,QAAQ;2BACV,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;qBAChD,IAAI,CAAC,iBAAiB;;cAE7B,aAAa;;SAElB,CAAC;QAEN,OAAO,IAAI,CAAA;mBACI,WAAW;UACpB,MAAM;UACN,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;4BAKY,IAAI,CAAC,QAAQ~~;;yBAEhB~~,IAAI,CAAC,iBAAiB;;;;;;aAMlC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAChC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACzE,CAAC;QACF,IAAI,OAAO;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC7B,CAAC;;~~AA5HW~~;IAAX,QAAQ,EAAE;gDAAiC;AACA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AAChC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAmB;~~AAGnC~~;IAAX,QAAQ,EAAE;6CAAW;AACV;IAAX,QAAQ,EAAE;+CAAa;AAEgB;IAAvC,KAAK,CAAC,cAAc,CAAC;0DAAkD;~~AAb7D~~,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,~~CAgI3B~~"}
1	+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts CHANGED Viewed

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

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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"}
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;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js CHANGED Viewed

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

package/dist/index.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lit-material/chip",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Material Design 3 chip web component (assist, filter, input, suggestion variants).",
   "license": "MIT",
   "author": {
@@ -33,15 +33,16 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "custom-elements.json"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@lit-material/tokens": "0.0.1",
-    "@lit-material/core": "0.0.1"
+    "@lit-material/core": "0.0.3",
+    "@lit-material/tokens": "0.0.2"
   },
   "devDependencies": {
     "@lit-labs/ssr": "^3.3.1",
@@ -53,9 +54,11 @@
     "tsx": "^4.19.0",
     "typescript": "^5.7.0"
   },
+  "customElements": "custom-elements.json",
   "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"
+    "test": "web-test-runner && node --import tsx --test src/chip.ssr.test.ts",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
   }
 }