@c2n/accordion 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,56 @@
+# Accordion
+
+`c2-accordion` combines directly slotted `c2-details` panels into a connected, animated disclosure surface. It owns their shared borders, dividers and outside corners, and coordinates expansion through Lit context. Opening one closes its siblings; add `multiple` to allow independent expansion. All panels may be closed.
+
+```sh
+npm install @c2n/accordion
+```
+
+```js
+import '@c2n/accordion'
+```
+
+The import also registers `c2-details`.
+
+```html
+<c2-accordion>
+  <c2-details label="Shipping" expanded>Delivered in 3–5 business days.</c2-details>
+  <c2-details label="Returns">Return within 30 days.</c2-details>
+  <c2-details label="Unavailable" disabled>Coming soon.</c2-details>
+</c2-accordion>
+
+<c2-accordion multiple>
+  <c2-details label="Sizing" expanded>Choose your usual size.</c2-details>
+  <c2-details label="Care" expanded>Wash cold.</c2-details>
+</c2-accordion>
+```
+
+## API
+
+- `multiple`: reflected Boolean property/attribute, default `false`.
+- Default slot: direct `c2-details` children. Wrapped descendants are not coordinated; nested accordions remain independent.
+- `--c2-accordion--gap`: panel spacing, default `0px`. Zero joins the panels with single dividers and only outside corners rounded. A positive gap restores individual rounded cards.
+- `--c2-accordion--border-width`: outer borders and dividers, default `1px`.
+- `--c2-accordion--border-color`: outer borders and dividers, default `#d5d5d5`.
+- `--c2-accordion--border-radius`: outside corners, default `8px`.
+- `--c2-accordion--transition-duration`: expansion and chevron timing, default `300ms`; use `0ms` for instant toggling. Reduced-motion preferences disable transitions.
+
+The accordion controls panel frames and animation timing. Use inherited `--c2-details-*` properties for header/content colors, padding and typography. Panel height is animated by `c2-details` itself (slide plus fade), so it behaves the same in every browser.
+
+Control individual panels with `expanded` or `toggle(force?)`. Listen for `toggle` directly on each panel; it does not bubble. There is no aggregate accordion event. Disabled panels block user toggling but may still be closed when a sibling opens.
+
+When multiple panels start expanded, or `multiple` is removed, the first expanded panel in DOM order stays open. Child insertion and reconnection use the same rule. Subsequent openings take precedence. Grouping belongs to the container and does not require panel `name` values.
+
+Panels retain native Tab, Enter/Space, focus, and disclosure semantics, their title/header/icon slots, and reduced-motion support.
+
+```html
+<c2-accordion>
+  <c2-details label="Products" expanded>
+    <c2-accordion>
+      <c2-details label="Clothing">Shirts and jackets.</c2-details>
+      <c2-details label="Accessories">Bags and hats.</c2-details>
+    </c2-accordion>
+  </c2-details>
+  <c2-details label="Support">Contact our team.</c2-details>
+</c2-accordion>
+```

package/dist/accordion.js

