@c2n/list-item 0.0.18 → 0.0.19

package/custom-elements.json

@@ -1 +1 @@
-{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/list-item.ts","declarations":[{"kind":"class","description":"A selectable row. On its own it is a toggle: click, Enter or Space flips `selected`. Inside a `c2-list` (and\ntherefore inside a `c2-select`) the list drives the selected state through context, handles the keyboard and the row\nonly reports clicks. The default slot is the primary text, `description` a second, muted line, `prefix-icon` and\n`suffix-icon` take an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon` and are sized by\n`--c2-list-item__icon--size` — anything else in them, a shortcut hint or a badge, keeps its own size.\nWith `href` the row is a link. In a multiple-selection list, adjacent selected rows lose the corner radius between\nthem (the list marks them `joined-before` / `joined-after`) so a run of selected rows reads as one block.\n\nAccessibility: standalone rows are `role=\"button\"` with `aria-pressed`; rows in a list are `role=\"option\"` with\n`aria-selected` and a roving `tabindex` managed by the list. Set your own `role` to override.","name":"ListItem","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-list-item--min-height","default":"36px"},{"type":{"text":"pixel"},"description":"Space between the icons and the content.","name":"--c2-list-item--gap","default":"8px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-top-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-top-right-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-bottom-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-bottom-right-radius","default":"6px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-top","default":"6px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-right","default":"10px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-bottom","default":"6px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-left","default":"10px"},{"type":{"text":"font-size"},"name":"--c2-list-item--font-size","default":"14px"},{"type":{"text":"font-weight"},"name":"--c2-list-item--font-weight"},{"type":{"text":"font-style"},"name":"--c2-list-item--font-style"},{"type":{"text":"font-family"},"name":"--c2-list-item--font-family"},{"type":{"text":"pixel"},"name":"--c2-list-item--line-height","default":"20px"},{"type":{"text":"border"},"name":"--c2-list-item--border-top"},{"type":{"text":"border"},"name":"--c2-list-item--border-bottom"},{"type":{"text":"border"},"name":"--c2-list-item--border-right"},{"type":{"text":"border"},"name":"--c2-list-item--border-left"},{"type":{"text":"color"},"name":"--c2-list-item--color","default":"#18181b"},{"type":{"text":"color"},"name":"--c2-list-item--background","default":"transparent"},{"type":{"text":"color"},"name":"--c2-list-item__description--color","default":"#71717a"},{"type":{"text":"font-size"},"name":"--c2-list-item__description--font-size","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-list-item__description--line-height","default":"16px"},{"type":{"text":"pixel"},"name":"--c2-list-item__description--margin-top","default":"1px"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-top"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-bottom"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-right"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-left"},{"type":{"text":"color"},"name":"--c2-list-item__hover--color"},{"type":{"text":"color"},"name":"--c2-list-item__hover--background","default":"#f4f4f5"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-top"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-bottom"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-right"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-left"},{"type":{"text":"color"},"name":"--c2-list-item__selected--color","default":"#2f56e6"},{"type":{"text":"color"},"name":"--c2-list-item__selected--background","default":"#edf1fe"},{"type":{"text":"color"},"name":"--c2-list-item__selected__hover--background","default":"#e2e9fd"},{"type":{"text":"color"},"description":"Defaults to the description colour.","name":"--c2-list-item__selected__description--color"},{"type":{"text":"outline"},"name":"--c2-list-item__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"},{"type":{"text":"pixel"},"name":"--c2-list-item__focus--outline-offset","default":"-2px"},{"type":{"text":"opacity"},"name":"--c2-list-item__disabled--opacity","default":"0.38"},{"type":{"text":"pixel"},"name":"--c2-list-item__icon--size","default":"16px"},{"type":{"text":"color"},"description":"Defaults to the row text colour.","name":"--c2-list-item__icon--color"}],"slots":[{"description":"The row content. Falls back to `label`, then `value`, when empty.","name":"default"},{"description":"Secondary line under the content (muted, smaller).","name":"description"},{"description":"Icon (or avatar, badge, …) shown before the content.","name":"prefix-icon"},{"description":"Icon shown after the content, e.g. a check mark or shortcut hint.","name":"suffix-icon"}],"members":[{"kind":"field","name":"contextConsumer","privacy":"private","default":"new ContextConsumer(this, { context: selectedItemValueContext, subscribe: true, callback: (value) => { this.selected = value ? value.includes(this.value) : false }, })"},{"kind":"field","name":"selected","type":{"text":"boolean"},"default":"false","description":"Whether the row is selected. Toggled by a click on a standalone row; controlled by the list otherwise.","attribute":"selected","reflects":true},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Dims the row and ignores clicks and keyboard.","attribute":"disabled","reflects":true},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The value reported to the parent list / select.","attribute":"value","reflects":true},{"kind":"field","name":"label","type":{"text":"string | undefined"},"description":"Text shown by the parent select for this row instead of the slotted content. Also the fallback content of the\ndefault slot when it is empty. Use it when the row content is rich (icons, two lines) but the trigger should show a\nshort label.","attribute":"label","reflects":true},{"kind":"field","name":"href","type":{"text":"string | undefined"},"default":"undefined","description":"Makes the row a link. Selection still works when the row sits in a list.","attribute":"href"},{"kind":"field","name":"target","type":{"text":"string | undefined"},"default":"undefined","description":"Browsing context used when `href` is set, such as `_blank`.","attribute":"target"},{"kind":"field","name":"data","type":{"text":"unknown | undefined"},"description":"Arbitrary payload returned alongside `value` in the list's `selection-change` event. Not an attribute."},{"kind":"field","name":"applyContext","type":{"text":"boolean"},"default":"false","description":"Private property, it will use context value to setup selected state of component."},{"kind":"field","name":"slotPresence","privacy":"private","readonly":true,"default":"new SlotPresenceController(this, ['description'])"},{"kind":"field","name":"contentSlot","type":{"text":"HTMLSlotElement"},"privacy":"private"},{"kind":"field","name":"authorRole","type":{"text":"string | null"},"privacy":"private","default":"null","description":"`role` written by the author, kept over the automatic one."},{"kind":"field","name":"displayText","type":{"text":"string"},"description":"The text a `c2-select` shows for this row: `label` when set, otherwise the text content of the default slot.","readonly":true},{"kind":"field","name":"blockDisabledClick","privacy":"private"},{"kind":"method","name":"activate","description":"Behaves like a click: dispatches `click` on the row and, for a standalone row, toggles `selected`."},{"kind":"field","name":"handleClick","privacy":"private"},{"kind":"field","name":"handleKeydown","privacy":"private"},{"kind":"method","name":"syncAria","privacy":"private"},{"kind":"method","name":"renderInner","privacy":"private"}],"events":[{"name":"click","type":{"text":"MouseEvent"},"description":"Fired when an enabled row is activated; a row with `href` also navigates."},{"name":"selected-change","type":{"text":"CustomEvent<{ selected: boolean; value: string }>"},"description":"Fired after `selected` changes, whether from a click or from the parent list."}],"attributes":[{"name":"selected","type":{"text":"boolean"},"default":"false","description":"Whether the row is selected. Toggled by a click on a standalone row; controlled by the list otherwise.","fieldName":"selected"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Dims the row and ignores clicks and keyboard.","fieldName":"disabled"},{"name":"value","type":{"text":"string"},"default":"''","description":"The value reported to the parent list / select.","fieldName":"value"},{"name":"label","type":{"text":"string | undefined"},"description":"Text shown by the parent select for this row instead of the slotted content. Also the fallback content of the\ndefault slot when it is empty. Use it when the row content is rich (icons, two lines) but the trigger should show a\nshort label.","fieldName":"label"},{"name":"href","type":{"text":"string | undefined"},"default":"undefined","description":"Makes the row a link. Selection still works when the row sits in a list.","fieldName":"href"},{"name":"target","type":{"text":"string | undefined"},"default":"undefined","description":"Browsing context used when `href` is set, such as `_blank`.","fieldName":"target"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-list-item","customElement":true}],"exports":[{"kind":"js","name":"ListItem","declaration":{"name":"ListItem","module":"src/list-item.ts"}},{"kind":"custom-element-definition","name":"c2-list-item","declaration":{"name":"ListItem","module":"src/list-item.ts"}}]}]}
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/list-item.ts","declarations":[{"kind":"class","description":"A selectable row. On its own it is a toggle: click, Enter or Space flips `selected`. Inside a `c2-list` (and\ntherefore inside a `c2-select`) the list drives the selected state through context, handles the keyboard and the row\nonly reports clicks. The default slot is the primary text, `description` a second, muted line, `prefix-icon` and\n`suffix-icon` take an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon` and are sized by\n`--c2-list-item__icon--size` — anything else in them, a shortcut hint or a badge, keeps its own size.\nWith `href` the row is a link. In a multiple-selection list, adjacent selected rows lose the corner radius between\nthem (the list marks them `joined-before` / `joined-after`) so a run of selected rows reads as one block.\n\nAccessibility: standalone rows are `role=\"button\"` with `aria-pressed`; rows in a list are `role=\"option\"` with\n`aria-selected` and a roving `tabindex` managed by the list. Set your own `role` to override.","name":"ListItem","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-list-item--min-height","default":"36px"},{"type":{"text":"pixel"},"description":"Space between the icons and the content.","name":"--c2-list-item--gap","default":"8px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-top-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-top-right-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-bottom-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-list-item--border-bottom-right-radius","default":"6px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-top","default":"6px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-right","default":"10px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-bottom","default":"6px"},{"type":{"text":"padding"},"name":"--c2-list-item--padding-left","default":"10px"},{"type":{"text":"font-size"},"name":"--c2-list-item--font-size","default":"14px"},{"type":{"text":"font-weight"},"name":"--c2-list-item--font-weight"},{"type":{"text":"font-style"},"name":"--c2-list-item--font-style"},{"type":{"text":"font-family"},"name":"--c2-list-item--font-family"},{"type":{"text":"pixel"},"name":"--c2-list-item--line-height","default":"20px"},{"type":{"text":"border"},"name":"--c2-list-item--border-top"},{"type":{"text":"border"},"name":"--c2-list-item--border-bottom"},{"type":{"text":"border"},"name":"--c2-list-item--border-right"},{"type":{"text":"border"},"name":"--c2-list-item--border-left"},{"type":{"text":"color"},"name":"--c2-list-item--color","default":"#18181b"},{"type":{"text":"color"},"name":"--c2-list-item--background","default":"transparent"},{"type":{"text":"color"},"name":"--c2-list-item__description--color","default":"#71717a"},{"type":{"text":"font-size"},"name":"--c2-list-item__description--font-size","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-list-item__description--line-height","default":"16px"},{"type":{"text":"pixel"},"name":"--c2-list-item__description--margin-top","default":"1px"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-top"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-bottom"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-right"},{"type":{"text":"border"},"name":"--c2-list-item__hover--border-left"},{"type":{"text":"color"},"name":"--c2-list-item__hover--color"},{"type":{"text":"color"},"name":"--c2-list-item__hover--background","default":"#f4f4f5"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-top"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-bottom"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-right"},{"type":{"text":"border"},"name":"--c2-list-item__selected--border-left"},{"type":{"text":"color"},"name":"--c2-list-item__selected--color","default":"#2f56e6"},{"type":{"text":"color"},"name":"--c2-list-item__selected--background","default":"#edf1fe"},{"type":{"text":"color"},"name":"--c2-list-item__selected__hover--background","default":"#e2e9fd"},{"type":{"text":"color"},"description":"Defaults to the description colour.","name":"--c2-list-item__selected__description--color"},{"type":{"text":"outline"},"name":"--c2-list-item__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"},{"type":{"text":"pixel"},"name":"--c2-list-item__focus--outline-offset","default":"-2px"},{"type":{"text":"opacity"},"name":"--c2-list-item__disabled--opacity","default":"0.38"},{"type":{"text":"pixel"},"name":"--c2-list-item__icon--size","default":"16px"},{"type":{"text":"color"},"description":"Defaults to the row text colour.","name":"--c2-list-item__icon--color"}],"slots":[{"description":"The row content. Falls back to `label`, then `value`, when empty.","name":"default"},{"description":"Secondary line under the content (muted, smaller).","name":"description"},{"description":"Icon (or avatar, badge, …) shown before the content.","name":"prefix-icon"},{"description":"Icon shown after the content, e.g. a check mark or shortcut hint.","name":"suffix-icon"}],"members":[{"kind":"field","name":"contextConsumer","privacy":"private","default":"new ContextConsumer(this, { context: selectedItemValueContext, subscribe: true, callback: (value) => { this.selected = value ? value.includes(this.value) : false }, })"},{"kind":"field","name":"selected","type":{"text":"boolean"},"default":"false","description":"Whether the row is selected. Toggled by a click on a standalone row; controlled by the list otherwise.","attribute":"selected","reflects":true},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Dims the row and ignores clicks and keyboard.","attribute":"disabled","reflects":true},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The value reported to the parent list / select.","attribute":"value","reflects":true},{"kind":"field","name":"label","type":{"text":"string | undefined"},"description":"Text shown by the parent select for this row instead of the slotted content. Also the fallback content of the\ndefault slot when it is empty. Use it when the row content is rich (icons, two lines) but the trigger should show a\nshort label.","attribute":"label","reflects":true},{"kind":"field","name":"href","type":{"text":"string | undefined"},"default":"undefined","description":"Makes the row a link. Selection still works when the row sits in a list.","attribute":"href"},{"kind":"field","name":"target","type":{"text":"string | undefined"},"default":"undefined","description":"Browsing context used when `href` is set, such as `_blank`.","attribute":"target"},{"kind":"field","name":"data","type":{"text":"unknown | undefined"},"description":"Arbitrary payload returned alongside `value` in the list's `selection-change` event. Not an attribute."},{"kind":"field","name":"applyContext","type":{"text":"boolean"},"default":"false","description":"Private property, it will use context value to setup selected state of component."},{"kind":"field","name":"slotPresence","privacy":"private","readonly":true,"default":"new SlotPresenceController(this, ['description'])"},{"kind":"field","name":"contentSlot","type":{"text":"HTMLSlotElement"},"privacy":"private"},{"kind":"field","name":"internals","privacy":"private","readonly":true},{"kind":"field","name":"displayText","type":{"text":"string"},"description":"The text a `c2-select` shows for this row: `label` when set, otherwise the text content of the default slot.","readonly":true},{"kind":"field","name":"blockDisabledClick","privacy":"private"},{"kind":"method","name":"activate","description":"Behaves like a click: dispatches `click` on the row and, for a standalone row, toggles `selected`."},{"kind":"field","name":"handleClick","privacy":"private"},{"kind":"field","name":"handleKeydown","privacy":"private"},{"kind":"method","name":"syncAria","privacy":"private"},{"kind":"method","name":"renderInner","privacy":"private"}],"events":[{"name":"click","type":{"text":"MouseEvent"},"description":"Fired when an enabled row is activated; a row with `href` also navigates."},{"name":"selected-change","type":{"text":"CustomEvent<{ selected: boolean; value: string }>"},"description":"Fired after `selected` changes, whether from a click or from the parent list."}],"attributes":[{"name":"selected","type":{"text":"boolean"},"default":"false","description":"Whether the row is selected. Toggled by a click on a standalone row; controlled by the list otherwise.","fieldName":"selected"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Dims the row and ignores clicks and keyboard.","fieldName":"disabled"},{"name":"value","type":{"text":"string"},"default":"''","description":"The value reported to the parent list / select.","fieldName":"value"},{"name":"label","type":{"text":"string | undefined"},"description":"Text shown by the parent select for this row instead of the slotted content. Also the fallback content of the\ndefault slot when it is empty. Use it when the row content is rich (icons, two lines) but the trigger should show a\nshort label.","fieldName":"label"},{"name":"href","type":{"text":"string | undefined"},"default":"undefined","description":"Makes the row a link. Selection still works when the row sits in a list.","fieldName":"href"},{"name":"target","type":{"text":"string | undefined"},"default":"undefined","description":"Browsing context used when `href` is set, such as `_blank`.","fieldName":"target"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-list-item","customElement":true}],"exports":[{"kind":"js","name":"ListItem","declaration":{"name":"ListItem","module":"src/list-item.ts"}},{"kind":"custom-element-definition","name":"c2-list-item","declaration":{"name":"ListItem","module":"src/list-item.ts"}}]}]}

package/dist/list-item.js

@@ -35,7 +35,7 @@ var ListItem = class ListItem extends LitElement {
 		this.target = void 0;
 		this.applyContext = false;
 		this.slotPresence = new SlotPresenceController(this, ["description"]);
-		this.authorRole = null;
+		this.internals = this.attachInternals();
 		this.blockDisabledClick = (event) => {
 			if (!this.disabled) return;
 			event.preventDefault();
@@ -68,7 +68,6 @@ var ListItem = class ListItem extends LitElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.authorRole === null) this.authorRole = this.getAttribute("role");
 		this.addEventListener("keydown", this.handleKeydown);
 		this.addEventListener("click", this.blockDisabledClick, true);
 	}
@@ -105,20 +104,11 @@ var ListItem = class ListItem extends LitElement {
 	}
 	syncAria() {
 		const inList = this.applyContext;
-		const role = this.authorRole ?? (this.href ? "link" : inList ? "option" : "button");
-		this.setAttribute("role", role);
-		if (role === "option") {
-			this.setAttribute("aria-selected", String(this.selected));
-			this.removeAttribute("aria-pressed");
-		} else if (role === "button") {
-			this.setAttribute("aria-pressed", String(this.selected));
-			this.removeAttribute("aria-selected");
-		} else {
-			this.removeAttribute("aria-selected");
-			this.removeAttribute("aria-pressed");
-		}
-		if (this.disabled) this.setAttribute("aria-disabled", "true");
-		else this.removeAttribute("aria-disabled");
+		const role = this.getAttribute("role") ?? (this.href ? "link" : inList ? "option" : "button");
+		this.internals.role = role;
+		this.internals.ariaSelected = role === "option" ? String(this.selected) : null;
+		this.internals.ariaPressed = role === "button" ? String(this.selected) : null;
+		this.internals.ariaDisabled = this.disabled ? "true" : null;
 		if (!inList) this.tabIndex = this.disabled ? -1 : 0;
 		else if (this.disabled) this.tabIndex = -1;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/list-item",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "main": "dist/list-item.js",
   "exports": {
@@ -65,7 +65,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.18",
+    "@c2n/core": "0.0.19",
     "@lit/context": "1.1.6",
     "lit": "3.3.3"
   },
@@ -73,5 +73,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "fda447c5290caf4e16fdb810d8f89b91ecb3b7db"
+  "gitHead": "97db30ae10cfe0b1571ba5081116bc134422fce4"
 }

package/types/src/list-item.d.ts

@@ -117,8 +117,7 @@ export declare class ListItem extends LitElement {
     applyContext: boolean;
     private readonly slotPresence;
     private contentSlot;
-    /** `role` written by the author, kept over the automatic one. */
-    private authorRole;
+    private readonly internals;
     /** The text a `c2-select` shows for this row: `label` when set, otherwise the text content of the default slot. */
     get displayText(): string;
     connectedCallback(): void;

package/types/src/list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAIjF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAOhG,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,iBAAiB,EAAE,WAAW,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,KAAK,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;IACnE,mBAAmB,EAAE,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAC1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,eAAe,CAMrB;IAEF,6GAA6G;IACjE,QAAQ,UAAQ;IAE5D,oDAAoD;IACR,QAAQ,UAAQ;IAE5D,sDAAsD;IACzB,KAAK,SAAK;IAEvC;;;;OAIG;IAC0B,KAAK,CAAC,EAAE,MAAM,CAAA;IAE3C,+EAA+E;IACnE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,kEAAkE;IACtD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAElD,6GAA6G;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAA;IAE9C;;OAEG;IAC6B,YAAY,UAAQ;IAEpD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoD;IAGjF,OAAO,CAAC,WAAW,CAAkB;IAErC,iEAAiE;IACjE,OAAO,CAAC,UAAU,CAAsB;IAExC,mHAAmH;IACnH,IAAI,WAAW,IAAI,MAAM,CAYxB;IAEQ,iBAAiB;IAOjB,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB,CAIzB;IAED,yGAAyG;IACzG,QAAQ;IAMR,OAAO,CAAC,WAAW,CAWlB;IAED,OAAO,CAAC,aAAa,CAQpB;cAEkB,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAU3D,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAc3E,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,WAAW;IAaV,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAA;KACzB;CACF"}
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAIjF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAOhG,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,iBAAiB,EAAE,WAAW,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,KAAK,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;IACnE,mBAAmB,EAAE,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAC1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,eAAe,CAMrB;IAEF,6GAA6G;IACjE,QAAQ,UAAQ;IAE5D,oDAAoD;IACR,QAAQ,UAAQ;IAE5D,sDAAsD;IACzB,KAAK,SAAK;IAEvC;;;;OAIG;IAC0B,KAAK,CAAC,EAAE,MAAM,CAAA;IAE3C,+EAA+E;IACnE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,kEAAkE;IACtD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAElD,6GAA6G;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAA;IAE9C;;OAEG;IAC6B,YAAY,UAAQ;IAEpD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoD;IAGjF,OAAO,CAAC,WAAW,CAAkB;IAIrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,mHAAmH;IACnH,IAAI,WAAW,IAAI,MAAM,CAYxB;IAEQ,iBAAiB;IAMjB,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB,CAIzB;IAED,yGAAyG;IACzG,QAAQ;IAMR,OAAO,CAAC,WAAW,CAWlB;IAED,OAAO,CAAC,aAAa,CAQpB;cAEkB,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAU3D,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAc3E,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,WAAW;IAaV,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAA;KACzB;CACF"}

package/vue.d.ts

@@ -8,17 +8,20 @@
 // nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
 
 import type { DefineComponent, HTMLAttributes } from 'vue'
-import type { ListItem, ListItemEventMap } from '@c2n/list-item'
+import type { EventMapOf } from '@c2n/core/event-helper.js'
+import type { ListItem } from '@c2n/list-item'
 
 /** The element's own public properties, plus every attribute Vue understands on a host element. */
 type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+/** The event an element fires under `name`, read from the map its `addEventListener` carries (its own or inherited). */
+type EventOf<T extends EventTarget, Name extends string> = Name extends keyof EventMapOf<T> ? EventMapOf<T>[Name] : CustomEvent
 
 declare module 'vue' {
   interface GlobalComponents {
     'c2-list-item': DefineComponent<
       C2Props<ListItem> & {
-        onClick?: (event: ListItemEventMap['click']) => void
-        onSelectedChange?: (event: ListItemEventMap['selected-change']) => void
+        onClick?: (event: EventOf<ListItem, 'click'>) => void
+        onSelectedChange?: (event: EventOf<ListItem, 'selected-change'>) => void
       }
     >
   }