@gnireeg/accordion 0.1.0

package/README.md

@@ -0,0 +1,186 @@
+# @gnireeg/accordion
+
+Accessible accordion web component with smooth animations, keyboard support, and nested accordion groups.
+
+## Features
+
+- ✨ Smooth expand/collapse animations
+- ♿ Full accessibility (ARIA attributes, keyboard navigation)
+- 🎨 Customizable animation timing and easing
+- 📦 Zero dependencies
+- 🎯 TypeScript support
+- 🔄 Accordion groups with mutual exclusion
+- 🪆 Support for nested accordions
+- 🎪 Custom events for state changes
+
+## Installation
+
+```bash
+npm install @gnireeg/accordion
+```
+
+## Usage
+
+### Basic Accordion
+
+```html
+<script type="module">
+  import '@gnireeg/accordion';
+</script>
+
+<accordion-item>
+  <button slot="trigger">Click to expand</button>
+  <div>Your content here</div>
+</accordion-item>
+
+<!-- Start expanded -->
+<accordion-item open>
+  <button slot="trigger">Already open</button>
+  <div>This content is visible by default</div>
+</accordion-item>
+```
+
+### Accordion Group (Mutual Exclusion)
+
+Wrap multiple accordion items in an `accordion-group` to ensure only one can be open at a time:
+
+```html
+<accordion-group>
+  <accordion-item open>
+    <button slot="trigger">First Item</button>
+    <div>Only one item can be open at a time</div>
+  </accordion-item>
+
+  <accordion-item>
+    <button slot="trigger">Second Item</button>
+    <div>Opening this will close the first</div>
+  </accordion-item>
+
+  <accordion-item>
+    <button slot="trigger">Third Item</button>
+    <div>Same behavior here</div>
+  </accordion-item>
+</accordion-group>
+```
+
+### Custom Animation
+
+```html
+<accordion-item animation-time="500" animation-easing="ease-in-out">
+  <button slot="trigger">Slow animation</button>
+  <div>This opens and closes slower</div>
+</accordion-item>
+```
+
+### Programmatic Control
+
+```javascript
+const accordion = document.querySelector('accordion-item');
+
+// Open the accordion
+accordion.show();
+
+// Close the accordion
+accordion.close();
+
+// Toggle open/closed state
+accordion.toggle();
+
+// Listen to events
+accordion.addEventListener('accordion-opened', (e) => {
+  console.log('Opened!', e.detail);
+});
+
+accordion.addEventListener('accordion-closed', (e) => {
+  console.log('Closed!', e.detail);
+});
+```
+
+## API
+
+### `<accordion-item>`
+
+#### Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `open` | boolean | `false` | When present, the accordion starts in an expanded state |
+| `animation-time` | string | `"300"` | Animation duration in milliseconds |
+| `animation-easing` | string | `"ease"` | CSS easing function (e.g., `ease-in-out`, `cubic-bezier(...)`) |
+
+#### Slots
+
+| Slot | Description |
+|------|-------------|
+| `trigger` | The clickable element that toggles the accordion (typically a button) |
+| (default) | The accordion content |
+
+#### Methods
+
+| Method | Description |
+|--------|-------------|
+| `show()` | Opens the accordion |
+| `close()` | Closes the accordion |
+| `toggle()` | Toggles between open and closed states |
+
+#### Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `accordion-opened` | `{ open: true }` | Dispatched when the accordion opens |
+| `accordion-closed` | `{ open: false }` | Dispatched when the accordion closes |
+
+### `<accordion-group>`
+
+#### Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `allow-multiple-open` | boolean | `false` | When present, allows multiple accordions to be open simultaneously |
+
+## Styling
+
+### Styling the Open State
+
+Use the `[open]` attribute selector to style accordion items when expanded:
+
+```css
+/* Rotate chevron icon when accordion is open */
+accordion-item[open] [slot="trigger"] svg {
+  transform: rotate(180deg);
+}
+
+/* Change background color when open */
+accordion-item[open] [slot="trigger"] {
+  background-color: #f1f5f9;
+}
+
+/* Add border accent when open */
+accordion-item[open] {
+  border-left: 4px solid #3b82f6;
+}
+```
+
+## Accessibility
+
+This component includes built-in accessibility features:
+
+- Automatic `aria-expanded` attribute on trigger elements
+- Keyboard support (Enter/Space) for non-button triggers
+- Automatic `role="button"` for non-button triggers
+- Screen reader friendly state announcements
+
+## Browser Support
+
+Works in all modern browsers that support:
+- Custom Elements v1
+- Shadow DOM v1
+- ES Modules
+
+## License
+
+MIT
+
+## Author
+
+Joel Geering

