@c2n/details 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,27 @@
+# @c2n/details
+
+Collapsible disclosure built on native `<details>` / `<summary>` with Lit.
+
+```bash
+npm install @c2n/details
+```
+
+```html
+<script type="module">
+  import '@c2n/details'
+</script>
+
+<c2-details label="Shipping">Delivered in 3–5 business days.</c2-details>
+
+<!-- exclusive accordion: opening one closes the others -->
+<c2-details name="faq" label="Can I cancel anytime?">Yes.</c2-details>
+<c2-details name="faq" label="Do you offer refunds?">Within 14 days.</c2-details>
+```
+
+- **Native first**: keyboard access, screen-reader semantics and find-in-page auto-expand come from the browser. `expanded` mirrors the native `open` state and the `toggle` event is re-dispatched on the element.
+- **Accordion**: panels that share a `name` (within the same document or shadow root) are exclusive: opening one closes the others.
+- **Slots**: `title` (or the `label` attribute), `header-content` for a second header row that stays visible when collapsed and whose buttons and links do not toggle the panel, `icon` and `expanded-icon` for the chevron, and the default slot for the content.
+- **Options**: `title-not-clickable` makes only the icon toggle; `disabled` dims the header and blocks toggling.
+- **Animation**: open and close slide the content (height plus a fade) with the Web Animations API, so the motion is the same in every browser; `--c2-details--transition-duration: 0ms` turns it off, and `prefers-reduced-motion` is respected.
+
+Theming is done through CSS custom properties: `--c2-details--*` for the frame, `--c2-details__header--*` (plus `__icon`, `__content`, `__hover`, `__open`, `__focus`, `__disabled`) for the summary, and `--c2-details__content--*` for the body. The full list is in `custom-elements.json` and on the docs site.

package/dist/details-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+//#region src/details-context.ts
+var accordionContext = createContext(Symbol("details-accordion"));
+//#endregion
+export { accordionContext };

package/dist/details.js