@@ -0,0 +1,62 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@c2n/details";
+import { provide } from "@lit/context";
+import { accordionContext } from "@c2n/details/details-context.js";
+//#region src/accordion.scss?inline
+var accordion_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  min-width: 0;\n}\n\n.c2-accordion {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-width: 0;\n  gap: var(--c2-accordion--gap,0px);\n}\n\n::slotted(c2-details) {\n  --c2-details--border-top: min(var(--c2-accordion--border-width,1px), calc(var(--c2-accordion--gap,0px) * 10000)) solid var(--c2-accordion--border-color,#d5d5d5);\n  --c2-details--border-right: var(--c2-accordion--border-width,1px) solid var(--c2-accordion--border-color,#d5d5d5);\n  --c2-details--border-bottom: var(--c2-accordion--border-width,1px) solid var(--c2-accordion--border-color,#d5d5d5);\n  --c2-details--border-left: var(--c2-accordion--border-width,1px) solid var(--c2-accordion--border-color,#d5d5d5);\n  --c2-details--border-top-left-radius: min(var(--c2-accordion--border-radius,8px), calc(var(--c2-accordion--gap,0px) * 10000));\n  --c2-details--border-top-right-radius: min(var(--c2-accordion--border-radius,8px), calc(var(--c2-accordion--gap,0px) * 10000));\n  --c2-details--border-bottom-left-radius: min(var(--c2-accordion--border-radius,8px), calc(var(--c2-accordion--gap,0px) * 10000));\n  --c2-details--border-bottom-right-radius: min(var(--c2-accordion--border-radius,8px), calc(var(--c2-accordion--gap,0px) * 10000));\n  --c2-details--transition-duration: var(--c2-accordion--transition-duration,300ms);\n}\n\n::slotted(c2-details:first-of-type) {\n  --c2-details--border-top: var(--c2-accordion--border-width,1px) solid var(--c2-accordion--border-color,#d5d5d5);\n  --c2-details--border-top-left-radius: var(--c2-accordion--border-radius,8px);\n  --c2-details--border-top-right-radius: var(--c2-accordion--border-radius,8px);\n}\n\n::slotted(c2-details:last-of-type) {\n  --c2-details--border-bottom-left-radius: var(--c2-accordion--border-radius,8px);\n  --c2-details--border-bottom-right-radius: var(--c2-accordion--border-radius,8px);\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/accordion.ts
+var Accordion = class Accordion extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.multiple = false;
+		this.accordion = { expandedChanged: (panel) => {
+			if (this.isConnected && this.panels.includes(panel) && panel.expanded) this.closeOthers(panel);
+		} };
+	}
+	static {
+		this.styles = unsafeCSS(accordion_default);
+	}
+	get panels() {
+		return (this.renderRoot.querySelector("slot")?.assignedElements() ?? []).filter((element) => element.localName === "c2-details");
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasUpdated) this.syncPanels();
+	}
+	updated(changed) {
+		if (changed.has("multiple")) this.syncPanels();
+	}
+	syncPanels() {
+		if (!this.isConnected) return;
+		this.closeOthers(this.panels.find((panel) => panel.expanded));
+	}
+	closeOthers(expandedPanel) {
+		if (this.multiple) return;
+		for (const panel of this.panels) if (panel !== expandedPanel && panel.expanded) panel.expanded = false;
+	}
+	render() {
+		return html`
+      <div class="c2-accordion">
+        <slot @slotchange=${this.syncPanels}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Accordion.prototype, "multiple", void 0);
+__decorate([provide({ context: accordionContext })], Accordion.prototype, "accordion", void 0);
+Accordion = __decorate([customElement("c2-accordion")], Accordion);
+//#endregion
+export { Accordion };

package/package.json

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

package/types/src/accordion.d.ts

@@ -0,0 +1,35 @@
+import { LitElement, type PropertyValues } from 'lit';
+import '@c2n/details';
+import { type AccordionContext } from '@c2n/details/details-context.js';
+/**
+ * A connected disclosure surface with shared borders, outside corners and animated panels.
+ * Opening a panel closes its siblings unless `multiple` is set.
+ *
+ * @tag c2-accordion
+ *
+ * @slot - Direct `c2-details` children to coordinate.
+ * @cssproperty {pixel} [--c2-accordion--gap=0px] - Space between panels. Zero joins their borders and corners; a positive gap separates them into cards.
+ * @cssproperty {pixel} [--c2-accordion--border-width=1px] - Width of the outer frame and shared panel dividers.
+ * @cssproperty {color} [--c2-accordion--border-color=#d5d5d5] - Color of the outer frame and shared panel dividers.
+ * @cssproperty {border-radius} [--c2-accordion--border-radius=8px] - Outside corner radius. With a positive gap, applies to every panel.
+ * @cssproperty {time} [--c2-accordion--transition-duration=300ms] - Panel and chevron animation duration. Set to 0ms for instant toggling; respects reduced motion.
+ * @slotcomponent c2-details
+ */
+export declare class Accordion extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Allows several panels to remain expanded. All panels may be closed in either mode. */
+    multiple: boolean;
+    protected accordion: AccordionContext;
+    private get panels();
+    connectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    private syncPanels;
+    private closeOthers;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-accordion': Accordion;
+    }
+}
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,cAAc,CAAA;AAGrB,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAGzF;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAoB;IAE1C,yFAAyF;IAC7C,QAAQ,UAAQ;IAG5D,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAIpC;IAED,OAAO,KAAK,MAAM,GAEjB;IAEQ,iBAAiB;IAKjB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAI9C,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAOV,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAA;KAC1B;CACF"}