@lit-material/chip 0.0.2 → 0.0.3

package/custom-elements.json

@@ -0,0 +1,327 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "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": "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": "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"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/chip-styles.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-material/chip",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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\""
   }
 }