@@ -0,0 +1,216 @@
+import { accordionContext } from "./details-context.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { consume } from "@lit/context";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+//#region src/details.scss?inline
+var details_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n}\n\n.c2-details {\n  flex: 1;\n  align-self: stretch;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: clip;\n  background: var(--c2-details--background,rgb(255, 255, 255));\n  box-shadow: var(--c2-details--box-shadow);\n  border-top: var(--c2-details--border-top,1px solid rgb(213, 213, 213));\n  border-right: var(--c2-details--border-right,1px solid rgb(213, 213, 213));\n  border-bottom: var(--c2-details--border-bottom,1px solid rgb(213, 213, 213));\n  border-left: var(--c2-details--border-left,1px solid rgb(213, 213, 213));\n  border-top-left-radius: var(--c2-details--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-details--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-details--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-details--border-bottom-right-radius,8px);\n}\n\nsummary {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  padding-top: var(--c2-details__header--padding-top,12px);\n  padding-right: var(--c2-details__header--padding-right,16px);\n  padding-bottom: var(--c2-details__header--padding-bottom,12px);\n  padding-left: var(--c2-details__header--padding-left,16px);\n  background: var(--c2-details__header--background);\n  color: var(--c2-details__header--color);\n  font-weight: var(--c2-details__header--font-weight,500);\n  font-size: var(--c2-details__header--font-size);\n  transition: background var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1), color var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\nsummary::-webkit-details-marker, summary::marker {\n  display: none;\n  content: \"\";\n}\nsummary:hover {\n  background: var(--c2-details__header__hover--background,var(--c2-details__header--background,rgb(248, 248, 248)));\n  color: var(--c2-details__header__hover--color,var(--c2-details__header--color));\n}\nsummary:focus-visible {\n  outline: var(--c2-details__header__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-details__header__focus--outline-offset,-2px);\n}\n\n.c2-details-summary-row {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-details__header--gap,12px);\n  flex-direction: var(--c2-details__header--flex-direction,row);\n}\n\n.c2-details-summary-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.c2-details-icons {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  color: var(--c2-details__header__icon--color,rgb(109, 109, 109));\n}\n.c2-details-icons .default-icon,\n.c2-details-icons ::slotted(*) {\n  display: block;\n  width: var(--c2-details__header__icon--width,20px);\n  height: var(--c2-details__header__icon--height,20px);\n  transition: transform var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-details-icons slot[name=expanded-icon] {\n  display: none;\n}\n\n.c2-details-header-content {\n  margin-top: var(--c2-details__header__content--margin-top,4px);\n  color: var(--c2-details__header__content--color,rgb(109, 109, 109));\n  font-size: var(--c2-details__header__content--font-size,13px);\n  font-weight: var(--c2-details__header__content--font-weight,400);\n  cursor: auto;\n}\n.c2-details-header-content[hidden] {\n  display: none;\n}\n\n.c2-details-content {\n  flex: none;\n  min-height: 0;\n  transition-property: none;\n  transition-duration: var(--c2-details--transition-duration,250ms);\n  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-details-body {\n  padding-top: var(--c2-details__content--padding-top,4px);\n  padding-right: var(--c2-details__content--padding-right,var(--c2-details__header--padding-right,16px));\n  padding-bottom: var(--c2-details__content--padding-bottom,var(--c2-details__header--padding-bottom,12px));\n  padding-left: var(--c2-details__content--padding-left,var(--c2-details__header--padding-left,16px));\n  color: var(--c2-details__content--color);\n  border-top: var(--c2-details__content--border-top);\n}\n\n.c2-details[open] summary {\n  background: var(--c2-details__header__open--background,var(--c2-details__header--background));\n  color: var(--c2-details__header__open--color,var(--c2-details__header--color));\n}\n.c2-details[open] summary:hover {\n  background: var(--c2-details__header__hover--background,var(--c2-details__header__open--background,var(--c2-details__header--background,rgb(248, 248, 248))));\n}\n.c2-details[open] .c2-details-icons .default-icon,\n.c2-details[open] .c2-details-icons slot[name=icon]::slotted(*) {\n  transform: rotate(var(--c2-details__header__icon--rotate,180deg));\n}\n.c2-details[open] .c2-details-icons.has-expanded-icon slot[name=icon] {\n  display: none;\n}\n.c2-details[open] .c2-details-icons.has-expanded-icon slot[name=expanded-icon] {\n  display: contents;\n}\n\n:host([disabled]) summary {\n  cursor: default;\n  opacity: var(--c2-details__header__disabled--opacity,0.38);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  summary,\n  .c2-details-icons .default-icon,\n  .c2-details-icons ::slotted(*) {\n    transition: none;\n  }\n  .c2-details-content {\n    transition-duration: 0s;\n  }\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/details.ts
+var Details = class Details extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.expanded = false;
+		this.label = "";
+		this.name = void 0;
+		this.titleNotClickable = false;
+		this.disabled = false;
+		this.hasHeaderContent = false;
+		this.hasExpandedIcon = false;
+		this.closing = false;
+		this.contentAnimations = [];
+	}
+	static {
+		this.styles = unsafeCSS(details_default);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.accordion = void 0;
+		this.cancelContentAnimations();
+		this.closing = false;
+	}
+	willUpdate(changed) {
+		if (changed.has("expanded") && this.hasUpdated) {
+			if (this.expanded) this.closing = false;
+			else if (changed.get("expanded")) this.closing = true;
+		}
+	}
+	updated(changed) {
+		if (this.isConnected && changed.has("expanded") && changed.get("expanded") !== void 0) {
+			this.animateContent(this.expanded);
+			this.accordion?.expandedChanged(this);
+		}
+	}
+	cancelContentAnimations() {
+		for (const animation of this.contentAnimations) animation.cancel();
+		this.contentAnimations = [];
+		if (this.contentElement) this.contentElement.style.overflow = "";
+	}
+	/**
+	* Slides the content between collapsed and its natural height, fading the body along the way. Duration and easing
+	* come from the `transition-*` values the stylesheet puts on the content element, so `--c2-details--transition-duration`
+	* and `prefers-reduced-motion` both apply. Reversing mid-flight starts from the current rendered height.
+	*/
+	animateContent(open) {
+		const content = this.contentElement;
+		const body = this.bodyElement;
+		if (!content || !body) return;
+		const from = this.contentAnimations.length ? content.getBoundingClientRect().height : open ? 0 : content.scrollHeight;
+		const fromOpacity = this.contentAnimations.length ? parseFloat(getComputedStyle(body).opacity) : open ? 0 : 1;
+		this.cancelContentAnimations();
+		const style = getComputedStyle(content);
+		const duration = parseDuration(firstListEntry(style.transitionDuration));
+		const easing = firstListEntry(style.transitionTimingFunction) || "ease";
+		if (duration <= 0 || typeof content.animate !== "function") {
+			this.closing = false;
+			return;
+		}
+		const to = open ? content.scrollHeight : 0;
+		content.style.overflow = "hidden";
+		const height = content.animate([{ height: `${from}px` }, { height: `${to}px` }], {
+			duration,
+			easing
+		});
+		const fade = body.animate([{ opacity: fromOpacity }, { opacity: open ? 1 : 0 }], {
+			duration,
+			easing
+		});
+		this.contentAnimations = [height, fade];
+		height.finished.then(() => {
+			this.contentAnimations = [];
+			content.style.overflow = "";
+			if (!open) this.closing = false;
+		}).catch(() => {});
+	}
+	/** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
+	firstUpdated() {
+		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSlot(slot);
+	}
+	handleSlotChange(event) {
+		this.updateSlot(event.target);
+	}
+	updateSlot(slot) {
+		const filled = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+		if (slot.name === "header-content") this.hasHeaderContent = filled;
+		else if (slot.name === "expanded-icon") this.hasExpandedIcon = filled;
+	}
+	handleSummaryClick(event) {
+		if (this.disabled) {
+			event.preventDefault();
+			return;
+		}
+		const path = event.composedPath();
+		const inHeaderContent = path.some((el) => el instanceof HTMLElement && el.classList.contains("c2-details-header-content"));
+		const onIcon = path.some((el) => el instanceof HTMLElement && el.classList.contains("c2-details-icons"));
+		event.preventDefault();
+		if (inHeaderContent || this.titleNotClickable && !onIcon) return;
+		this.toggle();
+	}
+	handleSummaryKeydown(event) {
+		if (this.disabled && (event.key === "Enter" || event.key === " ")) event.preventDefault();
+	}
+	handleDetailsToggle(event) {
+		this.expanded = this.detailsElement.open;
+		redispatchEvent(this, event);
+	}
+	/** Opens or closes the panel. */
+	toggle(force) {
+		if (this.disabled) return;
+		this.expanded = force ?? !this.expanded;
+	}
+	renderIcon() {
+		return html`
+      <span class=${classMap({
+			"c2-details-icons": true,
+			"has-expanded-icon": this.hasExpandedIcon
+		})}>
+        <slot name="expanded-icon" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="icon">
+          <svg class="default-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </slot>
+      </span>
+    `;
+	}
+	render() {
+		return html`
+      <details class="c2-details" ?open=${this.expanded || this.closing} @toggle=${this.handleDetailsToggle}>
+        <summary
+          class=${classMap({ "has-header-content": this.hasHeaderContent })}
+          tabindex=${this.disabled ? "-1" : nothing}
+          aria-disabled=${this.disabled ? "true" : nothing}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeydown}
+        >
+          <div class="c2-details-summary-row">
+            <div class="c2-details-summary-content"><slot name="title">${this.label}</slot></div>
+            ${this.renderIcon()}
+          </div>
+          <div class="c2-details-header-content" ?hidden=${!this.hasHeaderContent}>
+            <slot name="header-content" @slotchange=${this.handleSlotChange}></slot>
+          </div>
+        </summary>
+        <div class="c2-details-content">
+          <div class="c2-details-body">
+            <slot></slot>
+          </div>
+        </div>
+      </details>
+    `;
+	}
+};
+__decorate([query("details")], Details.prototype, "detailsElement", void 0);
+__decorate([query(".c2-details-content")], Details.prototype, "contentElement", void 0);
+__decorate([query(".c2-details-body")], Details.prototype, "bodyElement", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Details.prototype, "expanded", void 0);
+__decorate([property()], Details.prototype, "label", void 0);
+__decorate([property()], Details.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "title-not-clickable"
+})], Details.prototype, "titleNotClickable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Details.prototype, "disabled", void 0);
+__decorate([state()], Details.prototype, "hasHeaderContent", void 0);
+__decorate([state()], Details.prototype, "hasExpandedIcon", void 0);
+__decorate([state()], Details.prototype, "closing", void 0);
+__decorate([consume({
+	context: accordionContext,
+	subscribe: true
+})], Details.prototype, "accordion", void 0);
+Details = __decorate([customElement("c2-details")], Details);
+/** First top-level entry of a comma-separated CSS list; commas inside `cubic-bezier(...)` are kept. */
+function firstListEntry(value) {
+	let depth = 0;
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		if (char === "(") depth++;
+		else if (char === ")") depth--;
+		else if (char === "," && depth === 0) return value.slice(0, i).trim();
+	}
+	return value.trim();
+}
+/** Parses a computed `transition-duration` value (`0.25s`, `250ms`) into milliseconds. */
+function parseDuration(value) {
+	const amount = parseFloat(value);
+	if (Number.isNaN(amount)) return 0;
+	return value.endsWith("ms") ? amount : amount * 1e3;
+}
+//#endregion
+export { Details };

