accordionary 1.0.0 → 1.0.2

package/README.md

@@ -11,6 +11,7 @@ A lightweight, accessible, vanilla JavaScript accordion with zero dependencies.
 - Respects `prefers-reduced-motion`
 - Configurable via HTML attributes
 - Programmatic API for full control
+- Generate accordions from JSON data (package manager only)
 - TypeScript support
 - ~4KB minified
 
@@ -27,7 +28,7 @@ Download `dist/accordionary.js` and include it in your HTML:
 Or link directly from GitHub (replace `v1.0.0` with the desired version):
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/briantucker/accordionary@v1.0.0/dist/accordionary.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/accordionary@1.0.0/dist/accordionary.js"></script>
 ```
 
 This version auto-initializes all accordions on page load.
@@ -127,6 +128,7 @@ All configuration is done via HTML attributes. No JavaScript required.
 | `accordionary-multiple` | `true`, `false`        | `true`  | Allow multiple items open at once  |
 | `accordionary-speed`    | number (ms)            | `300`   | Animation duration in milliseconds |
 | `accordionary-easing`   | CSS easing             | `ease`  | Animation easing function          |
+| `accordionary-link`     | `true`, `false`        | `false` | Link all items: open/close together |
 
 ### Item-Level Attributes
 
@@ -165,6 +167,16 @@ All configuration is done via HTML attributes. No JavaScript required.
 </div>
 ```
 
+### Linked Items (Open/Close Together)
+
+```html
+<div accordionary="component" accordionary-link="true">
+  <!-- Clicking any item open opens all; clicking any item closed closes all -->
+</div>
+```
+
+Disabled items are excluded from linking — they remain in their current state.
+
 ### Force Specific Item Open
 
 ```html
@@ -259,6 +271,162 @@ const accordion: AccordionController | null =
   Accordionary.init("#my-accordion");
 ```
 
