@c2n/cascader 0.0.9

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,36 @@
+# @c2n/cascader
+
+`<c2-cascader>` selects a path through nested data in one multi-column floating panel.
+
+```bash
+npm install @c2n/cascader
+```
+
+```html
+<c2-cascader id="location" aria-label="Choose a location" placeholder="Please select"></c2-cascader>
+```
+
+```js
+import '@c2n/cascader'
+
+const cascader = document.querySelector('#location')
+cascader.options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [{ value: 'west-lake', label: 'West Lake' }],
+      },
+    ],
+  },
+]
+
+cascader.addEventListener('cascader-change', (event) => {
+  console.log(event.detail.value) // ['zhejiang', 'hangzhou', 'west-lake']
+})
+```
+
+Set `expand-trigger="hover"` to open child columns on hover. Set `change-on-select` when branches as well as leaves are valid values. The component is form-associated and submits its selected path separated by semicolons.

package/dist/cascader.js

@@ -0,0 +1,352 @@
+import { LitElement, html, nothing, svg, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { arrayPropertyConverter, jsonPropertyConverter } from "@c2n/core/lit-helper.js";
+import "@c2n/overlay";
+//#region src/cascader.scss?inline
+var cascader_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.trigger {\n  box-sizing: border-box;\n  display: inline-flex;\n  width: var(--c2-cascader__trigger--width,220px);\n  min-height: var(--c2-cascader__trigger--min-height,36px);\n  margin: 0;\n  padding: var(--c2-cascader__trigger--padding,6px 10px 6px 12px);\n  align-items: center;\n  gap: var(--c2-cascader__trigger--gap,8px);\n  border: var(--c2-cascader__trigger--border,1px solid #bcbcc6);\n  border-radius: var(--c2-cascader__trigger--border-radius,6px);\n  background: var(--c2-cascader__trigger--background,#ffffff);\n  color: var(--c2-cascader__trigger--color,#18181b);\n  font-family: inherit;\n  font-size: var(--c2-cascader__trigger--font-size,14px);\n  line-height: 1.4;\n  text-align: start;\n  cursor: pointer;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), border 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.trigger:hover:not(:disabled) {\n  border: var(--c2-cascader__trigger__hover--border,1px solid #a1a1aa);\n  background: var(--c2-cascader__trigger__hover--background,#fafafa);\n}\n.trigger:focus-visible {\n  outline: var(--c2-cascader__trigger__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-cascader__trigger__focus--outline-offset,0px);\n}\n.trigger:disabled {\n  cursor: default;\n  opacity: var(--c2-cascader__trigger__disabled--opacity,0.38);\n}\n\n:host([open]) .trigger {\n  border: var(--c2-cascader__trigger__open--border,1px solid rgb(2, 101, 220));\n}\n:host([open]) .trigger .trigger-icon {\n  transform: rotate(180deg);\n}\n\n:host([readonly]) .trigger {\n  cursor: default;\n}\n\n.value {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  color: var(--c2-cascader__placeholder--color,#71717a);\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]),\n.trigger-icon,\n.option-chevron,\n.option-check {\n  width: var(--c2-cascader__icon--size,16px);\n  height: var(--c2-cascader__icon--size,16px);\n  flex: none;\n  color: var(--c2-cascader__icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-cascader__icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-cascader__icon--size,16px);\n}\n\n.trigger-icon {\n  display: block;\n  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.panel {\n  box-sizing: border-box;\n  display: flex;\n  max-width: min(var(--c2-cascader__panel--max-width,720px), var(--c2-overlay--available-width, 100vw));\n  overflow-x: auto;\n  border: var(--c2-cascader__panel--border,1px solid #e4e4e7);\n  border-radius: var(--c2-cascader__panel--border-radius,8px);\n  background: var(--c2-cascader__panel--background,#ffffff);\n  box-shadow: var(--c2-cascader__panel--box-shadow,0 12px 32px rgba(24, 24, 27, 0.14));\n}\n\n.column {\n  box-sizing: border-box;\n  min-width: var(--c2-cascader__column--min-width,150px);\n  max-width: var(--c2-cascader__column--max-width,240px);\n  max-height: min(var(--c2-cascader__column--max-height,280px), var(--c2-overlay--available-height, 100vh));\n  padding: var(--c2-cascader__column--padding,4px);\n  overflow-y: auto;\n  border-right: var(--c2-cascader__column--border,1px solid #e4e4e7);\n}\n.column:last-child {\n  border-right: 0;\n}\n\n.option {\n  box-sizing: border-box;\n  display: flex;\n  width: 100%;\n  min-height: var(--c2-cascader__option--min-height,36px);\n  margin: 0;\n  padding: var(--c2-cascader__option--padding,8px 10px);\n  align-items: center;\n  gap: var(--c2-cascader__option--gap,8px);\n  border: 0;\n  border-radius: var(--c2-cascader__option--border-radius,6px);\n  background: transparent;\n  color: var(--c2-cascader__option--color,#18181b);\n  font-family: inherit;\n  font-size: var(--c2-cascader__option--font-size,14px);\n  line-height: 1.35;\n  text-align: start;\n  cursor: pointer;\n}\n.option:hover:not(:disabled), .option:focus-visible {\n  background: var(--c2-cascader__option__hover--background,#f4f4f5);\n}\n.option:focus-visible {\n  outline: var(--c2-cascader__trigger__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: -2px;\n}\n.option:disabled {\n  cursor: default;\n  opacity: var(--c2-cascader__option__disabled--opacity,0.38);\n}\n\n.option--active {\n  background: var(--c2-cascader__option__active--background,#e8f2ff);\n  color: var(--c2-cascader__option__active--color,#18181b);\n  font-weight: 600;\n}\n\n.option--selected {\n  color: var(--c2-cascader__option__selected--color,rgb(2, 101, 220));\n}\n\n.option-content {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.option-check {\n  color: var(--c2-cascader__option__selected--color,rgb(2, 101, 220));\n}\n\n.empty {\n  padding: var(--c2-cascader__empty--padding,18px);\n  color: var(--c2-cascader__empty--color,#71717a);\n  font-size: var(--c2-cascader__option--font-size,14px);\n  white-space: nowrap;\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/cascader.ts
+var Cascader = class Cascader extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.internals = this.attachInternals();
+		this.defaultValue = [];
+		this.defaultValueCaptured = false;
+		this.customValidityMessage = "";
+		this.disabledByForm = false;
+		this.activePath = [];
+		this.options = [];
+		this.value = [];
+		this.name = "";
+		this.placeholder = "Please select";
+		this.separator = " / ";
+		this.ariaLabel = null;
+		this.open = false;
+		this.disabled = false;
+		this.readonly = false;
+		this.required = false;
+		this.changeOnSelect = false;
+		this.expandTrigger = "click";
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = unsafeCSS(cascader_default);
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	/** The resolved option path for the current `value`. Invalid trailing values are omitted. */
+	get selectedOptions() {
+		return this.resolvePath(this.value);
+	}
+	/** Human-readable selected path. */
+	get displayValue() {
+		return this.selectedOptions.map((option) => option.label).join(this.separator);
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.defaultValueCaptured) {
+			this.defaultValue = arrayPropertyConverter.fromAttribute(this.getAttribute("value") ?? "");
+			this.defaultValueCaptured = true;
+		}
+	}
+	formResetCallback() {
+		this.value = [...this.defaultValue];
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = arrayPropertyConverter.fromAttribute(state);
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.syncFormState();
+	}
+	/** Opens, closes or toggles the floating panel. */
+	toggle(force) {
+		if (this.readonly || this.effectiveDisabled) {
+			if (this.panel?.matches(":popover-open")) this.panel.hidePopover();
+			return;
+		}
+		const next = force ?? !this.panel.matches(":popover-open");
+		if (next && !this.panel.matches(":popover-open")) this.panel.showPopover();
+		if (!next && this.panel.matches(":popover-open")) this.panel.hidePopover();
+	}
+	willUpdate(changed) {
+		if (changed.has("value") && typeof this.value === "string") this.value = arrayPropertyConverter.fromAttribute(this.value);
+		if (changed.has("options") && !Array.isArray(this.options)) this.options = [];
+	}
+	updated(changed) {
+		if (changed.has("open") || changed.has("disabled") || changed.has("readonly")) this.toggle(this.open);
+		if (changed.has("value") || changed.has("required") || changed.has("disabled") || changed.has("name")) this.syncFormState();
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
+	resolvePath(values) {
+		const path = [];
+		let options = this.options;
+		for (const value of values) {
+			const option = options.find((candidate) => candidate.value === value);
+			if (!option) break;
+			path.push(option);
+			options = option.children ?? [];
+		}
+		return path;
+	}
+	get columns() {
+		const columns = [this.options];
+		for (const option of this.activePath) {
+			if (!option.children?.length) break;
+			columns.push(option.children);
+		}
+		return columns;
+	}
+	handleOverlayToggle(event) {
+		const open = event.newState === "open";
+		this.open = open;
+		if (open) this.activePath = this.selectedOptions;
+		this.dispatchEvent(new CustomEvent("open-change", {
+			detail: { open },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleTriggerKeydown(event) {
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Enter",
+			" "
+		].includes(event.key)) return;
+		event.preventDefault();
+		this.toggle(true);
+		this.focusOption(0, event.key === "ArrowUp" ? -1 : 0);
+	}
+	optionPath(level, option) {
+		return [...this.activePath.slice(0, level), option];
+	}
+	activateOption(level, option, commitBranch) {
+		if (option.disabled) return;
+		const path = this.optionPath(level, option);
+		this.activePath = path;
+		const complete = !option.children?.length;
+		if (complete || commitBranch) this.commit(path, complete);
+		if (complete) this.toggle(false);
+	}
+	handleOptionClick(level, option) {
+		this.activateOption(level, option, this.changeOnSelect);
+		if (option.children?.length) this.focusOption(level + 1, 0);
+	}
+	handleOptionPointerEnter(level, option) {
+		if (this.expandTrigger !== "hover" || option.disabled || !option.children?.length) return;
+		this.activePath = this.optionPath(level, option);
+	}
+	commit(path, complete) {
+		this.value = path.map((option) => option.value);
+		const detail = {
+			value: [...this.value],
+			labels: path.map((option) => option.label),
+			options: [...path],
+			complete
+		};
+		this.dispatchEvent(new CustomEvent("cascader-change", {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	async focusOption(level, index) {
+		await this.updateComplete;
+		const options = [...this.renderRoot.querySelectorAll(`[data-level="${level}"]`)].filter((option) => option.getAttribute("aria-disabled") !== "true");
+		if (!options.length) return;
+		options[index < 0 ? options.length - 1 : Math.min(index, options.length - 1)]?.focus();
+	}
+	handleOptionKeydown(event, level, option) {
+		const enabled = this.columns[level].filter((item) => !item.disabled);
+		const enabledIndex = enabled.indexOf(option);
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const nextIndex = (enabledIndex + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length;
+			this.focusOption(level, nextIndex);
+		} else if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			this.focusOption(level, event.key === "Home" ? 0 : -1);
+		} else if (event.key === "ArrowRight" && option.children?.length) {
+			event.preventDefault();
+			this.activateOption(level, option, false);
+			this.focusOption(level + 1, 0);
+		} else if (event.key === "ArrowLeft" && level > 0) {
+			event.preventDefault();
+			const parentOptions = this.columns[level - 1].filter((item) => !item.disabled);
+			this.focusOption(level - 1, parentOptions.indexOf(this.activePath[level - 1]));
+		} else if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.handleOptionClick(level, option);
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			this.toggle(false);
+			this.trigger.focus();
+		}
+	}
+	syncFormState() {
+		const serialized = this.value.join(";");
+		this.internals.setFormValue(this.effectiveDisabled ? null : serialized || null, serialized);
+		const missing = this.required && this.value.length === 0;
+		const flags = this.customValidityMessage ? { customError: true } : missing ? { valueMissing: true } : {};
+		const message = this.customValidityMessage || (missing ? "Please select an option." : "");
+		this.internals.setValidity(flags, message, this.trigger);
+	}
+	renderChevron() {
+		return svg`<svg class="trigger-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>`;
+	}
+	renderOption(option, level) {
+		const active = this.activePath[level]?.value === option.value;
+		const selected = this.value[level] === option.value;
+		const hasChildren = Boolean(option.children?.length);
+		return html`
+      <button
+        type="button"
+        role="treeitem"
+        class=${classMap({
+			option: true,
+			"option--active": active,
+			"option--selected": selected
+		})}
+        data-level=${level}
+        aria-level=${level + 1}
+        aria-expanded=${hasChildren ? String(active) : nothing}
+        aria-selected=${selected ? "true" : "false"}
+        aria-disabled=${option.disabled ? "true" : "false"}
+        ?disabled=${option.disabled}
+        @click=${() => this.handleOptionClick(level, option)}
+        @pointerenter=${() => this.handleOptionPointerEnter(level, option)}
+        @keydown=${(event) => this.handleOptionKeydown(event, level, option)}
+      >
+        <span class="option-content">${this.itemRenderer?.({
+			option,
+			level,
+			active,
+			selected
+		}) ?? option.label}</span>
+        ${hasChildren ? svg`<svg class="option-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"></path></svg>` : selected ? svg`<svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"></path></svg>` : nothing}
+      </button>
+    `;
+	}
+	render() {
+		const displayValue = this.displayValue;
+		return html`
+      <button
+        id="trigger"
+        class="trigger"
+        type="button"
+        aria-label=${this.ariaLabel || nothing}
+        aria-haspopup="tree"
+        aria-expanded=${this.open ? "true" : "false"}
+        popovertarget=${this.readonly || this.effectiveDisabled ? nothing : "panel-overlay"}
+        ?disabled=${this.effectiveDisabled}
+        @keydown=${this.handleTriggerKeydown}
+      >
+        <slot name="prefix-icon"></slot>
+        <span class=${classMap({
+			value: true,
+			placeholder: !displayValue
+		})}>${displayValue || this.placeholder}</span>
+        <slot name="suffix-icon">${this.renderChevron()}</slot>
+      </button>
+      <c2-overlay id="panel-overlay" popover free-width @toggle=${this.handleOverlayToggle}>
+        <div class="panel" role="tree" aria-label=${this.ariaLabel || "Cascader options"}>
+          ${this.options.length ? this.columns.map((column, level) => html`
+                    <div class="column" role="group" aria-label=${`Level ${level + 1}`}>${column.map((option) => this.renderOption(option, level))}</div>
+                  `) : html`<div class="empty" role="status"><slot name="empty">No options available.</slot></div>`}
+        </div>
+      </c2-overlay>
+    `;
+	}
+};
+__decorate([state()], Cascader.prototype, "disabledByForm", void 0);
+__decorate([state()], Cascader.prototype, "activePath", void 0);
+__decorate([property({ converter: jsonPropertyConverter })], Cascader.prototype, "options", void 0);
+__decorate([property({
+	converter: arrayPropertyConverter,
+	reflect: true
+})], Cascader.prototype, "value", void 0);
+__decorate([property({ type: String })], Cascader.prototype, "name", void 0);
+__decorate([property({ type: String })], Cascader.prototype, "placeholder", void 0);
+__decorate([property({ type: String })], Cascader.prototype, "separator", void 0);
+__decorate([property({ attribute: "aria-label" })], Cascader.prototype, "ariaLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Cascader.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Cascader.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Cascader.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Cascader.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "change-on-select"
+})], Cascader.prototype, "changeOnSelect", void 0);
+__decorate([property({
+	attribute: "expand-trigger",
+	reflect: true
+})], Cascader.prototype, "expandTrigger", void 0);
+__decorate([property({ attribute: false })], Cascader.prototype, "itemRenderer", void 0);
+__decorate([query("#trigger", true)], Cascader.prototype, "trigger", void 0);
+__decorate([query("#panel-overlay", true)], Cascader.prototype, "panel", void 0);
+Cascader = __decorate([customElement("c2-cascader")], Cascader);
+//#endregion
+export { Cascader };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@c2n/cascader",
+  "version": "0.0.9",
+  "type": "module",
+  "main": "dist/cascader.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/cascader.d.ts",
+      "default": "./dist/cascader.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "cascader",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "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",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../overlay:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.9",
+    "@c2n/overlay": "0.0.9",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "e4768cce5e0fbd5bc3165cd493a1e8d57cf0fff4"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/cascader. Import once, anywhere in the program:
+//
+//     import '@c2n/cascader/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Cascader } from '@c2n/cascader'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-cascader': C2Props<Cascader>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/cascader.d.ts

@@ -0,0 +1,186 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import type { Overlay } from '@c2n/overlay';
+import '@c2n/overlay';
+/** One node in a cascader hierarchy. */
+export interface CascaderOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    children?: CascaderOption[];
+    data?: unknown;
+}
+export interface CascaderItemContext {
+    option: CascaderOption;
+    level: number;
+    active: boolean;
+    selected: boolean;
+}
+/** Returns custom content for an option row while the cascader keeps interaction and accessibility. */
+export type CascaderItemRenderer = (context: CascaderItemContext) => unknown;
+export interface CascaderChangeEventDetail {
+    value: string[];
+    labels: string[];
+    options: CascaderOption[];
+    complete: boolean;
+}
+/** Events fired by {@link Cascader}, keyed for `addEventListener`. */
+export interface CascaderEventMap {
+    'cascader-change': CustomEvent<CascaderChangeEventDetail>;
+    'open-change': CustomEvent<{
+        open: boolean;
+    }>;
+    input: Event;
+    change: Event;
+}
+export interface Cascader {
+    addEventListener: TypedAddEventListener<Cascader, CascaderEventMap>;
+    removeEventListener: TypedRemoveEventListener<Cascader, CascaderEventMap>;
+}
+/**
+ * Hierarchical single-value picker that opens every active level in one floating panel. Supply nested `options`, then
+ * read the selected value path from `value`. Branches open another column; choosing a leaf commits the path.
+ *
+ * @tag c2-cascader
+ *
+ * @slot prefix-icon - Icon shown before the selected path or placeholder.
+ * @slot suffix-icon - Replaces the trigger chevron.
+ * @slot empty - Replaces the message shown when `options` is empty.
+ *
+ * @event {CustomEvent<CascaderChangeEventDetail>} cascader-change - Fired when a leaf, or a branch with `change-on-select`, is committed. Detail contains value, label and option paths plus whether the last option is a leaf.
+ * @event {CustomEvent<{ open: boolean }>} open-change - Fired when the floating panel opens or closes.
+ * @event {Event} input - Fired after `value` changes through user interaction.
+ * @event {Event} change - Fired after `value` changes through user interaction.
+ *
+ * @cssproperty {pixel} [--c2-cascader__trigger--min-height=36px]
+ * @cssproperty {pixel} [--c2-cascader__trigger--width=220px]
+ * @cssproperty {padding} [--c2-cascader__trigger--padding=6px 10px 6px 12px]
+ * @cssproperty {pixel} [--c2-cascader__trigger--gap=8px]
+ * @cssproperty {color} [--c2-cascader__trigger--background=#ffffff]
+ * @cssproperty {color} [--c2-cascader__trigger--color=#18181b]
+ * @cssproperty {font-size} [--c2-cascader__trigger--font-size=14px]
+ * @cssproperty {border} [--c2-cascader__trigger--border=1px solid #bcbcc6]
+ * @cssproperty {border-radius} [--c2-cascader__trigger--border-radius=6px]
+ * @cssproperty {border} [--c2-cascader__trigger__hover--border=1px solid #a1a1aa]
+ * @cssproperty {color} [--c2-cascader__trigger__hover--background=#fafafa]
+ * @cssproperty {border} [--c2-cascader__trigger__open--border=1px solid rgb(2, 101, 220)]
+ * @cssproperty {outline} [--c2-cascader__trigger__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-cascader__trigger__focus--outline-offset=0px]
+ * @cssproperty {opacity} [--c2-cascader__trigger__disabled--opacity=0.38]
+ * @cssproperty {color} [--c2-cascader__placeholder--color=#71717a]
+ * @cssproperty {pixel} [--c2-cascader__icon--size=16px]
+ * @cssproperty {color} [--c2-cascader__icon--color=#71717a]
+ * @cssproperty {color} [--c2-cascader__panel--background=#ffffff]
+ * @cssproperty {border} [--c2-cascader__panel--border=1px solid #e4e4e7]
+ * @cssproperty {border-radius} [--c2-cascader__panel--border-radius=8px]
+ * @cssproperty {box-shadow} [--c2-cascader__panel--box-shadow=0 12px 32px rgba(24, 24, 27, 0.14)]
+ * @cssproperty {pixel} [--c2-cascader__panel--max-width=720px]
+ * @cssproperty {pixel} [--c2-cascader__column--min-width=150px]
+ * @cssproperty {pixel} [--c2-cascader__column--max-width=240px]
+ * @cssproperty {pixel} [--c2-cascader__column--max-height=280px]
+ * @cssproperty {padding} [--c2-cascader__column--padding=4px]
+ * @cssproperty {border} [--c2-cascader__column--border=1px solid #e4e4e7]
+ * @cssproperty {pixel} [--c2-cascader__option--min-height=36px]
+ * @cssproperty {padding} [--c2-cascader__option--padding=8px 10px]
+ * @cssproperty {pixel} [--c2-cascader__option--gap=8px]
+ * @cssproperty {border-radius} [--c2-cascader__option--border-radius=6px]
+ * @cssproperty {color} [--c2-cascader__option--color=#18181b]
+ * @cssproperty {font-size} [--c2-cascader__option--font-size=14px]
+ * @cssproperty {color} [--c2-cascader__option__hover--background=#f4f4f5]
+ * @cssproperty {color} [--c2-cascader__option__active--background=#e8f2ff]
+ * @cssproperty {color} [--c2-cascader__option__active--color=#18181b]
+ * @cssproperty {color} [--c2-cascader__option__selected--color=rgb(2, 101, 220)]
+ * @cssproperty {opacity} [--c2-cascader__option__disabled--opacity=0.38]
+ * @cssproperty {padding} [--c2-cascader__empty--padding=18px]
+ * @cssproperty {color} [--c2-cascader__empty--color=#71717a]
+ *
+ * @internalcomponent c2-overlay
+ */
+export declare class Cascader extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private readonly internals;
+    private defaultValue;
+    private defaultValueCaptured;
+    private customValidityMessage;
+    private disabledByForm;
+    private activePath;
+    /** Nested hierarchy shown in the floating panel. In markup this is a JSON array. */
+    options: CascaderOption[];
+    /** Selected value path. In markup, separate levels with semicolons. */
+    value: string[];
+    /** Name used when the cascader participates in a form. */
+    name: string;
+    /** Text shown before a path is selected. */
+    placeholder: string;
+    /** String placed between selected labels in the trigger. */
+    separator: string;
+    /** Accessible name forwarded to the trigger and option tree. */
+    ariaLabel: string | null;
+    /** Whether the floating panel is open. */
+    open: boolean;
+    /** Disables opening, selection and form submission. */
+    disabled: boolean;
+    /** Displays the selected path without allowing changes. */
+    readonly: boolean;
+    /** Requires a committed path for native form validation. */
+    required: boolean;
+    /** Commit branch values as they are chosen instead of waiting for a leaf. */
+    changeOnSelect: boolean;
+    /** Open child columns on pointer hover instead of click. */
+    expandTrigger: 'click' | 'hover';
+    /** Replaces an option row's content while interaction and hierarchy controls remain owned by the cascader. */
+    itemRenderer: CascaderItemRenderer | undefined;
+    trigger: HTMLButtonElement;
+    panel: Overlay;
+    /** The resolved option path for the current `value`. Invalid trailing values are omitted. */
+    get selectedOptions(): CascaderOption[];
+    /** Human-readable selected path. */
+    get displayValue(): string;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    /** Opens, closes or toggles the floating panel. */
+    toggle(force?: boolean): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private get effectiveDisabled();
+    private resolvePath;
+    private get columns();
+    private handleOverlayToggle;
+    private handleTriggerKeydown;
+    private optionPath;
+    private activateOption;
+    private handleOptionClick;
+    private handleOptionPointerEnter;
+    private commit;
+    private focusOption;
+    private handleOptionKeydown;
+    private syncFormState;
+    private renderChevron;
+    private renderOption;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-cascader': Cascader;
+    }
+}
+//# sourceMappingURL=cascader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../src/cascader.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,39 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/cascader. Import once, anywhere in the program:
+//
+//     import '@c2n/cascader/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Cascader, CascaderEventMap } from '@c2n/cascader'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-cascader': DefineComponent<
+      C2Props<Cascader> & {
+        'aria-label'?: unknown
+        'change-on-select'?: unknown
+        'expand-trigger'?: unknown
+        onOpenChange?: (event: CascaderEventMap['open-change']) => void
+        onCascaderChange?: (event: CascaderEventMap['cascader-change']) => void
+        onInput?: (event: CascaderEventMap['input']) => void
+        onChange?: (event: CascaderEventMap['change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}