package/dist/index.d.ts

@@ -0,0 +1,143 @@
+/**
+ * AccordionItem component - Expandable/collapsible content container with smooth animations
+ *
+ * @element accordion-item
+ *
+ * @attr {boolean} open - When present, the accordion starts in an expanded state
+ * @attr {string} animation-time - Animation duration in milliseconds (default: "300")
+ * @attr {string} animation-easing - CSS easing function (default: "ease")
+ *
+ * @slot trigger - The clickable element that toggles the accordion (typically a button)
+ * @slot - Default slot for the accordion content
+ *
+ * @fires accordion-opened - Dispatched when the accordion opens (detail: { open: true })
+ * @fires accordion-closed - Dispatched when the accordion closes (detail: { open: false })
+ *
+ * @cssprop [--animation-time] - Can be overridden via CSS custom properties
+ * @cssprop [--animation-easing] - Can be overridden via CSS custom properties
+ *
+ * @example
+ * ```html
+ * <accordion-item>
+ *   <button slot="trigger">Click to expand</button>
+ *   <div>Your content here</div>
+ * </accordion-item>
+ *
+ * <!-- Start expanded with custom animation -->
+ * <accordion-item open animation-time="500" animation-easing="ease-in-out">
+ *   <button slot="trigger">Already open</button>
+ *   <div>This content is visible by default</div>
+ * </accordion-item>
+ * ```
+ *
+ * @example
+ * ```javascript
+ * // Programmatic control
+ * const accordion = document.querySelector('accordion-item');
+ * accordion.show();     // Open
+ * accordion.close();    // Close
+ * accordion.toggle();   // Toggle state
+ *
+ * // Listen to events
+ * accordion.addEventListener('accordion-opened', (e) => {
+ *   console.log('Opened!', e.detail);
+ * });
+ * ```
+ *
+ * @note Automatically adds ARIA attributes (aria-expanded) for accessibility
+ * @note Supports keyboard navigation (Enter/Space) for non-button triggers
+ */
+export declare class AccordionItem extends HTMLElement {
+    private shadow;
+    private trigger;
+    private triggerElement;
+    open: boolean;
+    private animationTime;
+    private easing;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupTriggerAccessibility;
+    private handleTriggerClick;
+    private handleKeydown;
+    /**
+     * Toggles the accordion between open and closed states
+     * @public
+     */
+    toggle: () => void;
+    /**
+     * Opens the accordion
+     * @public
+     * @fires accordion-opened
+     */
+    show: () => void;
+    /**
+     * Closes the accordion
+     * @public
+     * @fires accordion-closed
+     */
+    close: () => void;
+    private reflectState;
+    private dispatchStateEvent;
+    private updateTriggerAccessibility;
+}
+/**
+ * AccordionGroup component - Container for managing multiple accordion items with mutual exclusion
+ *
+ * @element accordion-group
+ *
+ * @attr {boolean} allow-multiple-open - When present, allows multiple accordions to be open simultaneously. By default, opening one accordion closes all others in the group.
+ *
+ * @example
+ * ```html
+ * <!-- Only one accordion can be open at a time -->
+ * <accordion-group>
+ *   <accordion-item open>
+ *     <button slot="trigger">First Item</button>
+ *     <div>Opening another will close this</div>
+ *   </accordion-item>
+ *
+ *   <accordion-item>
+ *     <button slot="trigger">Second Item</button>
+ *     <div>Only one can be open at a time</div>
+ *   </accordion-item>
+ *
+ *   <accordion-item>
+ *     <button slot="trigger">Third Item</button>
+ *     <div>Same behavior here</div>
+ *   </accordion-item>
+ * </accordion-group>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Allow multiple accordions to be open -->
+ * <accordion-group allow-multiple-open>
+ *   <accordion-item>
+ *     <button slot="trigger">First Item</button>
+ *     <div>Can be open with others</div>
+ *   </accordion-item>
+ *
+ *   <accordion-item>
+ *     <button slot="trigger">Second Item</button>
+ *     <div>Multiple can be open</div>
+ *   </accordion-item>
+ * </accordion-group>
+ * ```
+ *
+ * @note Each accordion-group works independently. Multiple groups on the same page don't affect each other.
+ * @note The group listens to 'accordion-opened' events from child accordion-item elements
+ */
+export declare class AccordionGroup extends HTMLElement {
+    private allowMultiple;
+    private static stylesApplied;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleAccordionOpened;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAE1C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,OAAO,CAAgC;IAC/C,OAAO,CAAC,cAAc,CAA4B;IAC3C,IAAI,UAAS;IACpB,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,MAAM,CAAS;;IAwCvB,MAAM,KAAK,kBAAkB,aAE5B;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAiBvF,iBAAiB;IAajB,oBAAoB;IAWpB,OAAO,CAAC,yBAAyB,CAchC;IAED,OAAO,CAAC,kBAAkB,CAEzB;IAED,OAAO,CAAC,aAAa,CAKpB;IAED;;;OAGG;IACI,MAAM,aAMZ;IAED;;;;OAIG;IACI,IAAI,aAGV;IAED;;;;OAIG;IACI,KAAK,aAGX;IAED,OAAO,CAAC,YAAY,CAKnB;IAED,OAAO,CAAC,kBAAkB,CAOzB;IAED,OAAO,CAAC,0BAA0B,CAOjC;CACJ;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAE3C,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,MAAM,CAAC,aAAa,CAAS;;IAarC,MAAM,KAAK,kBAAkB,aAE5B;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAevF,iBAAiB;IAGjB,oBAAoB;IAIpB,OAAO,CAAC,qBAAqB,CAS5B;CAEJ"}

package/dist/index.js

@@ -0,0 +1,304 @@
+/**
+ * AccordionItem component - Expandable/collapsible content container with smooth animations
+ *
+ * @element accordion-item
+ *
+ * @attr {boolean} open - When present, the accordion starts in an expanded state
+ * @attr {string} animation-time - Animation duration in milliseconds (default: "300")
+ * @attr {string} animation-easing - CSS easing function (default: "ease")
+ *
+ * @slot trigger - The clickable element that toggles the accordion (typically a button)
+ * @slot - Default slot for the accordion content
+ *
+ * @fires accordion-opened - Dispatched when the accordion opens (detail: { open: true })
+ * @fires accordion-closed - Dispatched when the accordion closes (detail: { open: false })
+ *
+ * @cssprop [--animation-time] - Can be overridden via CSS custom properties
+ * @cssprop [--animation-easing] - Can be overridden via CSS custom properties
+ *
+ * @example
+ * ```html
+ * <accordion-item>
+ *   <button slot="trigger">Click to expand</button>
+ *   <div>Your content here</div>
+ * </accordion-item>
+ *
+ * <!-- Start expanded with custom animation -->
+ * <accordion-item open animation-time="500" animation-easing="ease-in-out">
+ *   <button slot="trigger">Already open</button>
+ *   <div>This content is visible by default</div>
+ * </accordion-item>
+ * ```
+ *
+ * @example
+ * ```javascript
+ * // Programmatic control
+ * const accordion = document.querySelector('accordion-item');
+ * accordion.show();     // Open
+ * accordion.close();    // Close
+ * accordion.toggle();   // Toggle state
+ *
+ * // Listen to events
+ * accordion.addEventListener('accordion-opened', (e) => {
+ *   console.log('Opened!', e.detail);
+ * });
+ * ```
+ *
+ * @note Automatically adds ARIA attributes (aria-expanded) for accessibility
+ * @note Supports keyboard navigation (Enter/Space) for non-button triggers
+ */
+export class AccordionItem extends HTMLElement {
+    constructor() {
+        super();
+        this.trigger = null;
+        this.triggerElement = null;
+        this.open = false;
+        this.setupTriggerAccessibility = () => {
+            if (!this.trigger)
+                return;
+            this.triggerElement = this.trigger.assignedElements()[0];
+            if (!this.triggerElement)
+                return;
+            // If the slotted element is not a button, add keyboard support
+            if (this.triggerElement.tagName !== 'BUTTON' && !this.triggerElement.hasAttribute('role')) {
+                this.triggerElement.setAttribute('role', 'button');
+                this.triggerElement.setAttribute('tabindex', '0');
+                // Add keyboard listener
+                this.triggerElement.addEventListener('keydown', this.handleKeydown);
+            }
+        };
+        this.handleTriggerClick = () => {
+            this.toggle();
+        };
+        this.handleKeydown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        /**
+         * Toggles the accordion between open and closed states
+         * @public
+         */
+        this.toggle = () => {
+            if (this.open) {
+                this.close();
+            }
+            else {
+                this.show();
+            }
+        };
+        /**
+         * Opens the accordion
+         * @public
+         * @fires accordion-opened
+         */
+        this.show = () => {
+            this.open = true;
+            this.reflectState();
+        };
+        /**
+         * Closes the accordion
+         * @public
+         * @fires accordion-closed
+         */
+        this.close = () => {
+            this.open = false;
+            this.reflectState();
+        };
+        this.reflectState = () => {
+            // Update attribute to match property
+            this.open ? this.setAttribute('open', '') : this.removeAttribute('open');
+            this.updateTriggerAccessibility();
+            this.dispatchStateEvent();
+        };
+        this.dispatchStateEvent = () => {
+            // Dispatch custom events
+            this.dispatchEvent(new CustomEvent(this.open ? 'accordion-opened' : 'accordion-closed', {
+                bubbles: true,
+                composed: true,
+                detail: { open: this.open }
+            }));
+        };
+        this.updateTriggerAccessibility = () => {
+            if (!this.trigger)
+                return;
+            const triggerElement = this.trigger.assignedElements()[0];
+            if (triggerElement) {
+                triggerElement.setAttribute('aria-expanded', String(this.open));
+            }
+        };
+        // Initialize state from attribute
+        this.open = this.hasAttribute('open');
+        this.animationTime = this.getAttribute('animation-time') || '300';
+        this.easing = this.getAttribute('animation-easing') || 'ease';
+        this.shadow = this.attachShadow({ mode: 'open' });
+        this.shadow.innerHTML = /*HTML*/ `
+            <style>
+                :host{
+                    display: block;
+                    overflow: hidden;
+                }
+                .content-wrapper {
+                    display: grid;
+                    grid-template-rows: 0fr;
+                    transition: grid-template-rows ${this.animationTime}ms ${this.easing};
+                    overflow: hidden;
+                }
+
+                :host([open]) .content-wrapper {
+                    grid-template-rows: 1fr;
+                }
+
+                .content-inner {
+                    min-height: 0;
+                }
+            </style>
+            <slot name="trigger"></slot>
+            <div class="content-wrapper">
+                <div class="content-inner">
+                    <slot content></slot>
+                </div>
+            </div>
+        `;
+    }
+    static get observedAttributes() {
+        return ['open'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'open':
+                const shouldBeOpen = newValue !== null;
+                // Only update if state actually changed to prevent infinite loop
+                if (this.open !== shouldBeOpen) {
+                    this.open = shouldBeOpen;
+                    this.updateTriggerAccessibility();
+                    this.dispatchStateEvent();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    connectedCallback() {
+        this.trigger = this.shadow.querySelector('slot[name="trigger"]');
+        if (this.trigger) {
+            this.trigger.addEventListener('click', this.handleTriggerClick);
+            // Setup accessibility for trigger element
+            requestAnimationFrame(() => {
+                this.setupTriggerAccessibility();
+                this.updateTriggerAccessibility();
+            });
+        }
+    }
+    disconnectedCallback() {
+        if (this.trigger) {
+            this.trigger.removeEventListener('click', this.handleTriggerClick);
+        }
+        // Cleanup keyboard listener
+        if (this.triggerElement) {
+            this.triggerElement.removeEventListener('keydown', this.handleKeydown);
+        }
+    }
+}
+/**
+ * AccordionGroup component - Container for managing multiple accordion items with mutual exclusion
+ *
+ * @element accordion-group
+ *
+ * @attr {boolean} allow-multiple-open - When present, allows multiple accordions to be open simultaneously. By default, opening one accordion closes all others in the group.
+ *
+ * @example
+ * ```html
+ * <!-- Only one accordion can be open at a time -->
+ * <accordion-group>
+ *   <accordion-item open>
+ *     <button slot="trigger">First Item</button>
+ *     <div>Opening another will close this</div>
+ *   </accordion-item>
+ *
+ *   <accordion-item>
+ *     <button slot="trigger">Second Item</button>
+ *     <div>Only one can be open at a time</div>
+ *   </accordion-item>
+ *
+ *   <accordion-item>
+ *     <button slot="trigger">Third Item</button>
+ *     <div>Same behavior here</div>
+ *   </accordion-item>
+ * </accordion-group>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Allow multiple accordions to be open -->
+ * <accordion-group allow-multiple-open>
+ *   <accordion-item>
+ *     <button slot="trigger">First Item</button>
+ *     <div>Can be open with others</div>
+ *   </accordion-item>
+ *
+ *   <accordion-item>
+ *     <button slot="trigger">Second Item</button>
+ *     <div>Multiple can be open</div>
+ *   </accordion-item>
+ * </accordion-group>
+ * ```
+ *
+ * @note Each accordion-group works independently. Multiple groups on the same page don't affect each other.
+ * @note The group listens to 'accordion-opened' events from child accordion-item elements
+ */
+export class AccordionGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.handleAccordionOpened = (e) => {
+            if (this.allowMultiple)
+                return;
+            const childAccordions = this.querySelectorAll('accordion-item');
+            childAccordions.forEach(acc => {
+                const accordion = acc;
+                if (e.target !== accordion) {
+                    if (accordion.open)
+                        accordion.close();
+                }
+            });
+        };
+        if (!AccordionGroup.stylesApplied) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync('accordion-group { display: block; }');
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+            AccordionGroup.stylesApplied = true;
+        }
+        this.allowMultiple = this.hasAttribute('allow-multiple-open');
+    }
+    static get observedAttributes() {
+        return ['allow-multiple-open'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'allow-multiple-open':
+                const shouldBeAllowed = newValue !== null;
+                // Only update if state actually changed to prevent infinite loop
+                if (this.allowMultiple !== shouldBeAllowed) {
+                    this.allowMultiple = shouldBeAllowed;
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    connectedCallback() {
+        this.addEventListener('accordion-opened', this.handleAccordionOpened);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('accordion-opened', this.handleAccordionOpened);
+    }
+}
+AccordionGroup.stylesApplied = false;
+customElements.define('accordion-item', AccordionItem);
+customElements.define('accordion-group', AccordionGroup);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@gnireeg/accordion",
+  "version": "0.1.0",
+  "description": "Accessible accordion web component with smooth animations, keyboard support, and nested accordion groups",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "accordion",
+    "web-components",
+    "custom-elements",
+    "accessible",
+    "a11y",
+    "typescript",
+    "ui-components"
+  ],
+  "author": "Joel Geering <joel@geering.dev> (https://geering.dev)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gnireeG/web-components.git",
+    "directory": "packages/accordion"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0"
+  }
+}