+## Generating Accordions from JSON
+
+When installed via package manager, you can generate accordion HTML from structured JSON data using the `generateAccordionary` function.
+
+### Basic Usage
+
+```typescript
+import { generateAccordionary } from "accordionary";
+
+const data = {
+  items: [
+    {
+      heading: "Question 1",
+      content: "Answer 1",
+    },
+    {
+      heading: "Question 2",
+      content: "Answer 2",
+    },
+  ],
+};
+
+// Generate the accordion element
+const element = generateAccordionary(data);
+
+// Append to DOM
+document.body.appendChild(element);
+
+// Initialize it
+const accordion = Accordionary.init(element);
+```
+
+### Configuration Options
+
+```typescript
+const element = generateAccordionary(data, {
+  icon: "▼", // HTML string for icon (default: "▼")
+  openDefault: "none", // "all" | "first" | "none" (default: "none")
+  allowMultiple: true, // Allow multiple items open (default: true)
+  speed: 300, // Animation duration in ms (default: 300)
+  easing: "ease", // CSS easing function (default: "ease")
+  linked: false, // Link all items open/close together (default: false)
+  classes: {
+    component: ["my-accordion"], // Custom classes for component
+    item: ["my-item"], // Custom classes for items
+    heading: ["my-heading"], // Custom classes for headings
+    content: ["my-content"], // Custom classes for content
+    icon: ["my-icon"], // Custom classes for icons
+  },
+});
+```
+
+### Custom Icon
+
+You can provide any HTML string for the icon - emoji, SVG, or image tag:
+
+```typescript
+// Emoji
+const element = generateAccordionary(data, {
+  icon: "👇",
+});
+
+// SVG
+const element = generateAccordionary(data, {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z"/>
+  </svg>`,
+});
+
+// Image
+const element = generateAccordionary(data, {
+  icon: '<img src="/chevron.svg" alt="">',
+});
+```
+
+### Item-Level Configuration
+
+Individual items can have their own configuration:
+
+```typescript
+const data = {
+  items: [
+    {
+      heading: "Normal Item",
+      content: "This item follows component defaults",
+    },
+    {
+      heading: "Force Open Item",
+      content: "This item starts open regardless of component settings",
+      config: {
+        openOverride: true,
+      },
+    },
+    {
+      heading: "Disabled Item",
+      content: "This item cannot be toggled and is always visible",
+      config: {
+        disabled: true,
+      },
+    },
+  ],
+};
+```
+
+### HTML in Content
+
+Both `heading` and `content` accept HTML strings:
+
+```typescript
+const data = {
+  items: [
+    {
+      heading: '<div class="font-bold">Rich <em>Heading</em></div>',
+      content: `
+        <img src="/image.jpg" alt="Description">
+        <p>Paragraph with <strong>bold text</strong></p>
+        <ul>
+          <li>List item 1</li>
+          <li>List item 2</li>
+        </ul>
+      `,
+    },
+  ],
+};
+```
+
+### TypeScript Support
+
+Full type definitions are included:
+
+```typescript
+import {
+  generateAccordionary,
+  type AccordionData,
+  type GeneratorConfig,
+} from "accordionary";
+
+const data: AccordionData = {
+  items: [
+    {
+      heading: "Question",
+      content: "Answer",
+    },
+  ],
+};
+
+const config: GeneratorConfig = {
+  openDefault: "first",
+  classes: {
+    component: ["custom-accordion"],
+  },
+};
+
+const element = generateAccordionary(data, config);
+```
+
 ## Accessibility
 
 Accordionary is built with accessibility in mind:

package/dist/accordionary.cjs.js

@@ -1 +1 @@
-var{defineProperty:F,getOwnPropertyNames:I,getOwnPropertyDescriptor:O}=Object,f=Object.prototype.hasOwnProperty;var S=new WeakMap,u=(j)=>{var k=S.get(j),J;if(k)return k;if(k=F({},"__esModule",{value:!0}),j&&typeof j==="object"||typeof j==="function")I(j).map((K)=>!f.call(k,K)&&F(k,K,{get:()=>j[K],enumerable:!(J=O(j,K))||J.enumerable}));return S.set(j,k),k};var A=(j,k)=>{for(var J in k)F(j,J,{get:k[J],enumerable:!0,configurable:!0,set:(K)=>k[J]=()=>K})};var d={};A(d,{initAll:()=>C,init:()=>v,default:()=>g});module.exports=u(d);var h=0;function w(j,k,J,K){let{headingElement:P,contentElement:G,iconElement:W,config:H}=j,_=`accordionary-${h++}`,z=`${_}-header`,q=`${_}-content`,U=!1;if(H.openOverride!==null)U=H.openOverride;else if(k.openDefault==="all")U=!0;else if(k.openDefault==="first"&&J)U=!0;let Q=U,{speed:$,easing:V,reduceMotion:B}=k,R=B?"none":`height ${$}ms ${V}`,x=B?"none":`transform ${$}ms ${V}`;if(G.style.overflow="hidden",G.style.transition=R,G.style.height=Q?"auto":"0px",W.style.transition=x,H.disabled)W.style.visibility="hidden";else if(Q)W.style.transform="rotate(180deg)";if(P.id=z,P.setAttribute("tabindex",H.disabled?"-1":"0"),P.setAttribute("role","button"),P.setAttribute("aria-expanded",Q?"true":"false"),P.setAttribute("aria-controls",q),P.style.cursor=H.disabled?"default":"pointer",H.disabled)P.setAttribute("aria-disabled","true");G.id=q,G.setAttribute("role","region"),G.setAttribute("aria-labelledby",z);function T(){if(Q)return;Q=!0,G.style.height=`${G.scrollHeight}px`,W.style.transform="rotate(180deg)",P.setAttribute("aria-expanded","true")}function y(){if(!Q)return;Q=!1,G.style.height=`${G.scrollHeight}px`,G.offsetHeight,G.style.height="0px",W.style.transform="rotate(0deg)",P.setAttribute("aria-expanded","false")}function b(){if(H.disabled)return;if(Q)y();else{if(!k.allowMultiple){for(let X of K)if(X!==j&&X.close)X.close()}T()}}j.open=T,j.close=y,j.toggle=b,P.addEventListener("click",b),P.addEventListener("keydown",(X)=>{if(X.key==="Enter"||X.key===" ")X.preventDefault(),b()}),G.addEventListener("transitionend",()=>{if(Q)G.style.height="auto"})}function Z(j,k){console.warn(`[Accordionary] ${j}`,k||"")}function L(j,k){console.error(`[Accordionary] ${j}`,k||"")}function Y(j,k){return j.getAttribute(`accordionary-${k}`)}function N(j,k=document){return k.querySelector(`[accordionary="${j}"]`)}function D(j,k=document){return k.querySelectorAll(`[accordionary="${j}"]`)}var E=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function M(j){if(j.hasAttribute("data-accordionary-initialized"))return null;j.setAttribute("data-accordionary-initialized","true");let k=Y(j,"open"),J=Y(j,"multiple"),K=Y(j,"speed"),P=Y(j,"easing");if(k&&!["all","first","none"].includes(k))Z(`Invalid accordionary-open="${k}". Expected "all", "first", or "none". Defaulting to "none".`,j);if(J&&!["true","false"].includes(J))Z(`Invalid accordionary-multiple="${J}". Expected "true" or "false". Defaulting to "true".`,j);let G=K?parseInt(K,10):300;if(K&&(isNaN(G)||G<0))Z(`Invalid accordionary-speed="${K}". Expected a positive number in milliseconds. Defaulting to 300.`,j);let W={openDefault:k==="all"||k==="first"?k:"none",allowMultiple:J!=="false",speed:isNaN(G)||G<0?300:G,easing:P||"ease",reduceMotion:E},H=[],_=D("item",j);if(_.length===0)return Z('No items found. Add elements with accordionary="item" inside your component.',j),null;for(let q of _){let U=N("header",q),Q=N("content",q),$=N("icon",q);if(!U){L('Missing header element. Add accordionary="header" inside this item.',q);continue}if(!Q){L('Missing content element. Add accordionary="content" inside this item.',q);continue}if(!$){L('Missing icon element. Add accordionary="icon" inside your header.',q);continue}let V=Y(q,"open"),B=Y(q,"disable");if(V&&!["true","false"].includes(V))Z(`Invalid accordionary-open="${V}" on item. Expected "true" or "false".`,q);let R={openOverride:V==="true"?!0:V==="false"?!1:null,disabled:B==="true"};H.push({element:q,headingElement:U,contentElement:Q,iconElement:$,config:R})}H.forEach((q,U)=>{w(q,W,U===0,H)});let z=H.map((q)=>({element:q.element,open:()=>q.open?.(),close:()=>q.close?.(),toggle:()=>q.toggle?.()}));return{element:j,openAll:()=>{for(let q of H)q.open?.()},closeAll:()=>{for(let q of H)q.close?.()},open:(q)=>{H[q]?.open?.()},close:(q)=>{H[q]?.close?.()},toggle:(q)=>{H[q]?.toggle?.()},items:z}}function v(j){let k=typeof j==="string"?document.querySelector(j):j;if(!k)return console.error(`[Accordionary] Element not found: ${j}`),null;return M(k)}function C(){let j=D("component"),k=[];for(let J of j){let K=M(J);if(K)k.push(K)}return k}var g={init:v,initAll:C};
+var{defineProperty:k,getOwnPropertyNames:I,getOwnPropertyDescriptor:u}=Object,f=Object.prototype.hasOwnProperty;var w=new WeakMap,A=(j)=>{var q=w.get(j),J;if(q)return q;if(q=k({},"__esModule",{value:!0}),j&&typeof j==="object"||typeof j==="function")I(j).map((K)=>!f.call(q,K)&&k(q,K,{get:()=>j[K],enumerable:!(J=u(j,K))||J.enumerable}));return w.set(j,q),q};var h=(j,q)=>{for(var J in q)k(j,J,{get:q[J],enumerable:!0,configurable:!0,set:(K)=>q[J]=()=>K})};var r={};h(r,{initAll:()=>O,init:()=>C,generateAccordionary:()=>D,default:()=>p});module.exports=A(r);var E=0;function x(j,q,J,K){let{headingElement:V,contentElement:H,iconElement:P,config:W}=j,Q=`accordionary-${E++}`,U=`${Q}-header`,z=`${Q}-content`,G=!1;if(W.openOverride!==null)G=W.openOverride;else if(q.openDefault==="all")G=!0;else if(q.openDefault==="first"&&J)G=!0;let X=G,{speed:B,easing:L,reduceMotion:Z}=q,T=Z?"none":`height ${B}ms ${L}`,b=Z?"none":`transform ${B}ms ${L}`;if(H.style.overflow="hidden",H.style.transition=T,H.style.height=X?"auto":"0px",!X)H.inert=!0;if(P.style.transition=b,W.disabled)P.style.visibility="hidden";else if(X)P.style.transform="rotate(180deg)";if(V.id=U,V.setAttribute("tabindex",W.disabled?"-1":"0"),V.setAttribute("role","button"),V.setAttribute("aria-expanded",X?"true":"false"),V.setAttribute("aria-controls",z),V.style.cursor=W.disabled?"default":"pointer",W.disabled)V.setAttribute("aria-disabled","true");H.id=z,H.setAttribute("role","region"),H.setAttribute("aria-labelledby",U);function y(){if(X)return;X=!0,H.inert=!1,H.style.height=`${H.scrollHeight}px`,P.style.transform="rotate(180deg)",V.setAttribute("aria-expanded","true")}function v(){if(!X)return;X=!1,H.inert=!0,H.style.height=`${H.scrollHeight}px`,H.offsetHeight,H.style.height="0px",P.style.transform="rotate(0deg)",V.setAttribute("aria-expanded","false")}function M(){if(W.disabled)return;if(q.linked){if(X){for(let Y of K)if(!Y.config.disabled)Y.close?.()}else for(let Y of K)if(!Y.config.disabled)Y.open?.()}else if(X)v();else{if(!q.allowMultiple){for(let Y of K)if(Y!==j&&Y.close)Y.close()}y()}}j.open=y,j.close=v,j.toggle=M,V.addEventListener("click",M),V.addEventListener("keydown",(Y)=>{if(Y.key==="Enter"||Y.key===" ")Y.preventDefault(),M()}),H.addEventListener("transitionend",()=>{if(X)H.style.height="auto"})}function $(j,q){console.warn(`[Accordionary] ${j}`,q||"")}function N(j,q){console.error(`[Accordionary] ${j}`,q||"")}function _(j,q){return j.getAttribute(`accordionary-${q}`)}function R(j,q=document){return q.querySelector(`[accordionary="${j}"]`)}function F(j,q=document){return q.querySelectorAll(`[accordionary="${j}"]`)}var g=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function S(j){if(j.hasAttribute("data-accordionary-initialized"))return null;j.setAttribute("data-accordionary-initialized","true");let q=_(j,"open"),J=_(j,"multiple"),K=_(j,"speed"),V=_(j,"easing"),H=_(j,"link");if(q&&!["all","first","none"].includes(q))$(`Invalid accordionary-open="${q}". Expected "all", "first", or "none". Defaulting to "none".`,j);if(J&&!["true","false"].includes(J))$(`Invalid accordionary-multiple="${J}". Expected "true" or "false". Defaulting to "true".`,j);if(H&&!["true","false"].includes(H))$(`Invalid accordionary-link="${H}". Expected "true" or "false". Defaulting to "false".`,j);let P=K?parseInt(K,10):300;if(K&&(isNaN(P)||P<0))$(`Invalid accordionary-speed="${K}". Expected a positive number in milliseconds. Defaulting to 300.`,j);let W={openDefault:q==="all"||q==="first"?q:"none",allowMultiple:J!=="false",speed:isNaN(P)||P<0?300:P,easing:V||"ease",reduceMotion:g,linked:H==="true"},Q=[],U=F("item",j);if(U.length===0)return $('No items found. Add elements with accordionary="item" inside your component.',j),null;for(let G of U){let X=R("header",G),B=R("content",G),L=R("icon",G);if(!X){N('Missing header element. Add accordionary="header" inside this item.',G);continue}if(!B){N('Missing content element. Add accordionary="content" inside this item.',G);continue}if(!L){N('Missing icon element. Add accordionary="icon" inside your header.',G);continue}let Z=_(G,"open"),T=_(G,"disable");if(Z&&!["true","false"].includes(Z))$(`Invalid accordionary-open="${Z}" on item. Expected "true" or "false".`,G);let b={openOverride:Z==="true"?!0:Z==="false"?!1:null,disabled:T==="true"};Q.push({element:G,headingElement:X,contentElement:B,iconElement:L,config:b})}Q.forEach((G,X)=>{x(G,W,X===0,Q)});let z=Q.map((G)=>({element:G.element,open:()=>G.open?.(),close:()=>G.close?.(),toggle:()=>G.toggle?.()}));return{element:j,openAll:()=>{for(let G of Q)G.open?.()},closeAll:()=>{for(let G of Q)G.close?.()},open:(G)=>{Q[G]?.open?.()},close:(G)=>{Q[G]?.close?.()},toggle:(G)=>{Q[G]?.toggle?.()},items:z}}function D(j,q={}){let{icon:J="▼",openDefault:K="none",allowMultiple:V=!0,speed:H=300,easing:P="ease",linked:W=!1,classes:Q={}}=q,U=document.createElement("div");if(U.setAttribute("accordionary","component"),K!=="none")U.setAttribute("accordionary-open",K);if(!V)U.setAttribute("accordionary-multiple","false");if(H!==300)U.setAttribute("accordionary-speed",H.toString());if(P!=="ease")U.setAttribute("accordionary-easing",P);if(W)U.setAttribute("accordionary-link","true");if(Q.component)U.classList.add(...Q.component);for(let z of j.items){let G=d(z,J,Q);U.appendChild(G)}return U}function d(j,q,J){let{heading:K,content:V,config:H={}}=j,P=document.createElement("div");if(P.setAttribute("accordionary","item"),H.openOverride!==void 0)P.setAttribute("accordionary-open",H.openOverride.toString());if(H.disabled)P.setAttribute("accordionary-disable","true");if(J.item)P.classList.add(...J.item);let W=document.createElement("div");if(W.setAttribute("accordionary","header"),W.innerHTML=K,J.heading)W.classList.add(...J.heading);let Q=document.createElement("span");if(Q.setAttribute("accordionary","icon"),Q.innerHTML=q,J.icon)Q.classList.add(...J.icon);W.appendChild(Q);let U=document.createElement("div");if(U.setAttribute("accordionary","content"),U.innerHTML=V,J.content)U.classList.add(...J.content);return P.appendChild(W),P.appendChild(U),P}function C(j){let q=typeof j==="string"?document.querySelector(j):j;if(!q)return console.error(`[Accordionary] Element not found: ${j}`),null;return S(q)}function O(){let j=F("component"),q=[];for(let J of j){let K=S(J);if(K)q.push(K)}return q}var p={init:C,initAll:O,generateAccordionary:D};

package/dist/accordionary.d.ts

@@ -4,8 +4,9 @@
  * Exports the API for programmatic control of accordions.
  * Use this when installing via NPM for manual initialization.
  */
-import type { AccordionController, ItemController } from "./types";
-export type { AccordionController, ItemController };
+import { generateAccordionary } from "./generate-accordion";
+import type { AccordionController, ItemController, AccordionData, AccordionItemData, AccordionItemConfig, GeneratorConfig, GeneratorClasses } from "./types";
+export type { AccordionController, ItemController, AccordionData, AccordionItemData, AccordionItemConfig, GeneratorConfig, GeneratorClasses, };
 /**
  * Initialize a single accordion component.
  *
@@ -28,8 +29,10 @@ export declare function init(element: HTMLElement | string): AccordionController
  * accordions[0].openAll();
  */
 export declare function initAll(): AccordionController[];
+export { generateAccordionary };
 declare const _default: {
     init: typeof init;
     initAll: typeof initAll;
+    generateAccordionary: typeof generateAccordionary;
 };
 export default _default;

package/dist/accordionary.esm.js

@@ -1 +1 @@
-var w=0;function y(j,q,P,Q){let{headingElement:J,contentElement:G,iconElement:W,config:H}=j,_=`accordionary-${w++}`,z=`${_}-header`,k=`${_}-content`,U=!1;if(H.openOverride!==null)U=H.openOverride;else if(q.openDefault==="all")U=!0;else if(q.openDefault==="first"&&P)U=!0;let K=U,{speed:$,easing:V,reduceMotion:B}=q,R=B?"none":`height ${$}ms ${V}`,S=B?"none":`transform ${$}ms ${V}`;if(G.style.overflow="hidden",G.style.transition=R,G.style.height=K?"auto":"0px",W.style.transition=S,H.disabled)W.style.visibility="hidden";else if(K)W.style.transform="rotate(180deg)";if(J.id=z,J.setAttribute("tabindex",H.disabled?"-1":"0"),J.setAttribute("role","button"),J.setAttribute("aria-expanded",K?"true":"false"),J.setAttribute("aria-controls",k),J.style.cursor=H.disabled?"default":"pointer",H.disabled)J.setAttribute("aria-disabled","true");G.id=k,G.setAttribute("role","region"),G.setAttribute("aria-labelledby",z);function M(){if(K)return;K=!0,G.style.height=`${G.scrollHeight}px`,W.style.transform="rotate(180deg)",J.setAttribute("aria-expanded","true")}function T(){if(!K)return;K=!1,G.style.height=`${G.scrollHeight}px`,G.offsetHeight,G.style.height="0px",W.style.transform="rotate(0deg)",J.setAttribute("aria-expanded","false")}function b(){if(H.disabled)return;if(K)T();else{if(!q.allowMultiple){for(let X of Q)if(X!==j&&X.close)X.close()}M()}}j.open=M,j.close=T,j.toggle=b,J.addEventListener("click",b),J.addEventListener("keydown",(X)=>{if(X.key==="Enter"||X.key===" ")X.preventDefault(),b()}),G.addEventListener("transitionend",()=>{if(K)G.style.height="auto"})}function Z(j,q){console.warn(`[Accordionary] ${j}`,q||"")}function L(j,q){console.error(`[Accordionary] ${j}`,q||"")}function Y(j,q){return j.getAttribute(`accordionary-${q}`)}function N(j,q=document){return q.querySelector(`[accordionary="${j}"]`)}function D(j,q=document){return q.querySelectorAll(`[accordionary="${j}"]`)}var v=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function F(j){if(j.hasAttribute("data-accordionary-initialized"))return null;j.setAttribute("data-accordionary-initialized","true");let q=Y(j,"open"),P=Y(j,"multiple"),Q=Y(j,"speed"),J=Y(j,"easing");if(q&&!["all","first","none"].includes(q))Z(`Invalid accordionary-open="${q}". Expected "all", "first", or "none". Defaulting to "none".`,j);if(P&&!["true","false"].includes(P))Z(`Invalid accordionary-multiple="${P}". Expected "true" or "false". Defaulting to "true".`,j);let G=Q?parseInt(Q,10):300;if(Q&&(isNaN(G)||G<0))Z(`Invalid accordionary-speed="${Q}". Expected a positive number in milliseconds. Defaulting to 300.`,j);let W={openDefault:q==="all"||q==="first"?q:"none",allowMultiple:P!=="false",speed:isNaN(G)||G<0?300:G,easing:J||"ease",reduceMotion:v},H=[],_=D("item",j);if(_.length===0)return Z('No items found. Add elements with accordionary="item" inside your component.',j),null;for(let k of _){let U=N("header",k),K=N("content",k),$=N("icon",k);if(!U){L('Missing header element. Add accordionary="header" inside this item.',k);continue}if(!K){L('Missing content element. Add accordionary="content" inside this item.',k);continue}if(!$){L('Missing icon element. Add accordionary="icon" inside your header.',k);continue}let V=Y(k,"open"),B=Y(k,"disable");if(V&&!["true","false"].includes(V))Z(`Invalid accordionary-open="${V}" on item. Expected "true" or "false".`,k);let R={openOverride:V==="true"?!0:V==="false"?!1:null,disabled:B==="true"};H.push({element:k,headingElement:U,contentElement:K,iconElement:$,config:R})}H.forEach((k,U)=>{y(k,W,U===0,H)});let z=H.map((k)=>({element:k.element,open:()=>k.open?.(),close:()=>k.close?.(),toggle:()=>k.toggle?.()}));return{element:j,openAll:()=>{for(let k of H)k.open?.()},closeAll:()=>{for(let k of H)k.close?.()},open:(k)=>{H[k]?.open?.()},close:(k)=>{H[k]?.close?.()},toggle:(k)=>{H[k]?.toggle?.()},items:z}}function C(j){let q=typeof j==="string"?document.querySelector(j):j;if(!q)return console.error(`[Accordionary] Element not found: ${j}`),null;return F(q)}function x(){let j=D("component"),q=[];for(let P of j){let Q=F(P);if(Q)q.push(Q)}return q}var g={init:C,initAll:x};export{x as initAll,C as init,g as default};
+var w=0;function y(j,G,P,W){let{headingElement:U,contentElement:H,iconElement:J,config:V}=j,K=`accordionary-${w++}`,Q=`${K}-header`,z=`${K}-content`,q=!1;if(V.openOverride!==null)q=V.openOverride;else if(G.openDefault==="all")q=!0;else if(G.openDefault==="first"&&P)q=!0;let X=q,{speed:B,easing:L,reduceMotion:Z}=G,T=Z?"none":`height ${B}ms ${L}`,b=Z?"none":`transform ${B}ms ${L}`;if(H.style.overflow="hidden",H.style.transition=T,H.style.height=X?"auto":"0px",!X)H.inert=!0;if(J.style.transition=b,V.disabled)J.style.visibility="hidden";else if(X)J.style.transform="rotate(180deg)";if(U.id=Q,U.setAttribute("tabindex",V.disabled?"-1":"0"),U.setAttribute("role","button"),U.setAttribute("aria-expanded",X?"true":"false"),U.setAttribute("aria-controls",z),U.style.cursor=V.disabled?"default":"pointer",V.disabled)U.setAttribute("aria-disabled","true");H.id=z,H.setAttribute("role","region"),H.setAttribute("aria-labelledby",Q);function S(){if(X)return;X=!0,H.inert=!1,H.style.height=`${H.scrollHeight}px`,J.style.transform="rotate(180deg)",U.setAttribute("aria-expanded","true")}function D(){if(!X)return;X=!1,H.inert=!0,H.style.height=`${H.scrollHeight}px`,H.offsetHeight,H.style.height="0px",J.style.transform="rotate(0deg)",U.setAttribute("aria-expanded","false")}function M(){if(V.disabled)return;if(G.linked){if(X){for(let Y of W)if(!Y.config.disabled)Y.close?.()}else for(let Y of W)if(!Y.config.disabled)Y.open?.()}else if(X)D();else{if(!G.allowMultiple){for(let Y of W)if(Y!==j&&Y.close)Y.close()}S()}}j.open=S,j.close=D,j.toggle=M,U.addEventListener("click",M),U.addEventListener("keydown",(Y)=>{if(Y.key==="Enter"||Y.key===" ")Y.preventDefault(),M()}),H.addEventListener("transitionend",()=>{if(X)H.style.height="auto"})}function $(j,G){console.warn(`[Accordionary] ${j}`,G||"")}function N(j,G){console.error(`[Accordionary] ${j}`,G||"")}function _(j,G){return j.getAttribute(`accordionary-${G}`)}function R(j,G=document){return G.querySelector(`[accordionary="${j}"]`)}function F(j,G=document){return G.querySelectorAll(`[accordionary="${j}"]`)}var x=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function k(j){if(j.hasAttribute("data-accordionary-initialized"))return null;j.setAttribute("data-accordionary-initialized","true");let G=_(j,"open"),P=_(j,"multiple"),W=_(j,"speed"),U=_(j,"easing"),H=_(j,"link");if(G&&!["all","first","none"].includes(G))$(`Invalid accordionary-open="${G}". Expected "all", "first", or "none". Defaulting to "none".`,j);if(P&&!["true","false"].includes(P))$(`Invalid accordionary-multiple="${P}". Expected "true" or "false". Defaulting to "true".`,j);if(H&&!["true","false"].includes(H))$(`Invalid accordionary-link="${H}". Expected "true" or "false". Defaulting to "false".`,j);let J=W?parseInt(W,10):300;if(W&&(isNaN(J)||J<0))$(`Invalid accordionary-speed="${W}". Expected a positive number in milliseconds. Defaulting to 300.`,j);let V={openDefault:G==="all"||G==="first"?G:"none",allowMultiple:P!=="false",speed:isNaN(J)||J<0?300:J,easing:U||"ease",reduceMotion:x,linked:H==="true"},K=[],Q=F("item",j);if(Q.length===0)return $('No items found. Add elements with accordionary="item" inside your component.',j),null;for(let q of Q){let X=R("header",q),B=R("content",q),L=R("icon",q);if(!X){N('Missing header element. Add accordionary="header" inside this item.',q);continue}if(!B){N('Missing content element. Add accordionary="content" inside this item.',q);continue}if(!L){N('Missing icon element. Add accordionary="icon" inside your header.',q);continue}let Z=_(q,"open"),T=_(q,"disable");if(Z&&!["true","false"].includes(Z))$(`Invalid accordionary-open="${Z}" on item. Expected "true" or "false".`,q);let b={openOverride:Z==="true"?!0:Z==="false"?!1:null,disabled:T==="true"};K.push({element:q,headingElement:X,contentElement:B,iconElement:L,config:b})}K.forEach((q,X)=>{y(q,V,X===0,K)});let z=K.map((q)=>({element:q.element,open:()=>q.open?.(),close:()=>q.close?.(),toggle:()=>q.toggle?.()}));return{element:j,openAll:()=>{for(let q of K)q.open?.()},closeAll:()=>{for(let q of K)q.close?.()},open:(q)=>{K[q]?.open?.()},close:(q)=>{K[q]?.close?.()},toggle:(q)=>{K[q]?.toggle?.()},items:z}}function v(j,G={}){let{icon:P="▼",openDefault:W="none",allowMultiple:U=!0,speed:H=300,easing:J="ease",linked:V=!1,classes:K={}}=G,Q=document.createElement("div");if(Q.setAttribute("accordionary","component"),W!=="none")Q.setAttribute("accordionary-open",W);if(!U)Q.setAttribute("accordionary-multiple","false");if(H!==300)Q.setAttribute("accordionary-speed",H.toString());if(J!=="ease")Q.setAttribute("accordionary-easing",J);if(V)Q.setAttribute("accordionary-link","true");if(K.component)Q.classList.add(...K.component);for(let z of j.items){let q=C(z,P,K);Q.appendChild(q)}return Q}function C(j,G,P){let{heading:W,content:U,config:H={}}=j,J=document.createElement("div");if(J.setAttribute("accordionary","item"),H.openOverride!==void 0)J.setAttribute("accordionary-open",H.openOverride.toString());if(H.disabled)J.setAttribute("accordionary-disable","true");if(P.item)J.classList.add(...P.item);let V=document.createElement("div");if(V.setAttribute("accordionary","header"),V.innerHTML=W,P.heading)V.classList.add(...P.heading);let K=document.createElement("span");if(K.setAttribute("accordionary","icon"),K.innerHTML=G,P.icon)K.classList.add(...P.icon);V.appendChild(K);let Q=document.createElement("div");if(Q.setAttribute("accordionary","content"),Q.innerHTML=U,P.content)Q.classList.add(...P.content);return J.appendChild(V),J.appendChild(Q),J}function O(j){let G=typeof j==="string"?document.querySelector(j):j;if(!G)return console.error(`[Accordionary] Element not found: ${j}`),null;return k(G)}function I(){let j=F("component"),G=[];for(let P of j){let W=k(P);if(W)G.push(W)}return G}var a={init:O,initAll:I,generateAccordionary:v};export{I as initAll,O as init,v as generateAccordionary,a as default};

package/dist/accordionary.js

@@ -1 +1 @@
-(()=>{var y=0;function M(j,q,U,Y){let{headingElement:J,contentElement:G,iconElement:V,config:H}=j,_=`accordionary-${y++}`,B=`${_}-header`,k=`${_}-content`,P=!1;if(H.openOverride!==null)P=H.openOverride;else if(q.openDefault==="all")P=!0;else if(q.openDefault==="first"&&U)P=!0;let K=P,{speed:$,easing:Q,reduceMotion:L}=q,R=L?"none":`height ${$}ms ${Q}`,v=L?"none":`transform ${$}ms ${Q}`;if(G.style.overflow="hidden",G.style.transition=R,G.style.height=K?"auto":"0px",V.style.transition=v,H.disabled)V.style.visibility="hidden";else if(K)V.style.transform="rotate(180deg)";if(J.id=B,J.setAttribute("tabindex",H.disabled?"-1":"0"),J.setAttribute("role","button"),J.setAttribute("aria-expanded",K?"true":"false"),J.setAttribute("aria-controls",k),J.style.cursor=H.disabled?"default":"pointer",H.disabled)J.setAttribute("aria-disabled","true");G.id=k,G.setAttribute("role","region"),G.setAttribute("aria-labelledby",B);function F(){if(K)return;K=!0,G.style.height=`${G.scrollHeight}px`,V.style.transform="rotate(180deg)",J.setAttribute("aria-expanded","true")}function T(){if(!K)return;K=!1,G.style.height=`${G.scrollHeight}px`,G.offsetHeight,G.style.height="0px",V.style.transform="rotate(0deg)",J.setAttribute("aria-expanded","false")}function b(){if(H.disabled)return;if(K)T();else{if(!q.allowMultiple){for(let W of Y)if(W!==j&&W.close)W.close()}F()}}j.open=F,j.close=T,j.toggle=b,J.addEventListener("click",b),J.addEventListener("keydown",(W)=>{if(W.key==="Enter"||W.key===" ")W.preventDefault(),b()}),G.addEventListener("transitionend",()=>{if(K)G.style.height="auto"})}function Z(j,q){console.warn(`[Accordionary] ${j}`,q||"")}function N(j,q){console.error(`[Accordionary] ${j}`,q||"")}function X(j,q){return j.getAttribute(`accordionary-${q}`)}function z(j,q=document){return q.querySelector(`[accordionary="${j}"]`)}function D(j,q=document){return q.querySelectorAll(`[accordionary="${j}"]`)}var x=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function S(j){if(j.hasAttribute("data-accordionary-initialized"))return null;j.setAttribute("data-accordionary-initialized","true");let q=X(j,"open"),U=X(j,"multiple"),Y=X(j,"speed"),J=X(j,"easing");if(q&&!["all","first","none"].includes(q))Z(`Invalid accordionary-open="${q}". Expected "all", "first", or "none". Defaulting to "none".`,j);if(U&&!["true","false"].includes(U))Z(`Invalid accordionary-multiple="${U}". Expected "true" or "false". Defaulting to "true".`,j);let G=Y?parseInt(Y,10):300;if(Y&&(isNaN(G)||G<0))Z(`Invalid accordionary-speed="${Y}". Expected a positive number in milliseconds. Defaulting to 300.`,j);let V={openDefault:q==="all"||q==="first"?q:"none",allowMultiple:U!=="false",speed:isNaN(G)||G<0?300:G,easing:J||"ease",reduceMotion:x},H=[],_=D("item",j);if(_.length===0)return Z('No items found. Add elements with accordionary="item" inside your component.',j),null;for(let k of _){let P=z("header",k),K=z("content",k),$=z("icon",k);if(!P){N('Missing header element. Add accordionary="header" inside this item.',k);continue}if(!K){N('Missing content element. Add accordionary="content" inside this item.',k);continue}if(!$){N('Missing icon element. Add accordionary="icon" inside your header.',k);continue}let Q=X(k,"open"),L=X(k,"disable");if(Q&&!["true","false"].includes(Q))Z(`Invalid accordionary-open="${Q}" on item. Expected "true" or "false".`,k);let R={openOverride:Q==="true"?!0:Q==="false"?!1:null,disabled:L==="true"};H.push({element:k,headingElement:P,contentElement:K,iconElement:$,config:R})}H.forEach((k,P)=>{M(k,V,P===0,H)});let B=H.map((k)=>({element:k.element,open:()=>k.open?.(),close:()=>k.close?.(),toggle:()=>k.toggle?.()}));return{element:j,openAll:()=>{for(let k of H)k.open?.()},closeAll:()=>{for(let k of H)k.close?.()},open:(k)=>{H[k]?.open?.()},close:(k)=>{H[k]?.close?.()},toggle:(k)=>{H[k]?.toggle?.()},items:B}}function w(){let j=D("component");for(let q of j)S(q)}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",w);else w();})();
+(()=>{var y=0;function S(j,G,Z,W){let{headingElement:K,contentElement:H,iconElement:U,config:V}=j,Q=`accordionary-${y++}`,$=`${Q}-header`,N=`${Q}-content`,q=!1;if(V.openOverride!==null)q=V.openOverride;else if(G.openDefault==="all")q=!0;else if(G.openDefault==="first"&&Z)q=!0;let J=q,{speed:B,easing:L,reduceMotion:X}=G,b=X?"none":`height ${B}ms ${L}`,F=X?"none":`transform ${B}ms ${L}`;if(H.style.overflow="hidden",H.style.transition=b,H.style.height=J?"auto":"0px",!J)H.inert=!0;if(U.style.transition=F,V.disabled)U.style.visibility="hidden";else if(J)U.style.transform="rotate(180deg)";if(K.id=$,K.setAttribute("tabindex",V.disabled?"-1":"0"),K.setAttribute("role","button"),K.setAttribute("aria-expanded",J?"true":"false"),K.setAttribute("aria-controls",N),K.style.cursor=V.disabled?"default":"pointer",V.disabled)K.setAttribute("aria-disabled","true");H.id=N,H.setAttribute("role","region"),H.setAttribute("aria-labelledby",$);function k(){if(J)return;J=!0,H.inert=!1,H.style.height=`${H.scrollHeight}px`,U.style.transform="rotate(180deg)",K.setAttribute("aria-expanded","true")}function M(){if(!J)return;J=!1,H.inert=!0,H.style.height=`${H.scrollHeight}px`,H.offsetHeight,H.style.height="0px",U.style.transform="rotate(0deg)",K.setAttribute("aria-expanded","false")}function T(){if(V.disabled)return;if(G.linked){if(J){for(let P of W)if(!P.config.disabled)P.close?.()}else for(let P of W)if(!P.config.disabled)P.open?.()}else if(J)M();else{if(!G.allowMultiple){for(let P of W)if(P!==j&&P.close)P.close()}k()}}j.open=k,j.close=M,j.toggle=T,K.addEventListener("click",T),K.addEventListener("keydown",(P)=>{if(P.key==="Enter"||P.key===" ")P.preventDefault(),T()}),H.addEventListener("transitionend",()=>{if(J)H.style.height="auto"})}function _(j,G){console.warn(`[Accordionary] ${j}`,G||"")}function z(j,G){console.error(`[Accordionary] ${j}`,G||"")}function Y(j,G){return j.getAttribute(`accordionary-${G}`)}function D(j,G=document){return G.querySelector(`[accordionary="${j}"]`)}function R(j,G=document){return G.querySelectorAll(`[accordionary="${j}"]`)}var x=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function v(j){if(j.hasAttribute("data-accordionary-initialized"))return null;j.setAttribute("data-accordionary-initialized","true");let G=Y(j,"open"),Z=Y(j,"multiple"),W=Y(j,"speed"),K=Y(j,"easing"),H=Y(j,"link");if(G&&!["all","first","none"].includes(G))_(`Invalid accordionary-open="${G}". Expected "all", "first", or "none". Defaulting to "none".`,j);if(Z&&!["true","false"].includes(Z))_(`Invalid accordionary-multiple="${Z}". Expected "true" or "false". Defaulting to "true".`,j);if(H&&!["true","false"].includes(H))_(`Invalid accordionary-link="${H}". Expected "true" or "false". Defaulting to "false".`,j);let U=W?parseInt(W,10):300;if(W&&(isNaN(U)||U<0))_(`Invalid accordionary-speed="${W}". Expected a positive number in milliseconds. Defaulting to 300.`,j);let V={openDefault:G==="all"||G==="first"?G:"none",allowMultiple:Z!=="false",speed:isNaN(U)||U<0?300:U,easing:K||"ease",reduceMotion:x,linked:H==="true"},Q=[],$=R("item",j);if($.length===0)return _('No items found. Add elements with accordionary="item" inside your component.',j),null;for(let q of $){let J=D("header",q),B=D("content",q),L=D("icon",q);if(!J){z('Missing header element. Add accordionary="header" inside this item.',q);continue}if(!B){z('Missing content element. Add accordionary="content" inside this item.',q);continue}if(!L){z('Missing icon element. Add accordionary="icon" inside your header.',q);continue}let X=Y(q,"open"),b=Y(q,"disable");if(X&&!["true","false"].includes(X))_(`Invalid accordionary-open="${X}" on item. Expected "true" or "false".`,q);let F={openOverride:X==="true"?!0:X==="false"?!1:null,disabled:b==="true"};Q.push({element:q,headingElement:J,contentElement:B,iconElement:L,config:F})}Q.forEach((q,J)=>{S(q,V,J===0,Q)});let N=Q.map((q)=>({element:q.element,open:()=>q.open?.(),close:()=>q.close?.(),toggle:()=>q.toggle?.()}));return{element:j,openAll:()=>{for(let q of Q)q.open?.()},closeAll:()=>{for(let q of Q)q.close?.()},open:(q)=>{Q[q]?.open?.()},close:(q)=>{Q[q]?.close?.()},toggle:(q)=>{Q[q]?.toggle?.()},items:N}}function w(){let j=R("component");for(let G of j)v(G)}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",w);else w();})();

package/dist/generate-accordion.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Accordionary - Accordion Generator
+ *
+ * Generates accordion HTML elements from structured JSON data.
+ * For use with package managers only (not browser implementation).
+ */
+import type { AccordionData, GeneratorConfig } from "./types";
+/**
+ * Generates an accordion element from JSON data.
+ *
+ * @param data - The accordion data with items array
+ * @param config - Optional configuration for the accordion
+ * @returns An HTMLElement ready to be appended to the DOM and initialized
+ *
+ * @example
+ * ```typescript
+ * const data = {
+ *   items: [
+ *     {
+ *       heading: "Question 1",
+ *       content: "Answer 1",
+ *     },
+ *     {
+ *       heading: "Question 2",
+ *       content: "Answer 2",
+ *       config: { openOverride: true }
+ *     }
+ *   ]
+ * };
+ *
+ * const element = generateAccordionary(data, {
+ *   icon: "▼",
+ *   openDefault: "none",
+ *   allowMultiple: true,
+ *   speed: 300,
+ *   easing: "ease",
+ *   classes: {
+ *     component: ["my-accordion"],
+ *     item: ["my-item"],
+ *   }
+ * });
+ *
+ * document.body.appendChild(element);
+ * const accordion = Accordionary.init(element);
+ * ```
+ */
+export declare function generateAccordionary(data: AccordionData, config?: GeneratorConfig): HTMLElement;

package/dist/types.d.ts

@@ -15,6 +15,8 @@ export interface AccordionConfig {
     easing: string;
     /** Whether to disable animations (respects prefers-reduced-motion) */
     reduceMotion: boolean;
+    /** Whether all items are linked (open/close together) */
+    linked: boolean;
 }
 /**
  * Item-level configuration parsed from HTML attributes.
@@ -78,3 +80,64 @@ export interface AccordionController {
     /** Get all item controllers */
     items: ItemController[];
 }
+/**
+ * Configuration for a single accordion item in generated data.
+ */
+export interface AccordionItemConfig {
+    /** Override for initial open state */
+    openOverride?: boolean;
+    /** Whether the item is non-interactive and always open */
+    disabled?: boolean;
+}
+/**
+ * Data for a single accordion item.
+ */
+export interface AccordionItemData {
+    /** HTML content for the heading */
+    heading: string;
+    /** HTML content for the collapsible content */
+    content: string;
+    /** Optional item-specific configuration */
+    config?: AccordionItemConfig;
+}
+/**
+ * Data structure for accordion generation.
+ */
+export interface AccordionData {
+    /** Array of accordion items */
+    items: AccordionItemData[];
+}
+/**
+ * CSS class names to apply to generated accordion elements.
+ */
+export interface GeneratorClasses {
+    /** Classes for the accordion component container */
+    component?: string[];
+    /** Classes for each accordion item */
+    item?: string[];
+    /** Classes for each accordion heading */
+    heading?: string[];
+    /** Classes for each accordion content panel */
+    content?: string[];
+    /** Classes for each accordion icon */
+    icon?: string[];
+}
+/**
+ * Configuration options for accordion generation.
+ */
+export interface GeneratorConfig {
+    /** HTML string for the expand/collapse icon (default: "▼") */
+    icon?: string;
+    /** Which items to open by default: "all", "first", or "none" (default: "none") */
+    openDefault?: "all" | "first" | "none";
+    /** Whether multiple items can be open simultaneously (default: false) */
+    allowMultiple?: boolean;
+    /** Animation duration in milliseconds (default: 300) */
+    speed?: number;
+    /** CSS easing function for animations (default: "ease") */
+    easing?: string;
+    /** Whether all items are linked (open/close together) (default: false) */
+    linked?: boolean;
+    /** Optional CSS class names to apply to elements */
+    classes?: GeneratorClasses;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accordionary",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A lightweight, accessible, vanilla JavaScript accordion with zero dependencies",
   "author": "Brian Tucker",
   "license": "GPL-3.0-or-later",
@@ -53,6 +53,7 @@
     "url": "https://github.com/briantucker/accordionary/issues"
   },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "happy-dom": "^20.4.0"
   }
 }