@penn-libraries/web 1.4.0-dev.2 → 1.4.0-dev.3

package/dist/{esm/pennlibs-expand-text_4.entry.js → web/p-ed1b5ac4.entry.js}

@@ -1,4 +1,169 @@
-import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, d as getAssetPath } from './index-DJQvPLp9.js';
+import { r as registerInstance, a as getElement, h, H as Host, c as createEvent, d as getAssetPath } from './p-BXL8iX4F.js';
+
+const pennlibsAccordionCss = "pennlibs-accordion{display:contents}";
+
+let accordionUid = 0;
+const Accordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * When set, only one panel can be open at a time, so opening one closes the
+         * others, like a classic accordion.
+         * @prop single
+         */
+        this.single = false;
+        this.uid = accordionUid++;
+        this.items = [];
+        this.summaries = [];
+        // Roving focus between headers per the WAI-ARIA Accordion keyboard model.
+        // Enter/Space toggling is left to the browser's native <details> behavior.
+        this.onKeydown = (event) => {
+            var _a;
+            const current = event.currentTarget;
+            const index = this.summaries.indexOf(current);
+            if (index === -1)
+                return;
+            const count = this.summaries.length;
+            let next;
+            switch (event.key) {
+                case 'ArrowDown':
+                    next = (index + 1) % count;
+                    break;
+                case 'ArrowUp':
+                    next = (index - 1 + count) % count;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = count - 1;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            (_a = this.summaries[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.onToggle = (event) => {
+            if (!this.single)
+                return;
+            const details = event.target;
+            if (!details.open)
+                return;
+            this.items.forEach((other) => {
+                if (other !== details && other.open)
+                    other.open = false;
+            });
+        };
+    }
+    componentDidLoad() {
+        this.collectItems();
+        this.enhanceItems();
+        this.syncControls(this.el, this.items.some((details) => details.open));
+    }
+    disconnectedCallback() {
+        this.summaries.forEach((summary) => summary.removeEventListener('keydown', this.onKeydown));
+        this.items.forEach((details) => details.removeEventListener('toggle', this.onToggle));
+    }
+    collectItems() {
+        this.items = Array.from(this.el.querySelectorAll(':scope > details, :scope > .pl-details'));
+        this.summaries = this.items
+            .map((details) => details.querySelector(':scope > summary'))
+            .filter((summary) => summary instanceof HTMLElement);
+    }
+    enhanceItems() {
+        this.items.forEach((details, index) => {
+            const summary = details.querySelector(':scope > summary');
+            if (!summary)
+                return;
+            const panel = summary.nextElementSibling;
+            const baseId = `pl-accordion-${this.uid}-${index}`;
+            // Wire the summary (the disclosure button) to its panel as a labelled
+            // region. Native <summary> already exposes the button role and
+            // aria-expanded, so we only add what it lacks.
+            if (!summary.id)
+                summary.id = `${baseId}-summary`;
+            if (panel) {
+                if (!panel.id)
+                    panel.id = `${baseId}-panel`;
+                if (!panel.hasAttribute('role'))
+                    panel.setAttribute('role', 'region');
+                if (!panel.hasAttribute('aria-labelledby'))
+                    panel.setAttribute('aria-labelledby', summary.id);
+                summary.setAttribute('aria-controls', panel.id);
+            }
+            summary.addEventListener('keydown', this.onKeydown);
+            details.addEventListener('toggle', this.onToggle);
+        });
+    }
+    // A declarative toggle-all control: any element marked with
+    // `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+    // accordion; set the value to an accordion's id to control one from elsewhere
+    // on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+    // accordions, or a number for that many levels. `data-pl-expand-label` and
+    // `data-pl-collapse-label` swap its text to match the state.
+    onControlClick(event) {
+        var _a;
+        const control = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-pl-accordion-toggle]');
+        if (!control || this.controlTarget(control) !== this.el)
+            return;
+        event.preventDefault();
+        const expanded = !this.items.some((details) => details.open);
+        this.setAll(this.el, expanded, this.controlDepth(control));
+    }
+    // The accordion a control points at: the element whose id is in the attribute
+    // value, or the closest enclosing accordion when the value is empty.
+    controlTarget(control) {
+        const id = control.getAttribute('data-pl-accordion-toggle');
+        return id ? document.getElementById(id) : control.closest('pennlibs-accordion');
+    }
+    // How many nested levels a control reaches: absent is none, a bare attribute
+    // is every level, and a non-negative number is that many levels down.
+    controlDepth(control) {
+        if (!control.hasAttribute('data-pl-accordion-toggle-deep'))
+            return 0;
+        const raw = control.getAttribute('data-pl-accordion-toggle-deep');
+        if (raw === null || raw === '')
+            return Infinity;
+        const levels = parseInt(raw, 10);
+        return Number.isFinite(levels) && levels >= 0 ? levels : Infinity;
+    }
+    // Expand or collapse every item in an accordion, pushing the same direction
+    // `levels` deep. Each level reads its own single-open rule, so nothing forces
+    // two panels open in a single-open group.
+    setAll(accordion, expanded, levels) {
+        const items = Array.from(accordion.querySelectorAll(':scope > details, :scope > .pl-details'));
+        if (expanded && accordion.single) {
+            items.forEach((details, index) => (details.open = index === 0));
+        }
+        else {
+            items.forEach((details) => (details.open = expanded));
+        }
+        this.syncControls(accordion, expanded);
+        if (levels > 0) {
+            this.nestedAccordions(accordion).forEach((nested) => this.setAll(nested, expanded, levels - 1));
+        }
+    }
+    // The accordions one level down from the given one (not their descendants).
+    nestedAccordions(accordion) {
+        return Array.from(accordion.querySelectorAll('pennlibs-accordion')).filter((node) => { var _a; return ((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pennlibs-accordion')) === accordion; });
+    }
+    // Keep every control pointing at an accordion in sync with its state.
+    syncControls(accordion, expanded) {
+        document.querySelectorAll('[data-pl-accordion-toggle]').forEach((control) => {
+            if (this.controlTarget(control) !== accordion)
+                return;
+            control.setAttribute('aria-expanded', String(expanded));
+            const label = expanded
+                ? control.getAttribute('data-pl-collapse-label')
+                : control.getAttribute('data-pl-expand-label');
+            if (label)
+                control.textContent = label;
+        });
+    }
+    get el() { return getElement(this); }
+};
+Accordion.style = pennlibsAccordionCss;
 
 const pennlibsExpandTextCss = ":host{display:inline-block;position:relative;max-width:100%;vertical-align:bottom}.expand-text{display:block}.expand-text--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pl-expand-text-lines, 3);line-clamp:var(--pl-expand-text-lines, 3);overflow:hidden}.expand-text--expanded{display:inline}.expand-text__fade{position:absolute;right:0;bottom:0;padding-left:2em;background:linear-gradient(\n      to right,\n      transparent,\n      var(--pl-expand-text-bg, var(--pl-color-bg-default)) 1.5em\n    );pointer-events:none}.expand-text__toggle{display:inline-block;vertical-align:baseline;pointer-events:auto;padding:var(--pl-space-3xs) var(--pl-space-s);border:none;background:var(--pl-color-bg-subtle);color:var(--pl-color-fg-default);font-family:var(--pl-font-family);border-radius:var(--pl-border-radius-subtle);font-size:var(--pl-font-size-xs);font-weight:500;line-height:1.5;letter-spacing:0.075rem;text-transform:uppercase;cursor:pointer}.expand-text__toggle:hover{text-decoration:underline;text-decoration-thickness:var(--pl-link-text-decoration-thickness);text-underline-offset:var(--pl-link-text-underline-offset)}.expand-text__toggle:focus-visible{outline:none;box-shadow:var(--pl-focus-box-shadow)}.expand-text__fade--inline{position:static;padding-left:0;background:none;margin-inline-start:var(--pl-space-2xs, 0.25rem)}";
 
@@ -259,5 +424,5 @@ const Header = class {
 };
 Header.style = pennlibsHeaderCss;
 
-export { ExpandText as pennlibs_expand_text, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
-//# sourceMappingURL=pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map
+export { Accordion as pennlibs_accordion, ExpandText as pennlibs_expand_text, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
+//# sourceMappingURL=pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map