@c2n/select 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,15 @@
+# @c2n/select
+
+`c2-select` is a dropdown: a themeable trigger button plus a popover holding a `c2-list` of `c2-list-item` options.
+
+```html
+<c2-select placeholder="Select a country" value="FR">
+  <c2-list-item value="US">United States</c2-list-item>
+  <c2-list-item value="FR">France</c2-list-item>
+</c2-select>
+```
+
+- The options are the `c2-list-item` children (`value`, optional `label` for a short trigger text, `disabled`).
+- `multiple`, `required`, `disabled`, `readonly`, `fit-size`, `open`.
+- `selection-change` fires with `detail.value` (array of selected values) and `detail.data`.
+- Theming: `--c2-select__button--*` (trigger), `--c2-select__list--*` (dropdown), `--c2-list-item--*` (options). See the docs site for the full list.

package/dist/select.js

@@ -0,0 +1,182 @@
+import { LitElement, html, svg, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ListItem } from "@c2n/list-item";
+import { arrayPropertyConverter } from "@c2n/core/lit-helper.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+import "@c2n/overlay";
+import "@c2n/list";
+//#region src/select.scss?inline
+var select_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-select {\n  display: contents;\n}\n\n.button {\n  display: flex;\n  flex: 1;\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 100%;\n  max-width: 100%;\n  min-height: var(--c2-select__button--min-height,36px);\n  margin: 0;\n  align-items: center;\n  justify-content: space-between;\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  text-transform: none;\n  vertical-align: middle;\n  outline: none;\n  font-size: var(--c2-select__button--font-size,14px);\n  font-weight: var(--c2-select__button--font-weight);\n  font-style: var(--c2-select__button--font-style,normal);\n  font-family: var(--c2-select__button--font-family);\n  line-height: 1.4;\n  background: var(--c2-select__button--background,#ffffff);\n  gap: var(--c2-select__button--gap,8px);\n  border-top: var(--c2-select__button--border-top,1px solid #bcbcc6);\n  border-bottom: var(--c2-select__button--border-bottom,1px solid #bcbcc6);\n  border-right: var(--c2-select__button--border-right,1px solid #bcbcc6);\n  border-left: var(--c2-select__button--border-left,1px solid #bcbcc6);\n  color: var(--c2-select__button--color,#18181b);\n  padding: var(--c2-select__button--padding,6px 10px 6px 12px);\n  border-top-left-radius: var(--c2-select__button--border-top-left-radius,6px);\n  border-top-right-radius: var(--c2-select__button--border-top-right-radius,6px);\n  border-bottom-left-radius: var(--c2-select__button--border-bottom-left-radius,6px);\n  border-bottom-right-radius: var(--c2-select__button--border-bottom-right-radius,6px);\n  will-change: background, color, border;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1), border 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.button:hover {\n  border-top: var(--c2-select__button__hover--border-top,1px solid #a1a1aa);\n  border-bottom: var(--c2-select__button__hover--border-bottom,1px solid #a1a1aa);\n  border-right: var(--c2-select__button__hover--border-right,1px solid #a1a1aa);\n  border-left: var(--c2-select__button__hover--border-left,1px solid #a1a1aa);\n  background: var(--c2-select__button__hover--background,#fafafa);\n  color: var(--c2-select__button__hover--color,#18181b);\n}\n.button:focus-visible {\n  outline: var(--c2-select__button__focus--outline,2px solid rgba(71, 110, 249, 0.4));\n  outline-offset: var(--c2-select__button__focus--outline-offset,1px);\n}\n.button:disabled {\n  cursor: default;\n  pointer-events: none;\n  opacity: var(--c2-select__button__disabled--opacity,0.38);\n}\n.button ::slotted([slot=button-prefix-icon]) {\n  flex: none;\n  width: var(--c2-select__button__prefix-icon--width,16px);\n  height: var(--c2-select__button__prefix-icon--height,16px);\n  color: var(--c2-select__button__prefix-icon--color);\n  --c2-feather-icon--size: var(--c2-select__button__prefix-icon--width,16px);\n  --c2-mat-icon--font-size: var(--c2-select__button__prefix-icon--width,16px);\n}\n.button ::slotted([slot=button-suffix-icon]),\n.button .default-icon {\n  flex: none;\n  width: var(--c2-select__button__suffix-icon--width,16px);\n  height: var(--c2-select__button__suffix-icon--height,16px);\n  color: var(--c2-select__button__suffix-icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-select__button__suffix-icon--width,16px);\n  --c2-mat-icon--font-size: var(--c2-select__button__suffix-icon--width,16px);\n}\n.button .default-icon {\n  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.button .placeholder {\n  font-weight: var(--c2-select__placeholder--font-weight);\n  font-style: var(--c2-select__placeholder--font-style);\n  color: var(--c2-select__placeholder--color,#71717a);\n  opacity: var(--c2-select__placeholder--opacity,1);\n}\n.button .button-content {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: start;\n  flex: 1;\n  min-width: 0;\n}\n\n:host([open]) .button {\n  border-top: var(--c2-select__button__open--border-top,1px solid #476ef9);\n  border-bottom: var(--c2-select__button__open--border-bottom,1px solid #476ef9);\n  border-right: var(--c2-select__button__open--border-right,1px solid #476ef9);\n  border-left: var(--c2-select__button__open--border-left,1px solid #476ef9);\n}\n:host([open]) .button .default-icon {\n  transform: rotate(180deg);\n}\n\n:host([readonly]) .button {\n  cursor: default;\n}\n\n.list {\n  --c2-list--background: var(--c2-select__list--background,#ffffff);\n  --c2-list--border-top: var(--c2-select__list--border-top,1px solid #e4e4e7);\n  --c2-list--border-right: var(--c2-select__list--border-right,1px solid #e4e4e7);\n  --c2-list--border-bottom: var(--c2-select__list--border-bottom,1px solid #e4e4e7);\n  --c2-list--border-left: var(--c2-select__list--border-left,1px solid #e4e4e7);\n  --c2-list--border-top-left-radius: var(--c2-select__list--border-top-left-radius,8px);\n  --c2-list--border-top-right-radius: var(--c2-select__list--border-top-right-radius,8px);\n  --c2-list--border-bottom-left-radius: var(--c2-select__list--border-bottom-left-radius,8px);\n  --c2-list--border-bottom-right-radius: var(--c2-select__list--border-bottom-right-radius,8px);\n  --c2-list--box-shadow: var(--c2-select__list--box-shadow,0 8px 24px rgba(24, 24, 27, 0.08));\n  --c2-list--padding-top: var(--c2-select__list--padding-top,4px);\n  --c2-list--padding-right: var(--c2-select__list--padding-right,4px);\n  --c2-list--padding-bottom: var(--c2-select__list--padding-bottom,4px);\n  --c2-list--padding-left: var(--c2-select__list--padding-left,4px);\n  --c2-list--max-height: var(--c2-select__list--max-height,280px);\n}";
+//#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/select.ts
+var Select = class Select extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.readonly = false;
+		this.disabled = false;
+		this.focused = false;
+		this.fitSize = false;
+		this.placeholder = "";
+		this.multiple = false;
+		this.required = false;
+		this.value = [];
+		this.displayText = "";
+		this.data = [];
+		this.onKeydown = (event) => {
+			this.focused = true;
+			if (event.code !== "ArrowDown" && event.code !== "ArrowUp") return;
+			event.preventDefault();
+			this.toggle(true);
+		};
+	}
+	static {
+		this.styles = unsafeCSS(select_default);
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	onButtonBlur() {
+		this.focused = false;
+		this.button.removeEventListener("keydown", this.onKeydown);
+	}
+	toggle(value) {
+		if (this.readonly) return;
+		if (typeof value == "undefined") {
+			this.menu.togglePopover();
+			return;
+		}
+		if (value && !this.menu.matches(":popover-open")) return this.menu.showPopover();
+		if (value == false && this.menu.matches(":popover-open")) return this.menu.hidePopover();
+	}
+	onButtonFocus() {
+		this.button.addEventListener("keydown", this.onKeydown);
+	}
+	prepareGetDisplayText() {
+		const updates = [new Promise((res) => requestAnimationFrame(() => res(true)))];
+		if (this.listItemSlot) for (const slotItem of this.listItemSlot.assignedElements({ flatten: true })) {
+			const listItem = slotItem instanceof ListItem ? slotItem : slotItem.firstChild;
+			if (listItem instanceof ListItem && this.value.includes(listItem.value)) updates.push(listItem.updateComplete);
+		}
+		this.childItemsUpdated = Promise.all(updates);
+	}
+	async updateDisplayText() {
+		this.prepareGetDisplayText();
+		await this.updateComplete;
+		const displayText = [];
+		if (this.listItemSlot) for (const slotItem of this.listItemSlot.assignedElements({ flatten: true })) {
+			const listItem = slotItem instanceof ListItem ? slotItem : slotItem.firstChild;
+			if (listItem instanceof ListItem && this.value.includes(listItem.value)) displayText.push(listItem.displayText);
+		}
+		this.displayText = displayText.join(", ");
+	}
+	renderButtonContent() {
+		const buttonContentClasses = { placeholder: !this.displayText };
+		return html`<div class="button-content ${classMap(buttonContentClasses)}">${this.displayText || this.placeholder}</div>`;
+	}
+	renderButtonSuffixIcon() {
+		return svg`<svg class="default-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>`;
+	}
+	handleSelectionChange(event) {
+		this.value = event.detail.value;
+		this.data = event.detail.data;
+		if (!this.multiple) this.toggle(false);
+		redispatchEvent(this, event);
+	}
+	handleOverlayToggle(event) {
+		const toggleEvent = event;
+		this.open = toggleEvent.newState == "open";
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("value") && typeof this.value === "string") this.value = arrayPropertyConverter.fromAttribute(this.value);
+	}
+	updated(_changedProperties) {
+		if (_changedProperties.has("open")) this.toggle(this.open);
+		if (_changedProperties.has("value")) this.updateDisplayText();
+	}
+	async getUpdateComplete() {
+		const complete = await super.getUpdateComplete();
+		await this.childItemsUpdated;
+		return complete;
+	}
+	handleSlotChange() {
+		this.updateDisplayText();
+	}
+	render() {
+		return html`<div class="c2-select">
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open ? "true" : "false"}
+        id="button"
+        popovertarget="menu-overlay"
+        class="button"
+        @blur=${this.onButtonBlur}
+        @focus=${this.onButtonFocus}
+        ?disabled=${this.disabled}
+      >
+        <slot name="button-prefix-icon"></slot>
+        <slot name="button-content">${this.renderButtonContent()}</slot>
+        <slot name="button-suffix-icon">${this.renderButtonSuffixIcon()}</slot>
+      </button>
+      <c2-overlay id="menu-overlay" popover @toggle=${this.handleOverlayToggle} ?fit-anchor=${this.fitSize}>
+        <c2-list
+          id="list"
+          .value=${this.value}
+          class="list"
+          ?multiple=${this.multiple}
+          @selection-change=${this.handleSelectionChange}
+          ?required=${this.required}
+        >
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </c2-list>
+      </c2-overlay>
+    </div> `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Select.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Select.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Select.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Select.prototype, "focused", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "fit-size"
+})], Select.prototype, "fitSize", void 0);
+__decorate([property({ type: String })], Select.prototype, "placeholder", void 0);
+__decorate([property({ type: Boolean })], Select.prototype, "multiple", void 0);
+__decorate([property({ type: Boolean })], Select.prototype, "required", void 0);
+__decorate([property({
+	converter: arrayPropertyConverter,
+	reflect: true
+})], Select.prototype, "value", void 0);
+__decorate([query("#button", true)], Select.prototype, "button", void 0);
+__decorate([query("#menu-overlay", true)], Select.prototype, "menu", void 0);
+__decorate([query("slot:not([name])", true)], Select.prototype, "listItemSlot", void 0);
+__decorate([state()], Select.prototype, "displayText", void 0);
+Select = __decorate([customElement("c2-select")], Select);
+//#endregion
+export { Select };

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@c2n/select",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/select.js",
+  "exports": {
+    ".": {
+      "default": "./dist/select.js",
+      "types": "./types/src/select.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "select",
+    "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",
+        "../overlay:build",
+        "../list:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "@c2n/list": "0.0.6",
+    "@c2n/list-item": "0.0.6",
+    "@c2n/overlay": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/select.d.ts

@@ -0,0 +1,147 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+import '@c2n/overlay';
+import '@c2n/list';
+/**
+ * A dropdown built from a trigger button and a `c2-list` of `c2-list-item` rows inside a `c2-overlay` popover. The
+ * rows are the light-DOM children of the select, so they are themed with the `--c2-list-item--*` variables directly on
+ * the select (or on a wrapper); the dropdown container is themed through the `--c2-select__list--*` variables and the
+ * trigger through `--c2-select__button--*`. The select has no intrinsic width: give the host a `width` (or place it in
+ * a grid/flex cell) and the trigger fills it.
+ *
+ * @tag c2-select
+ *
+ * @slot default - The options: `c2-list-item` elements, each with a `value`.
+ * @slot button-prefix-icon - Icon shown at the start of the trigger: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`.
+ * @slot button-suffix-icon - Icon shown at the end of the trigger. Defaults to a chevron that flips while open.
+ * @slot button-content - Replaces the trigger text entirely (selected labels or placeholder) with custom markup.
+ *
+ * @event {CustomEvent<SelectionChangeEventDetail>} selection-change - Fired after the user picks an option. `detail.value` is the array of selected values (one entry unless `multiple`), `detail.data` the `data` of each selected row.
+ *
+ * @cssproperty {pixel} [--c2-select__button--min-height=36px]
+ * @cssproperty {padding} [--c2-select__button--padding=6px 10px 6px 12px]
+ * @cssproperty {pixel} [--c2-select__button--gap=8px] - Space between the icons and the text.
+ * @cssproperty {color} [--c2-select__button--background=#ffffff]
+ * @cssproperty {color} [--c2-select__button--color=#18181b]
+ *
+ * @cssproperty {font-size} [--c2-select__button--font-size=14px]
+ * @cssproperty {font-weight} --c2-select__button--font-weight
+ * @cssproperty {font-style} [--c2-select__button--font-style=normal]
+ * @cssproperty {font-family} --c2-select__button--font-family
+ *
+ * @cssproperty {border-radius} [--c2-select__button--border-top-left-radius=6px]
+ * @cssproperty {border-radius} [--c2-select__button--border-top-right-radius=6px]
+ * @cssproperty {border-radius} [--c2-select__button--border-bottom-left-radius=6px]
+ * @cssproperty {border-radius} [--c2-select__button--border-bottom-right-radius=6px]
+ *
+ * @cssproperty {border} [--c2-select__button--border-top=1px solid #bcbcc6]
+ * @cssproperty {border} [--c2-select__button--border-right=1px solid #bcbcc6]
+ * @cssproperty {border} [--c2-select__button--border-bottom=1px solid #bcbcc6]
+ * @cssproperty {border} [--c2-select__button--border-left=1px solid #bcbcc6]
+ *
+ * @cssproperty {border} [--c2-select__button__hover--border-top=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-select__button__hover--border-right=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-select__button__hover--border-bottom=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-select__button__hover--border-left=1px solid #a1a1aa]
+ * @cssproperty {color} [--c2-select__button__hover--background=#fafafa]
+ * @cssproperty {color} [--c2-select__button__hover--color=#18181b]
+ *
+ * @cssproperty {border} [--c2-select__button__open--border-top=1px solid #476ef9]
+ * @cssproperty {border} [--c2-select__button__open--border-right=1px solid #476ef9]
+ * @cssproperty {border} [--c2-select__button__open--border-bottom=1px solid #476ef9]
+ * @cssproperty {border} [--c2-select__button__open--border-left=1px solid #476ef9]
+ *
+ * @cssproperty {outline} [--c2-select__button__focus--outline=2px solid rgba(71, 110, 249, 0.4)]
+ * @cssproperty {pixel} [--c2-select__button__focus--outline-offset=1px]
+ *
+ * @cssproperty {opacity} [--c2-select__button__disabled--opacity=0.38]
+ *
+ * @cssproperty {pixel} [--c2-select__button__prefix-icon--width=16px]
+ * @cssproperty {pixel} [--c2-select__button__prefix-icon--height=16px]
+ * @cssproperty {color} --c2-select__button__prefix-icon--color - Defaults to the trigger text colour.
+ *
+ * @cssproperty {pixel} [--c2-select__button__suffix-icon--width=16px]
+ * @cssproperty {pixel} [--c2-select__button__suffix-icon--height=16px]
+ * @cssproperty {color} [--c2-select__button__suffix-icon--color=#71717a]
+ *
+ * @cssproperty {font-weight} --c2-select__placeholder--font-weight
+ * @cssproperty {font-style} --c2-select__placeholder--font-style
+ * @cssproperty {color} [--c2-select__placeholder--color=#71717a]
+ * @cssproperty {opacity} [--c2-select__placeholder--opacity=1]
+ *
+ * @cssproperty {color} [--c2-select__list--background=#ffffff]
+ * @cssproperty {border} [--c2-select__list--border-top=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-select__list--border-right=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-select__list--border-bottom=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-select__list--border-left=1px solid #e4e4e7]
+ * @cssproperty {border-radius} [--c2-select__list--border-top-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-select__list--border-top-right-radius=8px]
+ * @cssproperty {border-radius} [--c2-select__list--border-bottom-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-select__list--border-bottom-right-radius=8px]
+ * @cssproperty {box-shadow} [--c2-select__list--box-shadow=0 8px 24px rgba(24, 24, 27, 0.08)]
+ * @cssproperty {padding} [--c2-select__list--padding-top=4px]
+ * @cssproperty {padding} [--c2-select__list--padding-right=4px]
+ * @cssproperty {padding} [--c2-select__list--padding-bottom=4px]
+ * @cssproperty {padding} [--c2-select__list--padding-left=4px]
+ * @cssproperty {pixel} [--c2-select__list--max-height=280px] - The dropdown scrolls past this height.
+ *
+ * @internalcomponent c2-list
+ * @internalcomponent c2-overlay
+ *
+ * @slotcomponent c2-list-item
+ */
+export declare class Select extends LitElement {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /** Whether the dropdown is showing. Reflects the popover state; set it to open or close programmatically. */
+    open: boolean;
+    /** Shows the current value but never opens the dropdown. */
+    readonly: boolean;
+    /** Dims the trigger and ignores interaction. */
+    disabled: boolean;
+    /** True while the trigger has keyboard focus. */
+    focused: boolean;
+    /** Make the dropdown exactly as wide as the trigger instead of at least as wide. */
+    fitSize: boolean;
+    /** Text shown in the trigger while nothing is selected. */
+    placeholder: string;
+    /** Allow several options to be selected; the dropdown stays open after a pick and the trigger lists every label. */
+    multiple: boolean;
+    /** Keep at least one option selected: picking the only selected option again does not clear it. */
+    required: boolean;
+    /** Selected values. Written as `value="a;b"` in markup, read as `['a', 'b']` from the property. */
+    value: string[];
+    button: HTMLButtonElement;
+    menu: HTMLElement;
+    listItemSlot?: HTMLSlotElement;
+    private displayText;
+    protected childItemsUpdated: Promise<unknown[]>;
+    data: unknown[];
+    private onButtonBlur;
+    private onKeydown;
+    toggle(value?: boolean): void;
+    private onButtonFocus;
+    private prepareGetDisplayText;
+    private updateDisplayText;
+    private renderButtonContent;
+    private renderButtonSuffixIcon;
+    private handleSelectionChange;
+    private handleOverlayToggle;
+    protected willUpdate(changedProperties: PropertyValueMap<this>): void;
+    protected updated(_changedProperties: PropertyValueMap<this>): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    private handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-select': Select;
+    }
+}
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAS7E,OAAO,cAAc,CAAA;AACrB,OAAO,WAAW,CAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAoB;IAE1C,OAAgB,iBAAiB;;;;;;;MAA4D;IAE7F,6GAA6G;IACjE,IAAI,UAAQ;IAExD,4DAA4D;IAChB,QAAQ,UAAQ;IAE5D,gDAAgD;IACJ,QAAQ,UAAQ;IAE5D,iDAAiD;IACL,OAAO,UAAQ;IAE3D,oFAAoF;IAChC,OAAO,UAAQ;IAEnE,2DAA2D;IAC/B,WAAW,SAAK;IAE5C,oHAAoH;IACvF,QAAQ,EAAE,OAAO,CAAQ;IAEtD,mGAAmG;IACtE,QAAQ,EAAE,OAAO,CAAQ;IAEtD,mGAAmG;IAKnG,KAAK,EAAE,MAAM,EAAE,CAAK;IAEW,MAAM,EAAG,iBAAiB,CAAA;IACpB,IAAI,EAAG,WAAW,CAAA;IACf,YAAY,CAAC,EAAE,eAAe,CAAA;IAE7D,OAAO,CAAC,WAAW,CAAK;IAEjC,SAAS,CAAC,iBAAiB,EAAG,OAAO,CAAC,OAAO,EAAE,CAAC,CAAA;IAEhD,IAAI,EAAE,OAAO,EAAE,CAAK;IAEpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS,CAOhB;IAEM,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;IAmBpC,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,qBAAqB;YAaf,iBAAiB;IAe/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,mBAAmB;cAKR,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cASnD,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAM9D,OAAO,CAAC,gBAAgB;IAIf,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}