@c2n/list 0.0.6

package/LICENSE

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

package/README.md

@@ -0,0 +1,29 @@
+# @c2n/list
+
+Vertical list of `c2-list-item` rows with single or multiple selection, built with Lit.
+
+```bash
+npm install @c2n/list @c2n/list-item
+```
+
+```html
+<script type="module">
+  import '@c2n/list'
+  import '@c2n/list-item'
+</script>
+
+<c2-list value="design" multiple>
+  <h6>Folders</h6>
+  <c2-list-item value="inbox">Inbox</c2-list-item>
+  <c2-list-item value="design">Design</c2-list-item>
+  <hr />
+  <c2-list-item value="archive">Archive</c2-list-item>
+</c2-list>
+```
+
+- **Selection**: the list owns it. `value` is `;`-separated in the attribute and an array in the property; the matching rows are marked selected through context. `multiple` allows several rows, `required` keeps at least one, `disabled` freezes the list. `selection-change` carries `detail.value` and `detail.data` (each row's `data` property).
+- **Keyboard**: the list is a `listbox` with a roving `tabindex`. Arrow Up/Down, Home/End move between enabled rows, Enter and Space select, typing jumps to the next matching row.
+- **Structure**: `<hr>` dividers and `<h1>`–`<h6>` group headings can sit between rows; they are styled by the `__divider` and `__heading` tokens and ignored by selection.
+- **Layout**: `--c2-list--max-height` makes a long list scroll; a list with zero vertical padding passes its corner radius to the first and last row.
+
+Theming: `--c2-list--*` for the container plus `--c2-list__divider--*` and `--c2-list__heading--*`; the rows are themed with `--c2-list-item--*`, which inherit through the list. The full list is in `custom-elements.json` and on the docs site.

package/dist/list.js

@@ -0,0 +1,317 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { selectedItemValueContext } from "@c2n/list-item/list-item-context.js";
+import { ListItem } from "@c2n/list-item";
+import { arrayPropertyConverter } from "@c2n/core/lit-helper.js";
+//#region src/list.scss?inline
+var list_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  gap: var(--c2-list--gap);\n  overflow: auto;\n  overscroll-behavior: contain;\n  pointer-events: initial;\n  max-height: var(--c2-list--max-height);\n  border-top: var(--c2-list--border-top);\n  border-bottom: var(--c2-list--border-bottom);\n  border-right: var(--c2-list--border-right);\n  border-left: var(--c2-list--border-left);\n  padding-top: var(--c2-list--padding-top,4px);\n  padding-bottom: var(--c2-list--padding-bottom,4px);\n  padding-right: var(--c2-list--padding-right,4px);\n  padding-left: var(--c2-list--padding-left,4px);\n  background: var(--c2-list--background,#ffffff);\n  box-shadow: var(--c2-list--box-shadow);\n  border-top-left-radius: var(--c2-list--border-top-left-radius);\n  border-top-right-radius: var(--c2-list--border-top-right-radius);\n  border-bottom-left-radius: var(--c2-list--border-bottom-left-radius);\n  border-bottom-right-radius: var(--c2-list--border-bottom-right-radius);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n::slotted(hr) {\n  flex: none;\n  border: none;\n  border-top: 1px solid var(--c2-list__divider--color,#e4e4e7);\n  margin: var(--c2-list__divider--margin,4px 0);\n}\n\n::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n  flex: none;\n  margin: 0;\n  color: var(--c2-list__heading--color,#71717a);\n  font-size: var(--c2-list__heading--font-size,11px);\n  font-weight: var(--c2-list__heading--font-weight,600);\n  letter-spacing: var(--c2-list__heading--letter-spacing,0.06em);\n  text-transform: var(--c2-list__heading--text-transform,uppercase);\n  line-height: 1.4;\n  padding-top: var(--c2-list__heading--padding-top,10px);\n  padding-right: var(--c2-list__heading--padding-right,10px);\n  padding-bottom: var(--c2-list__heading--padding-bottom,4px);\n  padding-left: var(--c2-list__heading--padding-left,10px);\n  user-select: none;\n}\n\n:host(.padding-top-0) ::slotted(c2-list-item:first-child) {\n  --c2-list-item--border-top-left-radius: var(--c2-list--border-top-left-radius);\n  --c2-list-item--border-top-right-radius: var(--c2-list--border-top-right-radius);\n}\n\n:host(.padding-bottom-0) ::slotted(c2-list-item:last-child) {\n  --c2-list-item--border-bottom-left-radius: var(--c2-list--border-bottom-left-radius);\n  --c2-list-item--border-bottom-right-radius: var(--c2-list--border-bottom-right-radius);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.38;\n}";
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/context-request-event.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var s$1 = class extends Event {
+	constructor(s, t, e, o) {
+		super("context-request", {
+			bubbles: !0,
+			composed: !0
+		}), this.context = s, this.contextTarget = t, this.callback = e, this.subscribe = o ?? !1;
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/value-notifier.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var s = class {
+	get value() {
+		return this.o;
+	}
+	set value(s) {
+		this.setValue(s);
+	}
+	setValue(s, t = !1) {
+		const i = t || !Object.is(s, this.o);
+		this.o = s, i && this.updateObservers();
+	}
+	constructor(s) {
+		this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+			for (const [s, { disposer: t }] of this.subscriptions) s(this.o, t);
+		}, void 0 !== s && (this.value = s);
+	}
+	addCallback(s, t, i) {
+		if (!i) return void s(this.value);
+		this.subscriptions.has(s) || this.subscriptions.set(s, {
+			disposer: () => {
+				this.subscriptions.delete(s);
+			},
+			consumerHost: t
+		});
+		const { disposer: h } = this.subscriptions.get(s);
+		s(this.value, h);
+	}
+	clearCallbacks() {
+		this.subscriptions.clear();
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/controllers/context-provider.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ var e$1 = class extends Event {
+	constructor(t, s) {
+		super("context-provider", {
+			bubbles: !0,
+			composed: !0
+		}), this.context = t, this.contextTarget = s;
+	}
+};
+var i = class extends s {
+	constructor(s, e, i) {
+		super(void 0 !== e.context ? e.initialValue : i), this.onContextRequest = (t) => {
+			if (t.context !== this.context) return;
+			const s = t.contextTarget ?? t.composedPath()[0];
+			s !== this.host && (t.stopPropagation(), this.addCallback(t.callback, s, t.subscribe));
+		}, this.onProviderRequest = (s) => {
+			if (s.context !== this.context) return;
+			if ((s.contextTarget ?? s.composedPath()[0]) === this.host) return;
+			const e = /* @__PURE__ */ new Set();
+			for (const [s, { consumerHost: i }] of this.subscriptions) e.has(s) || (e.add(s), i.dispatchEvent(new s$1(this.context, i, s, !0)));
+			s.stopPropagation();
+		}, this.host = s, void 0 !== e.context ? this.context = e.context : this.context = e, this.attachListeners(), this.host.addController?.(this);
+	}
+	attachListeners() {
+		this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+	}
+	hostConnected() {
+		this.host.dispatchEvent(new e$1(this.context, this.host));
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/decorators/provide.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function e({ context: e }) {
+	return (n, i$1) => {
+		const r = /* @__PURE__ */ new WeakMap();
+		if ("object" == typeof i$1) return {
+			get() {
+				return n.get.call(this);
+			},
+			set(t) {
+				return r.get(this).setValue(t), n.set.call(this, t);
+			},
+			init(n) {
+				return r.set(this, new i(this, {
+					context: e,
+					initialValue: n
+				})), n;
+			}
+		};
+		{
+			n.constructor.addInitializer(((n) => {
+				r.set(n, new i(n, { context: e }));
+			}));
+			const o = Object.getOwnPropertyDescriptor(n, i$1);
+			let s;
+			if (void 0 === o) {
+				const t = /* @__PURE__ */ new WeakMap();
+				s = {
+					get() {
+						return t.get(this);
+					},
+					set(e) {
+						r.get(this).setValue(e), t.set(this, e);
+					},
+					configurable: !0,
+					enumerable: !0
+				};
+			} else {
+				const t = o.set;
+				s = {
+					...o,
+					set(e) {
+						r.get(this).setValue(e), t?.call(this, e);
+					}
+				};
+			}
+			Object.defineProperty(n, i$1, s);
+			return;
+		}
+	};
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(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;
+}
+//#endregion
+//#region src/list.ts
+var List = class List extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = [];
+		this.data = [];
+		this.disabled = false;
+		this.multiple = false;
+		this.required = false;
+		this.focusedItem = void 0;
+		this.typeahead = "";
+	}
+	static {
+		this.styles = unsafeCSS(list_default);
+	}
+	/** Slotted rows, in DOM order (dividers and headings excluded). */
+	get items() {
+		return (this.listItemSlot?.assignedElements({ flatten: true }) ?? []).map((slotItem) => slotItem instanceof ListItem ? slotItem : slotItem.firstChild).filter((item) => item instanceof ListItem);
+	}
+	get enabledItems() {
+		return this.items.filter((item) => !item.disabled);
+	}
+	handleSlotChange() {
+		for (const listItem of this.items) if (!listItem.applyContext) listItem.applyContext = true;
+		this.syncRows();
+	}
+	/**
+	* Mirrors the selection onto the rows: `data`, the roving tabindex, and `joined-before` / `joined-after` on adjacent
+	* selected rows so `c2-list-item` can square the corners between them and a run of selected rows reads as one block.
+	*/
+	syncRows() {
+		const items = this.items;
+		if (items.length === 0) return;
+		this.data = this.value.map((value) => items.find((item) => item.value === value)?.data);
+		items.forEach((item, index) => {
+			const selected = this.value.includes(item.value);
+			item.toggleAttribute("joined-before", selected && index > 0 && this.value.includes(items[index - 1].value));
+			item.toggleAttribute("joined-after", selected && index < items.length - 1 && this.value.includes(items[index + 1].value));
+		});
+		const enabled = this.enabledItems;
+		if (!this.focusedItem || !enabled.includes(this.focusedItem)) this.focusedItem = enabled.find((item) => this.value.includes(item.value)) ?? enabled[0];
+		for (const item of items) item.tabIndex = item === this.focusedItem && !this.disabled ? 0 : -1;
+	}
+	setFocusedItem(item, focus = true) {
+		this.focusedItem = item;
+		for (const other of this.items) other.tabIndex = other === item ? 0 : -1;
+		if (focus) item.focus();
+	}
+	handleListItemClick(event) {
+		const target = event.target;
+		if (target instanceof ListItem && !target.disabled) {
+			this.setFocusedItem(target, false);
+			this.select(target.value);
+		}
+	}
+	/** Applies a user selection of `value` (toggle in `multiple` mode) and fires `selection-change`. */
+	select(value) {
+		const updatedValues = this.value.includes(value) ? this.value.filter((v) => v !== value) : this.multiple ? [...this.value, value] : [value];
+		if (this.required && updatedValues.length === 0) {
+			this.dispatchSelectionChangeEvent();
+			return;
+		}
+		this.value = updatedValues;
+		this.syncRows();
+		this.dispatchSelectionChangeEvent();
+	}
+	handleKeydown(event) {
+		if (this.disabled) return;
+		const enabled = this.enabledItems;
+		if (enabled.length === 0) return;
+		const current = event.target instanceof ListItem ? event.target : this.focusedItem;
+		const index = current ? enabled.indexOf(current) : -1;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.setFocusedItem(enabled[Math.min(index + 1, enabled.length - 1)]);
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				this.setFocusedItem(enabled[Math.max(index - 1, 0)]);
+				return;
+			case "Home":
+				event.preventDefault();
+				this.setFocusedItem(enabled[0]);
+				return;
+			case "End":
+				event.preventDefault();
+				this.setFocusedItem(enabled[enabled.length - 1]);
+				return;
+			case "Enter":
+			case " ":
+				if (current) {
+					event.preventDefault();
+					if (current.href) current.renderRoot.querySelector("a")?.click();
+					else this.select(current.value);
+				}
+				return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			clearTimeout(this.typeaheadTimer);
+			this.typeahead += event.key.toLowerCase();
+			this.typeaheadTimer = setTimeout(() => this.typeahead = "", 600);
+			const start = this.typeahead.length === 1 ? index + 1 : index;
+			const match = [...enabled.slice(Math.max(start, 0)), ...enabled.slice(0, Math.max(start, 0))].find((item) => item.displayText.trim().toLowerCase().startsWith(this.typeahead));
+			if (match) this.setFocusedItem(match);
+		}
+	}
+	dispatchSelectionChangeEvent() {
+		this.dispatchEvent(new CustomEvent("selection-change", {
+			bubbles: true,
+			cancelable: true,
+			detail: {
+				value: this.value,
+				data: this.data
+			}
+		}));
+	}
+	/** Flush lists (no vertical padding) let the first and last rows take the list's corner radius. */
+	syncPaddingClasses() {
+		const styleMap = this.computedStyleMap();
+		this.classList.toggle("padding-top-0", styleMap.get("padding-top")?.toString() === "0px");
+		this.classList.toggle("padding-bottom-0", styleMap.get("padding-bottom")?.toString() === "0px");
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("value") && typeof this.value === "string") this.value = arrayPropertyConverter.fromAttribute(this.value);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("value")) this.syncRows();
+		this.setAttribute("role", "listbox");
+		this.setAttribute("aria-multiselectable", String(this.multiple));
+		if (this.disabled) this.setAttribute("aria-disabled", "true");
+		else this.removeAttribute("aria-disabled");
+		this.syncPaddingClasses();
+	}
+	/**
+	* private function used for demo project in some edge case need to refresh component
+	*/
+	_initComponent() {
+		this.syncPaddingClasses();
+	}
+	render() {
+		return html`<slot @slotchange=${this.handleSlotChange} @click=${this.handleListItemClick} @keydown=${this.handleKeydown}></slot>`;
+	}
+};
+__decorate([e({ context: selectedItemValueContext }), property({
+	converter: arrayPropertyConverter,
+	reflect: true
+})], List.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], List.prototype, "disabled", void 0);
+__decorate([property({ type: Boolean })], List.prototype, "multiple", void 0);
+__decorate([property({ type: Boolean })], List.prototype, "required", void 0);
+__decorate([query("slot")], List.prototype, "listItemSlot", void 0);
+List = __decorate([customElement("c2-list")], List);
+//#endregion
+export { List };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@c2n/list",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/list.js",
+  "exports": {
+    ".": {
+      "default": "./dist/list.js",
+      "types": "./types/src/list.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "list",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../list-item:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "@c2n/list-item": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/list.d.ts

@@ -0,0 +1,109 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+import { ListItem } from '@c2n/list-item';
+export interface SelectionChangeEventDetail {
+    value: string[];
+    data: unknown[];
+}
+/**
+ * A vertical list of `c2-list-item` rows with single or multiple selection. The list owns the selection: it reads the
+ * `value` of the clicked row, updates its own `value` (a `;`-separated list in the attribute, an array in the property)
+ * and pushes the selected state down to every row through context, so rows never need a `selected` attribute of
+ * their own when they live inside a list.
+ *
+ * Keyboard: the list is a `listbox` with a roving `tabindex`. Arrow Up/Down move between enabled rows, Home/End jump to
+ * the first/last, Enter and Space select the focused row, and typing letters jumps to the next row starting with them.
+ *
+ * Besides rows, the default slot accepts `<hr>` dividers and `<h1>`–`<h6>` group headings; both are styled by the
+ * `__divider` and `__heading` tokens and skipped by selection and keyboard.
+ *
+ * @tag c2-list
+ *
+ * @slot default - The rows: `c2-list-item` elements (or wrappers whose first child is a `c2-list-item`), plus `<hr>` dividers and heading elements.
+ *
+ * @event {CustomEvent<SelectionChangeEventDetail>} selection-change - Fired after the user changes the selection. `detail.value` is the array of selected values, `detail.data` the matching `data` of each row.
+ *
+ * @cssproperty {color} [--c2-list--background=#ffffff]
+ * @cssproperty {pixel} --c2-list--gap
+ *
+ * @cssproperty {border-radius} --c2-list--border-top-left-radius
+ * @cssproperty {border-radius} --c2-list--border-top-right-radius
+ * @cssproperty {border-radius} --c2-list--border-bottom-left-radius
+ * @cssproperty {border-radius} --c2-list--border-bottom-right-radius
+ *
+ * @cssproperty {border} --c2-list--border-top
+ * @cssproperty {border} --c2-list--border-bottom
+ * @cssproperty {border} --c2-list--border-right
+ * @cssproperty {border} --c2-list--border-left
+ *
+ * @cssproperty {box-shadow} --c2-list--box-shadow
+ *
+ * @cssproperty {padding} [--c2-list--padding-top=4px]
+ * @cssproperty {padding} [--c2-list--padding-bottom=4px]
+ * @cssproperty {padding} [--c2-list--padding-right=4px]
+ * @cssproperty {padding} [--c2-list--padding-left=4px]
+ *
+ * @cssproperty {pixel} --c2-list--max-height - Scrolls when the rows are taller than this.
+ *
+ * @cssproperty {color} [--c2-list__divider--color=#e4e4e7]
+ * @cssproperty {margin} [--c2-list__divider--margin=4px 0]
+ *
+ * @cssproperty {color} [--c2-list__heading--color=#71717a]
+ * @cssproperty {font-size} [--c2-list__heading--font-size=11px]
+ * @cssproperty {font-weight} [--c2-list__heading--font-weight=600]
+ * @cssproperty {letter-spacing} [--c2-list__heading--letter-spacing=0.06em]
+ * @cssproperty {text-transform} [--c2-list__heading--text-transform=uppercase]
+ * @cssproperty {padding} [--c2-list__heading--padding-top=10px]
+ * @cssproperty {padding} [--c2-list__heading--padding-right=10px]
+ * @cssproperty {padding} [--c2-list__heading--padding-bottom=4px]
+ * @cssproperty {padding} [--c2-list__heading--padding-left=10px]
+ *
+ * @slotcomponent c2-list-item
+ */
+export declare class List extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Selected values. Written as `value="a;b"` in markup, read as `['a', 'b']` from the property. */
+    value: string[];
+    /** The `data` of every selected row, in `value` order. Not an attribute. */
+    data: unknown[];
+    /** Dims the whole list and ignores clicks and keyboard. */
+    disabled: boolean;
+    /** Allow several rows to be selected; clicking a selected row deselects it. */
+    multiple: boolean;
+    /** Keep at least one row selected: clicking the only selected row does nothing. */
+    required: boolean;
+    private listItemSlot;
+    /** The row that currently holds the roving tabindex. */
+    private focusedItem;
+    private typeahead;
+    private typeaheadTimer;
+    /** Slotted rows, in DOM order (dividers and headings excluded). */
+    get items(): ListItem[];
+    private get enabledItems();
+    private handleSlotChange;
+    /**
+     * Mirrors the selection onto the rows: `data`, the roving tabindex, and `joined-before` / `joined-after` on adjacent
+     * selected rows so `c2-list-item` can square the corners between them and a run of selected rows reads as one block.
+     */
+    private syncRows;
+    private setFocusedItem;
+    private handleListItemClick;
+    /** Applies a user selection of `value` (toggle in `multiple` mode) and fires `selection-change`. */
+    private select;
+    private handleKeydown;
+    private dispatchSelectionChangeEvent;
+    /** Flush lists (no vertical padding) let the first and last rows take the list's corner radius. */
+    private syncPaddingClasses;
+    protected willUpdate(changedProperties: PropertyValueMap<this>): void;
+    protected updated(changedProperties: PropertyValueMap<this>): void;
+    /**
+     * private function used for demo project in some edge case need to refresh component
+     */
+    _initComponent(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-list': List;
+    }
+}
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAIxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIzC,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,IAAI,EAAE,OAAO,EAAE,CAAA;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,mGAAmG;IAMnG,KAAK,EAAE,MAAM,EAAE,CAAK;IAEpB,4EAA4E;IAC5E,IAAI,EAAE,OAAO,EAAE,CAAK;IAEpB,2DAA2D;IACf,QAAQ,EAAE,OAAO,CAAQ;IAErE,+EAA+E;IAClD,QAAQ,EAAE,OAAO,CAAQ;IAEtD,mFAAmF;IACtD,QAAQ,EAAE,OAAO,CAAQ;IAGtD,OAAO,CAAC,YAAY,CAAkB;IAEtC,wDAAwD;IACxD,OAAO,CAAC,WAAW,CAAkC;IAErD,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,cAAc,CAA2C;IAEjE,mEAAmE;IACnE,IAAI,KAAK,IAAI,QAAQ,EAAE,CAItB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,gBAAgB;IASxB;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,mBAAmB;IAQ3B,oGAAoG;IACpG,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,4BAA4B;IAapC,mGAAmG;IACnG,OAAO,CAAC,kBAAkB;cAMP,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAW3E;;OAEG;IACH,cAAc;IAIL,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}