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

package/hydrate/index.js

@@ -2312,7 +2312,7 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
-    instance = instance.render() ;
+    instance = instance.render && instance.render();
     {
       hostRef.$flags$ &= -17 /* isQueuedForUpdate */;
     }
@@ -3331,6 +3331,201 @@ var setScopedSSR = (opts) => {
 var needsScopedSSR = () => scopedSSR;
 var scopedSSR = false;
 
+const pennlibsAccordionCss = "pennlibs-accordion{display:contents}";
+
+let accordionUid = 0;
+/**
+ * Composes a group of native `<details class="pl-details">` disclosures into an
+ * accordion. The markup is authored as plain styled details elements (see the
+ * Details pattern) so it works and is accessible without JavaScript; once this
+ * component loads it layers on the WAI-ARIA Accordion behavior: keyboard
+ * navigation between headers, region wiring, and an optional single-open mode.
+ *
+ * To expand or collapse every item at once, add a control 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 give it a number to reach that many levels down.
+ * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text
+ * to match the state.
+ *
+ * This is a light-DOM component. It does not render its own template; it only
+ * enhances the `<details>` children it is given.
+ *
+ * @slot - One or more details items, each styled with the pl-details classes.
+ */
+class Accordion {
+    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); }
+    static get style() { return pennlibsAccordionCss; }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "pennlibs-accordion",
+        "$members$": {
+            "single": [4]
+        },
+        "$listeners$": [[4, "click", "onControlClick"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}";
 
 /**
@@ -4422,6 +4617,7 @@ class PennlibsFeedback {
 }
 
 registerComponents([
+  Accordion,
   Autocomplete,
   Banner,
   Chat,

package/hydrate/index.mjs

@@ -2310,7 +2310,7 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
-    instance = instance.render() ;
+    instance = instance.render && instance.render();
     {
       hostRef.$flags$ &= -17 /* isQueuedForUpdate */;
     }
@@ -3329,6 +3329,201 @@ var setScopedSSR = (opts) => {
 var needsScopedSSR = () => scopedSSR;
 var scopedSSR = false;
 
+const pennlibsAccordionCss = "pennlibs-accordion{display:contents}";
+
+let accordionUid = 0;
+/**
+ * Composes a group of native `<details class="pl-details">` disclosures into an
+ * accordion. The markup is authored as plain styled details elements (see the
+ * Details pattern) so it works and is accessible without JavaScript; once this
+ * component loads it layers on the WAI-ARIA Accordion behavior: keyboard
+ * navigation between headers, region wiring, and an optional single-open mode.
+ *
+ * To expand or collapse every item at once, add a control 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 give it a number to reach that many levels down.
+ * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text
+ * to match the state.
+ *
+ * This is a light-DOM component. It does not render its own template; it only
+ * enhances the `<details>` children it is given.
+ *
+ * @slot - One or more details items, each styled with the pl-details classes.
+ */
+class Accordion {
+    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); }
+    static get style() { return pennlibsAccordionCss; }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "pennlibs-accordion",
+        "$members$": {
+            "single": [4]
+        },
+        "$listeners$": [[4, "click", "onControlClick"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}";
 
 /**
@@ -4420,6 +4615,7 @@ class PennlibsFeedback {
 }
 
 registerComponents([
+  Accordion,
   Autocomplete,
   Banner,
   Chat,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penn-libraries/web",
-  "version": "1.4.0-dev.2",
+  "version": "1.4.0-dev.4",
   "description": "Reusable web designs for University of Pennsylvania Libraries websites. This package contains our code for shared Web Components and Cascading Style Sheets (CSS).",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",