package/package.json

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

package/types/src/details-context.d.ts

@@ -0,0 +1,8 @@
+import type { Details } from './details';
+export interface AccordionContext {
+    expandedChanged(panel: Details): void;
+}
+export declare const accordionContext: {
+    __context__: AccordionContext;
+};
+//# sourceMappingURL=details-context.d.ts.map

package/types/src/details-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"details-context.d.ts","sourceRoot":"","sources":["../../src/details-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAExC,MAAM,WAAW,gBAAgB;IAC/B,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;CACtC;AAED,eAAO,MAAM,gBAAgB;;CAA+D,CAAA"}

package/types/src/details.d.ts

@@ -0,0 +1,121 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * Collapsible disclosure built on native `<details>` / `<summary>`, so keyboard access, screen-reader semantics and
+ * find-in-page auto-expand come from the browser. Panels that share a `name` form an exclusive accordion. Open and
+ * close animate the content height (plus a fade) with the Web Animations API, so the motion is identical in every
+ * browser; the native `open` attribute is only removed once the close animation has finished.
+ *
+ * @tag c2-details
+ *
+ * @slot title - Header label. Falls back to the `label` attribute.
+ * @slot header-content - Second header row under the title (description, badges, actions). Stays visible when
+ *   collapsed; clicks inside it do not toggle the panel, so buttons and links work there.
+ * @slot icon - Chevron shown in the header; rotates when open. Defaults to an inline SVG.
+ * @slot expanded-icon - Alternative icon shown only while open (replaces the rotation).
+ * @slot - Collapsible content.
+ *
+ * @event {ToggleEvent} toggle - Re-dispatched from the native details after it opens or closes (`newState` is `open` or `closed`).
+ *
+ * @cssproperty {border} [--c2-details--border-top=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-details--border-right=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-details--border-bottom=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-details--border-left=1px solid rgb(213, 213, 213)]
+ *
+ * @cssproperty {border-radius} [--c2-details--border-top-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-details--border-top-right-radius=8px]
+ * @cssproperty {border-radius} [--c2-details--border-bottom-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-details--border-bottom-right-radius=8px]
+ *
+ * @cssproperty {background} [--c2-details--background=rgb(255, 255, 255)]
+ * @cssproperty {box-shadow} --c2-details--box-shadow
+ * @cssproperty {time} [--c2-details--transition-duration=250ms] - Open and close animation length; `0ms` disables it. Respects `prefers-reduced-motion`.
+ *
+ * @cssproperty {padding} [--c2-details__header--padding-top=12px]
+ * @cssproperty {padding} [--c2-details__header--padding-right=16px]
+ * @cssproperty {padding} [--c2-details__header--padding-bottom=12px]
+ * @cssproperty {padding} [--c2-details__header--padding-left=16px]
+ *
+ * @cssproperty {background} --c2-details__header--background
+ * @cssproperty {color} --c2-details__header--color
+ * @cssproperty {font-weight} [--c2-details__header--font-weight=500]
+ * @cssproperty {font-size} --c2-details__header--font-size
+ * @cssproperty {pixel} [--c2-details__header--gap=12px]
+ * @cssproperty {flex-direction-row} [--c2-details__header--flex-direction=row] - `row-reverse` puts the icon first.
+ *
+ * @cssproperty {pixel} [--c2-details__header__icon--width=20px]
+ * @cssproperty {pixel} [--c2-details__header__icon--height=20px]
+ * @cssproperty {pixel} [--c2-details__header__icon--rotate=180deg]
+ * @cssproperty {color} [--c2-details__header__icon--color=rgb(109, 109, 109)]
+ *
+ * @cssproperty {pixel} [--c2-details__header__content--margin-top=4px]
+ * @cssproperty {color} [--c2-details__header__content--color=rgb(109, 109, 109)]
+ * @cssproperty {font-size} [--c2-details__header__content--font-size=13px]
+ * @cssproperty {font-weight} [--c2-details__header__content--font-weight=400]
+ *
+ * @cssproperty {background} [--c2-details__header__hover--background=rgb(248, 248, 248)]
+ * @cssproperty {color} --c2-details__header__hover--color
+ * @cssproperty {background} --c2-details__header__open--background
+ * @cssproperty {color} --c2-details__header__open--color
+ * @cssproperty {outline} [--c2-details__header__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-details__header__focus--outline-offset=-2px]
+ * @cssproperty {opacity} [--c2-details__header__disabled--opacity=0.38]
+ *
+ * @cssproperty {padding} [--c2-details__content--padding-top=4px]
+ * @cssproperty {padding} --c2-details__content--padding-right - Falls back to the header padding.
+ * @cssproperty {padding} --c2-details__content--padding-bottom - Falls back to the header padding.
+ * @cssproperty {padding} --c2-details__content--padding-left - Falls back to the header padding.
+ * @cssproperty {color} --c2-details__content--color
+ * @cssproperty {border} --c2-details__content--border-top - Divider between header and content.
+ */
+export declare class Details extends LitElement {
+    static styles: import("lit").CSSResult;
+    protected detailsElement: HTMLDetailsElement;
+    private contentElement;
+    private bodyElement;
+    /** Open state, kept in sync with the native `open` attribute. */
+    expanded: boolean;
+    /** Header text when the `title` slot is empty. */
+    label: string;
+    /**
+     * Accordion group: opening a panel closes every other `c2-details` with the same name in the same document or shadow
+     * root. (The native `name` attribute cannot be used: each panel's `<details>` sits in its own shadow tree.)
+     */
+    name: string | undefined;
+    /** Only the icon toggles the panel; clicking the title does nothing. */
+    titleNotClickable: boolean;
+    /** Dims the header and blocks toggling (pointer and keyboard). */
+    disabled: boolean;
+    private hasHeaderContent;
+    private hasExpandedIcon;
+    /** Keeps the native `open` attribute while the close animation plays; the content is hidden by the browser otherwise. */
+    private closing;
+    private contentAnimations;
+    private accordion;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    private cancelContentAnimations;
+    /**
+     * Slides the content between collapsed and its natural height, fading the body along the way. Duration and easing
+     * come from the `transition-*` values the stylesheet puts on the content element, so `--c2-details--transition-duration`
+     * and `prefers-reduced-motion` both apply. Reversing mid-flight starts from the current rendered height.
+     */
+    private animateContent;
+    /** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
+    firstUpdated(): void;
+    private handleSlotChange;
+    private updateSlot;
+    private handleSummaryClick;
+    private handleSummaryKeydown;
+    private handleDetailsToggle;
+    /** Opens or closes the panel. */
+    toggle(force?: boolean): void;
+    protected renderIcon(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-details': Details;
+    }
+}
+//# sourceMappingURL=details.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../../src/details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAExB,SAAS,CAAC,cAAc,EAAG,kBAAkB,CAAA;IACjC,OAAO,CAAC,cAAc,CAAc;IACvC,OAAO,CAAC,WAAW,CAAc;IAE5D,iEAAiE;IACrB,QAAQ,UAAQ;IAE5D,kDAAkD;IACtC,KAAK,SAAK;IAEtB;;;OAGG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,wEAAwE;IACM,iBAAiB,UAAQ;IAEvG,kEAAkE;IACtB,QAAQ,UAAQ;IAEnD,OAAO,CAAC,gBAAgB,CAAQ;IAChC,OAAO,CAAC,eAAe,CAAQ;IACxC,yHAAyH;IAChH,OAAO,CAAC,OAAO,CAAQ;IAEhC,OAAO,CAAC,iBAAiB,CAAkB;IAG3C,OAAO,CAAC,SAAS,CAA8B;IAEtC,oBAAoB;IAOpB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAO9C,OAAO,CAAC,uBAAuB;IAM/B;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAmCtB,sGAAsG;IAC7F,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,mBAAmB;IAK3B,iCAAiC;IACjC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO;IAKtB,SAAS,CAAC,UAAU;IAaX,MAAM;CA0BhB;AAqBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}