@penn-libraries/web 1.1.0-dev.7 → 1.1.1-dev.1

package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js

@@ -1,4 +1,9 @@
 import { h } from "@stencil/core";
+/**
+ * Offer predictive suggestions while typing your search query.
+ *
+ * @slot start - Content to display at the start (top).
+ */
 export class Autocomplete {
     constructor() {
         this.showSuggestions = false;
@@ -137,22 +142,19 @@ export class Autocomplete {
     }
     handleEscape() {
         this.reset();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     handleArrowDown() {
         if (!this.showSuggestions)
             return;
         this.moveNext();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     handleArrowUp() {
         if (!this.showSuggestions)
             return;
         this.movePrevious();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     handleEnter() {
         if (this.canSelect())
@@ -174,16 +176,22 @@ export class Autocomplete {
         if (this.currentIndex < 0)
             return;
         const selectedOption = this.options[this.currentIndex];
+        this.applySelection(selectedOption);
+        this.emitActivation(selectedOption);
+        this.closeSuggestions();
+    }
+    applySelection(option) {
         const input = this.getInput();
-        if (input) {
-            input.value = selectedOption.value;
-            this.originalValue = selectedOption.value;
-        }
+        if (!input)
+            return;
+        input.value = option.value;
+        this.originalValue = option.value;
+    }
+    emitActivation(option) {
         this.activated.emit({
             index: this.currentIndex,
-            value: selectedOption.value
+            value: option.value
         });
-        this.closeSuggestions();
     }
     openSuggestions() {
         if (!this.isInputFocused())
@@ -195,12 +203,11 @@ export class Autocomplete {
     }
     showSuggestionsPanel() {
         this.showSuggestions = true;
-        this.syncInputState();
+        this.syncAriaAttributes();
     }
     closeSuggestions() {
         this.reset();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     deferCloseSuggestions() {
         if (this.blurTimeout)
@@ -225,7 +232,7 @@ export class Autocomplete {
         const active = document.activeElement;
         return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
     }
-    syncInputState() {
+    syncAriaAttributes() {
         const input = this.getInput();
         if (!input)
             return;
@@ -240,6 +247,10 @@ export class Autocomplete {
             ? this.options[this.currentIndex].value
             : this.originalValue;
     }
+    syncAll() {
+        this.syncAriaAttributes();
+        this.syncInputValueToSelection();
+    }
     updateAriaExpanded(input) {
         input.setAttribute('aria-expanded', this.showSuggestions.toString());
     }
@@ -258,7 +269,7 @@ export class Autocomplete {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (h("div", { key: 'd7c11d48e354937eedc76f608ef3b3b8762ddb4b' }, h("slot", { key: 'a3c65cf477aa9f575c3310e364c1dd2a5dca9e57', name: "start" }), this.shouldShowListbox() && (h("ol", { key: 'dc035d276f14da3ad0246924c345bc86ff5c68f9', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (h("div", { key: 'ee4ead1b5bec44a561901a29d3d5e119da0d09f8' }, h("slot", { key: '7d7128ab7968544ab25125d30a648136f8d8a566', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '95d45d524847f83b646853a8d919bc88f471f150', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     static get is() { return "pennlibs-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -276,7 +287,6 @@ export class Autocomplete {
         return {
             "for": {
                 "type": "string",
-                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -286,12 +296,16 @@ export class Autocomplete {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "prop",
+                            "text": "for"
+                        }],
+                    "text": "The `id` of the input that this autocomplete is attached to."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "for"
             }
         };
     }
@@ -311,8 +325,11 @@ export class Autocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "event",
+                            "text": "pl:activated"
+                        }],
+                    "text": "Emitted when a user activates (selects) an autocomplete suggestion."
                 },
                 "complexType": {
                     "original": "ActivatedEvent",

package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"pennlibs-autocomplete.js","sourceRoot":"","sources":["../../../src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAkBhG,MAAM,OAAO,YAAY;IALzB;QAUW,oBAAe,GAAY,KAAK,CAAC;QACjC,iBAAY,GAAW,CAAC,CAAC,CAAC;QAC1B,kBAAa,GAAW,EAAE,CAAC;QAC3B,YAAO,GAAoB,EAAE,CAAC;QAMtB,kBAAa,GAAG;YAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;YACnC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;YACzC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;YACrC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;SAClC,CAAC;QAwMM,sBAAiB,GAAG,CAAC,KAAa,EAAQ,EAAE;YAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAA;KAsGF;IA/SC,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC5C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW;YAAE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrD,IAAI,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IAChE,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAChD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,IAAI;SACpB,CAAC,CAAC;IACL,CAAC;IAEO,mBAAmB;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACnC,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,CAAC;QAExB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAkB,CAAC;QAC1F,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3D,CAAC;IAEO,WAAW;QACjB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAC/C,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAChB,CAAC;IACxB,CAAC;IAEO,YAAY,CAAC,OAAoB,EAAE,KAAa;;QACtD,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,EAAE,IAAI,UAAU,KAAK,EAAE;YACnC,IAAI,EAAE,OAAO,CAAC,SAAS;YACvB,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAI,MAAA,OAAO,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,IAAI,EAAE;SAClF,CAAC;IACJ,CAAC;IAEO,QAAQ;;QACd,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QAE3B,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,oBAAoB,CAAoB,CAAC;QACxF,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAEvB,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACjD,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAE/C,MAAM,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,IAAI,CAAC,GAAG,EAAE,CAAqB,CAAC;QACzF,OAAO,KAAK,IAAI,IAAI,CAAC;IACvB,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,aAAa,CAAC;IACpD,CAAC;IAEO,cAAc,CAAC,KAAuB;QAC5C,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,gCAAgC,CAAC,MAAK,MAAM;YAChE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YACd,OAAO,CAAC,IAAI,CAAC,iHAAiH,CAAC,CAAC;YAChI,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,2DAA2D,IAAI,CAAC,GAAG,yCAAyC,CAAC,CAAC;YAC3H,OAAO;QACT,CAAC;QAED,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAClC,KAAK,CAAC,YAAY,CAAC,gCAAgC,EAAE,MAAM,CAAC,CAAC;IAC/D,CAAC;IAEO,qBAAqB,CAAC,KAAuB;QACnD,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACvC,KAAK,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;QAChD,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QAC7C,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACjD,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC1C,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAGD,gBAAgB,CAAC,KAAY;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,gBAAgB,CAAC,KAAY;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9D,CAAC;IAGD,eAAe,CAAC,KAAY;QAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/D,CAAC;IAGD,cAAc,CAAC,KAAiB;QAC9B,IAAI,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YAAE,OAAO;QACnC,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO;YAAE,OAAO,CAAC,4BAA4B;QAExE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,0DAA0D;YAC1D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO;QAClC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO;QAClC,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,SAAS,EAAE;YAAE,IAAI,CAAC,aAAa,EAAE,CAAC;IAC7C,CAAC;IAED,aAAa;IACL,QAAQ;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjF,CAAC;IAEO,YAAY;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACjF,CAAC;IAEO,SAAS;QACf,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;IACxD,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC;YAAE,OAAO;QAElC,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE9B,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;YACnC,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC;QAC5C,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,YAAY;YACxB,KAAK,EAAE,cAAc,CAAC,KAAK;SAC5B,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAOO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YAAE,OAAO;QAEnC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,KAAK;YAAE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;QAE5C,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEO,qBAAqB;QAC3B,IAAI,IAAI,CAAC,WAAW;YAAE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,IAAI,IAAI,CAAC,uBAAuB,EAAE;gBAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC9D,CAAC,EAAE,GAAG,CAAsB,CAAC;IAC/B,CAAC;IAEO,KAAK;QACX,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;IACzB,CAAC;IAEO,uBAAuB,CAAC,KAAiB;;QAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,aAA4B,CAAC;QAClD,OAAO,CAAC,MAAM;YACP,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,QAAQ,CAAC,MAAM,CAAC,CAAA,CAAC,CAAC;IAC9E,CAAC;IAEO,uBAAuB;;QAC7B,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;QACtC,OAAO,CAAC,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,QAAQ,CAAC,MAAM,CAAC,CAAA,IAAI,MAAM,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC7E,CAAC;IAEO,cAAc;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAEO,yBAAyB;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM;YAC7E,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK;YACvC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;IACzB,CAAC;IAEO,kBAAkB,CAAC,KAAuB;QAChD,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvE,CAAC;IAEO,0BAA0B,CAAC,KAAuB;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe;YACrB,IAAI,CAAC,YAAY,IAAI,CAAC;YACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAC5D,IAAI,YAAY,EAAE,CAAC;YACjB,KAAK,CAAC,YAAY,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC;QAClF,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;IAClF,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,6DAAM,IAAI,EAAC,OAAO,GAAG;YACpB,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC3B,2DAAI,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,UACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,MAAM,CAAC,EAAE,mBACE,IAAI,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7D,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5C,SAAS,EAAE,MAAM,CAAC,IAAI,GACtB,CACH,CAAC,CACC,CACN,CACG,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State, Listen, Event, EventEmitter, Prop } from '@stencil/core';\n\ninterface ListboxOption {\n  id: string;\n  html: string;\n  value: string;\n}\n\nexport interface ActivatedEvent {\n  value: string;\n  index: number;\n}\n\n@Component({\n  tag: 'pennlibs-autocomplete',\n  styleUrl: 'pennlibs-autocomplete.css',\n  shadow: true\n})\nexport class Autocomplete {\n  @Element() el!: HTMLElement;\n\n  @Prop() for?: string;\n\n  @State() showSuggestions: boolean = false;\n  @State() currentIndex: number = -1;\n  @State() originalValue: string = '';\n  @State() options: ListboxOption[] = [];\n\n  @Event({ eventName: 'pl:activated' }) activated: EventEmitter<ActivatedEvent>;\n\n  private blurTimeout: number;\n  private mutationObserver: MutationObserver;\n  private readonly keyHandlerMap = {\n    'Escape': () => this.handleEscape(),\n    'ArrowDown': () => this.handleArrowDown(),\n    'ArrowUp': () => this.handleArrowUp(),\n    'Enter': () => this.handleEnter()\n  };\n\n  componentWillLoad() {\n    this.options = this.parseOptionsFromDOM();\n  }\n\n  componentDidLoad() {\n    this.setupInput();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n  }\n\n  private setupMutationObserver(): void {\n    this.mutationObserver = new MutationObserver(() => {\n      this.options = this.parseOptionsFromDOM();\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n  }\n\n  private parseOptionsFromDOM(): ListboxOption[] {\n    const listbox = this.findListbox();\n    if (!listbox) return [];\n\n    const elements = Array.from(listbox.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n    return elements.map((el, i) => this.createOption(el, i));\n  }\n\n  private findListbox(): HTMLOListElement | null {\n    return Array.from(this.el.children).find(child =>\n      child.matches('ol[role=\"listbox\"]')\n    ) as HTMLOListElement;\n  }\n\n  private createOption(element: HTMLElement, index: number): ListboxOption {\n    return {\n      id: element.id || `option-${index}`,\n      html: element.innerHTML,\n      value: element.getAttribute('data-pl-value') || element.textContent?.trim() || ''\n    };\n  }\n\n  private getInput(): HTMLInputElement | null {\n    if (!this.for) return null;\n\n    const slot = this.el.shadowRoot?.querySelector('slot[name=\"start\"]') as HTMLSlotElement;\n    if (!slot) return null;\n\n    const assignedElements = slot.assignedElements();\n    if (assignedElements.length === 0) return null;\n\n    const input = assignedElements[0].querySelector(`input#${this.for}`) as HTMLInputElement;\n    return input || null;\n  }\n\n  private isInputFocused(): boolean {\n    return this.getInput() === document.activeElement;\n  }\n\n  private isTrackedInput(input: HTMLInputElement): boolean {\n    return input?.getAttribute('data-pl-autocomplete-connected') === 'true' &&\n           this.el.contains(input);\n  }\n\n  private setupInput(): void {\n    if (!this.for) {\n      console.warn('<pennlibs-autocomplete> Missing \"for\" attribute. Please add for=\"input-id\" to specify which input to attach to.');\n      return;\n    }\n\n    const input = this.getInput();\n    if (!input) {\n      console.warn(`<pennlibs-autocomplete> No input element found with id=\"${this.for}\". Ensure an input with this id exists.`);\n      return;\n    }\n\n    this.setComboboxAttributes(input);\n    input.setAttribute('data-pl-autocomplete-connected', 'true');\n  }\n\n  private setComboboxAttributes(input: HTMLInputElement): void {\n    input.setAttribute('role', 'combobox');\n    input.setAttribute('aria-autocomplete', 'list');\n    input.setAttribute('aria-expanded', 'false');\n    input.setAttribute('aria-controls', 'listbox');\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.options = this.parseOptionsFromDOM();\n    this.setupInput();\n  }\n\n  @Listen('input', { target: 'body' })\n  handleInputEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) {\n      this.currentIndex = -1;\n      this.openSuggestions();\n    }\n  }\n\n  @Listen('focus', { target: 'body' })\n  handleFocusEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.showSuggestionsPanel();\n  }\n\n  @Listen('blur', { target: 'body' })\n  handleBlurEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.deferCloseSuggestions();\n  }\n\n  @Listen('focusout')\n  handleFocusOut(event: FocusEvent) {\n    if (this.isFocusLeavingComponent(event)) this.closeSuggestions();\n  }\n\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isInputFocused()) return;\n    if (event.metaKey || event.ctrlKey) return; // Ignore keyboard shortcuts\n\n    const handler = this.keyHandlerMap[event.key];\n    if (handler) {\n      // Don't prevent default for Enter - allow form submission\n      if (event.key !== 'Enter') {\n        event.preventDefault();\n      }\n      handler();\n    }\n  }\n\n  private handleEscape() {\n    this.reset();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private handleArrowDown() {\n    if (!this.showSuggestions) return;\n    this.moveNext();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private handleArrowUp() {\n    if (!this.showSuggestions) return;\n    this.movePrevious();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private handleEnter() {\n    if (this.canSelect()) this.selectCurrent();\n  }\n\n  // Navigation\n  private moveNext(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;\n  }\n\n  private movePrevious(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;\n  }\n\n  private canSelect(): boolean {\n    return this.showSuggestions && this.currentIndex >= 0;\n  }\n\n  private selectCurrent(): void {\n    if (this.currentIndex < 0) return;\n\n    const selectedOption = this.options[this.currentIndex];\n    const input = this.getInput();\n\n    if (input) {\n      input.value = selectedOption.value;\n      this.originalValue = selectedOption.value;\n    }\n\n    this.activated.emit({\n      index: this.currentIndex,\n      value: selectedOption.value\n    });\n\n    this.closeSuggestions();\n  }\n\n  private handleOptionClick = (index: number): void => {\n    this.currentIndex = index;\n    this.selectCurrent();\n  }\n\n  private openSuggestions(): void {\n    if (!this.isInputFocused()) return;\n\n    const input = this.getInput();\n    if (input) this.originalValue = input.value;\n\n    this.showSuggestionsPanel();\n  }\n\n  private showSuggestionsPanel(): void {\n    this.showSuggestions = true;\n    this.syncInputState();\n  }\n\n  private closeSuggestions(): void {\n    this.reset();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private deferCloseSuggestions(): void {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.isFocusOutsideComponent()) this.closeSuggestions();\n    }, 150) as unknown as number;\n  }\n\n  private reset(): void {\n    this.showSuggestions = false;\n    this.currentIndex = -1;\n  }\n\n  private isFocusLeavingComponent(event: FocusEvent): boolean {\n    const target = event.relatedTarget as HTMLElement;\n    return !target ||\n           (!this.el.contains(target) && !this.el.shadowRoot?.contains(target));\n  }\n\n  private isFocusOutsideComponent(): boolean {\n    const active = document.activeElement;\n    return !this.el.shadowRoot?.contains(active) && active !== this.getInput();\n  }\n\n  private syncInputState(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    this.updateAriaExpanded(input);\n    this.updateAriaActiveDescendant(input);\n  }\n\n  private syncInputValueToSelection(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length\n      ? this.options[this.currentIndex].value\n      : this.originalValue;\n  }\n\n  private updateAriaExpanded(input: HTMLInputElement): void {\n    input.setAttribute('aria-expanded', this.showSuggestions.toString());\n  }\n\n  private updateAriaActiveDescendant(input: HTMLInputElement): void {\n    const hasSelection = this.showSuggestions &&\n                        this.currentIndex >= 0 &&\n                        this.currentIndex < this.options.length;\n    if (hasSelection) {\n      input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);\n    } else {\n      input.removeAttribute('aria-activedescendant');\n    }\n  }\n\n  private shouldShowListbox(): boolean {\n    return this.showSuggestions && this.options.length > 0 && this.isInputFocused();\n  }\n\n  render() {\n    return (\n      <div>\n        <slot name=\"start\" />\n        {this.shouldShowListbox() && (\n          <ol role=\"listbox\" id=\"listbox\">\n            {this.options.map((option, index) => (\n              <li\n                role=\"option\"\n                id={option.id}\n                aria-selected={this.currentIndex === index ? 'true' : 'false'}\n                tabindex=\"-1\"\n                onClick={() => this.handleOptionClick(index)}\n                innerHTML={option.html}\n              />\n            ))}\n          </ol>\n        )}\n      </div>\n    )\n  }\n}\n"]}
+{"version":3,"file":"pennlibs-autocomplete.js","sourceRoot":"","sources":["../../../src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Listen, Event, EventEmitter, Prop } from '@stencil/core';\n\ninterface ListboxOption {\n  id: string;\n  html: string;\n  value: string;\n}\n\nexport interface ActivatedEvent {\n  value: string;\n  index: number;\n}\n\n/**\n * Offer predictive suggestions while typing your search query.\n *\n * @slot start - Content to display at the start (top).\n */\n@Component({\n  tag: 'pennlibs-autocomplete',\n  styleUrl: 'pennlibs-autocomplete.css',\n  shadow: true\n})\nexport class Autocomplete {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The `id` of the input that this autocomplete is attached to.\n   * @prop for\n   */\n  @Prop() for?: string;\n\n  @State() showSuggestions: boolean = false;\n  @State() currentIndex: number = -1;\n  @State() originalValue: string = '';\n  @State() options: ListboxOption[] = [];\n\n  /**\n   * Emitted when a user activates (selects) an autocomplete suggestion.\n   * @event pl:activated\n   */\n  @Event({ eventName: 'pl:activated' }) activated: EventEmitter<ActivatedEvent>;\n\n  private blurTimeout: number;\n  private mutationObserver: MutationObserver;\n  private readonly keyHandlerMap = {\n    'Escape': () => this.handleEscape(),\n    'ArrowDown': () => this.handleArrowDown(),\n    'ArrowUp': () => this.handleArrowUp(),\n    'Enter': () => this.handleEnter()\n  };\n\n  componentWillLoad() {\n    this.options = this.parseOptionsFromDOM();\n  }\n\n  componentDidLoad() {\n    this.setupInput();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n  }\n\n  private setupMutationObserver(): void {\n    this.mutationObserver = new MutationObserver(() => {\n      this.options = this.parseOptionsFromDOM();\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n  }\n\n  private parseOptionsFromDOM(): ListboxOption[] {\n    const listbox = this.findListbox();\n    if (!listbox) return [];\n\n    const elements = Array.from(listbox.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n    return elements.map((el, i) => this.createOption(el, i));\n  }\n\n  private findListbox(): HTMLOListElement | null {\n    return Array.from(this.el.children).find(child =>\n      child.matches('ol[role=\"listbox\"]')\n    ) as HTMLOListElement;\n  }\n\n  private createOption(element: HTMLElement, index: number): ListboxOption {\n    return {\n      id: element.id || `option-${index}`,\n      html: element.innerHTML,\n      value: element.getAttribute('data-pl-value') || element.textContent?.trim() || ''\n    };\n  }\n\n  private getInput(): HTMLInputElement | null {\n    if (!this.for) return null;\n\n    const slot = this.el.shadowRoot?.querySelector('slot[name=\"start\"]') as HTMLSlotElement;\n    if (!slot) return null;\n\n    const assignedElements = slot.assignedElements();\n    if (assignedElements.length === 0) return null;\n\n    const input = assignedElements[0].querySelector(`input#${this.for}`) as HTMLInputElement;\n    return input || null;\n  }\n\n  private isInputFocused(): boolean {\n    return this.getInput() === document.activeElement;\n  }\n\n  private isTrackedInput(input: HTMLInputElement): boolean {\n    return input?.getAttribute('data-pl-autocomplete-connected') === 'true' &&\n           this.el.contains(input);\n  }\n\n  private setupInput(): void {\n    if (!this.for) {\n      console.warn('<pennlibs-autocomplete> Missing \"for\" attribute. Please add for=\"input-id\" to specify which input to attach to.');\n      return;\n    }\n\n    const input = this.getInput();\n    if (!input) {\n      console.warn(`<pennlibs-autocomplete> No input element found with id=\"${this.for}\". Ensure an input with this id exists.`);\n      return;\n    }\n\n    this.setComboboxAttributes(input);\n    input.setAttribute('data-pl-autocomplete-connected', 'true');\n  }\n\n  private setComboboxAttributes(input: HTMLInputElement): void {\n    input.setAttribute('role', 'combobox');\n    input.setAttribute('aria-autocomplete', 'list');\n    input.setAttribute('aria-expanded', 'false');\n    input.setAttribute('aria-controls', 'listbox');\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.options = this.parseOptionsFromDOM();\n    this.setupInput();\n  }\n\n  @Listen('input', { target: 'body' })\n  handleInputEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) {\n      this.currentIndex = -1;\n      this.openSuggestions();\n    }\n  }\n\n  @Listen('focus', { target: 'body' })\n  handleFocusEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.showSuggestionsPanel();\n  }\n\n  @Listen('blur', { target: 'body' })\n  handleBlurEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.deferCloseSuggestions();\n  }\n\n  @Listen('focusout')\n  handleFocusOut(event: FocusEvent) {\n    if (this.isFocusLeavingComponent(event)) this.closeSuggestions();\n  }\n\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isInputFocused()) return;\n    if (event.metaKey || event.ctrlKey) return; // Ignore keyboard shortcuts\n\n    const handler = this.keyHandlerMap[event.key];\n    if (handler) {\n      // Don't prevent default for Enter - allow form submission\n      if (event.key !== 'Enter') {\n        event.preventDefault();\n      }\n      handler();\n    }\n  }\n\n  private handleEscape() {\n    this.reset();\n    this.syncAll();\n  }\n\n  private handleArrowDown() {\n    if (!this.showSuggestions) return;\n    this.moveNext();\n    this.syncAll();\n  }\n\n  private handleArrowUp() {\n    if (!this.showSuggestions) return;\n    this.movePrevious();\n    this.syncAll();\n  }\n\n  private handleEnter() {\n    if (this.canSelect()) this.selectCurrent();\n  }\n\n  // Navigation\n  private moveNext(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;\n  }\n\n  private movePrevious(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;\n  }\n\n  private canSelect(): boolean {\n    return this.showSuggestions && this.currentIndex >= 0;\n  }\n\n  private selectCurrent(): void {\n    if (this.currentIndex < 0) return;\n\n    const selectedOption = this.options[this.currentIndex];\n    this.applySelection(selectedOption);\n    this.emitActivation(selectedOption);\n    this.closeSuggestions();\n  }\n\n  private applySelection(option: ListboxOption): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = option.value;\n    this.originalValue = option.value;\n  }\n\n  private emitActivation(option: ListboxOption): void {\n    this.activated.emit({\n      index: this.currentIndex,\n      value: option.value\n    });\n  }\n\n  private handleOptionClick = (index: number): void => {\n    this.currentIndex = index;\n    this.selectCurrent();\n  }\n\n  private openSuggestions(): void {\n    if (!this.isInputFocused()) return;\n\n    const input = this.getInput();\n    if (input) this.originalValue = input.value;\n\n    this.showSuggestionsPanel();\n  }\n\n  private showSuggestionsPanel(): void {\n    this.showSuggestions = true;\n    this.syncAriaAttributes();\n  }\n\n  private closeSuggestions(): void {\n    this.reset();\n    this.syncAll();\n  }\n\n  private deferCloseSuggestions(): void {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.isFocusOutsideComponent()) this.closeSuggestions();\n    }, 150) as unknown as number;\n  }\n\n  private reset(): void {\n    this.showSuggestions = false;\n    this.currentIndex = -1;\n  }\n\n  private isFocusLeavingComponent(event: FocusEvent): boolean {\n    const target = event.relatedTarget as HTMLElement;\n    return !target ||\n           (!this.el.contains(target) && !this.el.shadowRoot?.contains(target));\n  }\n\n  private isFocusOutsideComponent(): boolean {\n    const active = document.activeElement;\n    return !this.el.shadowRoot?.contains(active) && active !== this.getInput();\n  }\n\n  private syncAriaAttributes(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    this.updateAriaExpanded(input);\n    this.updateAriaActiveDescendant(input);\n  }\n\n  private syncInputValueToSelection(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length\n      ? this.options[this.currentIndex].value\n      : this.originalValue;\n  }\n\n  private syncAll(): void {\n    this.syncAriaAttributes();\n    this.syncInputValueToSelection();\n  }\n\n  private updateAriaExpanded(input: HTMLInputElement): void {\n    input.setAttribute('aria-expanded', this.showSuggestions.toString());\n  }\n\n  private updateAriaActiveDescendant(input: HTMLInputElement): void {\n    const hasSelection = this.showSuggestions &&\n                        this.currentIndex >= 0 &&\n                        this.currentIndex < this.options.length;\n    if (hasSelection) {\n      input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);\n    } else {\n      input.removeAttribute('aria-activedescendant');\n    }\n  }\n\n  private shouldShowListbox(): boolean {\n    return this.showSuggestions && this.options.length > 0 && this.isInputFocused();\n  }\n\n  render() {\n    return (\n      <div>\n        <slot name=\"start\" />\n        {this.shouldShowListbox() && (\n          <ol role=\"listbox\" id=\"listbox\">\n            {this.options.map((option, index) => (\n              <li\n                role=\"option\"\n                id={option.id}\n                aria-selected={this.currentIndex === index ? 'true' : 'false'}\n                tabindex=\"-1\"\n                onClick={() => this.handleOptionClick(index)}\n                innerHTML={option.html}\n              />\n            ))}\n          </ol>\n        )}\n      </div>\n    )\n  }\n}\n"]}

package/dist/collection/components/pennlibs-header/pennlibs-header.js

@@ -82,7 +82,6 @@ export class Header {
         return {
             "serviceName": {
                 "type": "string",
-                "attribute": "service-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -97,11 +96,11 @@ export class Header {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "service-name"
             },
             "serviceLede": {
                 "type": "string",
-                "attribute": "service-lede",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -116,11 +115,11 @@ export class Header {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "service-lede"
             },
             "serviceHref": {
                 "type": "string",
-                "attribute": "service-href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -139,11 +138,11 @@ export class Header {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "service-href",
                 "defaultValue": "\"/\""
             },
             "theme": {
                 "type": "string",
-                "attribute": "theme",
                 "mutable": false,
                 "complexType": {
                     "original": "'light' | 'dark'",
@@ -162,6 +161,7 @@ export class Header {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "theme",
                 "defaultValue": "'light'"
             }
         };

package/dist/collection/components/pennlibs-iiif-img/pennlibs-iiif-img.css

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}
+
+picture {
+  display: block;
+  line-height: 0;
+}
+
+.iiif-img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  opacity: 0;
+  filter: blur(5px);
+  transition: opacity 0.15s ease-in, filter 0.15s ease-in;
+}
+
+.iiif-img.loaded {
+  opacity: 1;
+  filter: blur(0);
+}
+
+.fallback-container {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 200px;
+}
+
+.fallback-container pennlibs-fallback-img {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/pennlibs-iiif-img/pennlibs-iiif-img.js

@@ -0,0 +1,310 @@
+import { h } from "@stencil/core";
+const PIXEL_DENSITY_MULTIPLIERS = [0.5, 0.75, 1, 1.5, 2];
+const DEFAULT_IMAGE_SIZES = [400, 600, 800, 1200, 1600, 2400];
+/**
+ * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.
+ * Automatically generates optimal image sources for different viewport sizes and pixel densities,
+ * with modern WebP format and JPG fallback support.
+ *
+ * @component
+ * @example
+ * <pennlibs-iiif-img
+ *   uuid="063ff35c-bbdd-4b63-bbdd-6206590e20d5"
+ *   alt="">
+ * </pennlibs-iiif-img>
+ */
+export class IIIFImg {
+    constructor() {
+        /**
+         * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.
+         * Defines the rectangular portion of the underlying image to return.
+         *
+         * `full`: The full image is returned, without any cropping.
+         *
+         * `square`: A square area where width and height equal the shorter dimension.
+         *
+         * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).
+         *
+         * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.
+         *
+         * @default 'full'
+         */
+        this.region = 'full';
+        /**
+         * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.
+         * Specifies mirroring and clockwise rotation in degrees (0-360).
+         *
+         * `n`: Rotation in degrees only.
+         *
+         * `!n`: Mirror the image vertically, then rotate by n degrees.
+         *
+         * @default '0'
+         */
+        this.rotation = '0';
+        /**
+         * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.
+         * Controls the color delivery mode.
+         *
+         * `default`: The server's default quality.
+         *
+         * `color`: Full color information.
+         *
+         * `gray`: Grayscale rendering.
+         *
+         * `bitonal`: Black and white only.
+         *
+         * @default 'default'
+         */
+        this.quality = 'default';
+        /**
+         * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport,
+         * or "eager" to load immediately.
+         * @default 'lazy'
+         */
+        this.loading = 'lazy';
+        /**
+         * Whether to display a fallback placeholder image when the IIIF image fails to load.
+         * @default true
+         */
+        this.showFallback = true;
+        this.isLoaded = false;
+        this.hasError = false;
+        this.baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';
+        this.handleLoad = () => {
+            this.isLoaded = true;
+        };
+        this.handleError = () => {
+            this.hasError = true;
+        };
+    }
+    buildIIIFUrl(width, format = 'jpg') {
+        const sizeParam = width ? `${width},` : 'max';
+        return `${this.baseUrl}/${this.uuid}/${this.region}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;
+    }
+    generateSrcset(sizes, format) {
+        const uniqueSizes = [...new Set(sizes)].sort((a, b) => a - b);
+        const srcsetEntries = uniqueSizes.map(size => {
+            const url = this.buildIIIFUrl(size, format);
+            return `${url} ${size}w`;
+        });
+        return srcsetEntries.join(', ');
+    }
+    getOptimalSizes() {
+        if (this.observedWidth) {
+            const baseSizes = PIXEL_DENSITY_MULTIPLIERS.map(multiplier => Math.round(this.observedWidth * multiplier));
+            return baseSizes;
+        }
+        return [...DEFAULT_IMAGE_SIZES];
+    }
+    componentDidLoad() {
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.observedWidth = Math.round(entry.contentRect.width);
+                    if (this.resizeObserver) {
+                        this.resizeObserver.disconnect();
+                        this.resizeObserver = undefined;
+                    }
+                    // Trigger re-render with optimized sizes
+                    this.isLoaded = this.isLoaded;
+                }
+            });
+            this.resizeObserver.observe(this.hostElement);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    render() {
+        const sizes = this.getOptimalSizes();
+        if (this.hasError && this.showFallback) {
+            return (h("div", { class: "fallback-container" }, h("pennlibs-fallback-img", null)));
+        }
+        const imgClasses = {
+            'iiif-img': true,
+            'loaded': this.isLoaded
+        };
+        const defaultSize = sizes[0];
+        return (h("picture", null, h("source", { type: "image/webp", srcSet: this.generateSrcset(sizes, 'webp'), sizes: "100vw" }), h("img", { class: imgClasses, src: this.buildIIIFUrl(defaultSize, 'jpg'), srcSet: this.generateSrcset(sizes, 'jpg'), sizes: "100vw", alt: this.alt, loading: this.loading, onLoad: this.handleLoad, onError: this.handleError })));
+    }
+    static get is() { return "pennlibs-iiif-img"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pennlibs-iiif-img.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pennlibs-iiif-img.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "uuid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uuid"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text that describes the image content for screen readers and when images fail to load.\nUse an empty string for purely decorative images."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'full'"
+                        }],
+                    "text": "The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.\nDefines the rectangular portion of the underlying image to return.\n\n`full`: The full image is returned, without any cropping.\n\n`square`: A square area where width and height equal the shorter dimension.\n\n`x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).\n\n`pct:x,y,w,h`: Percentage-based coordinates of full image dimensions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "region",
+                "defaultValue": "'full'"
+            },
+            "rotation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'0'"
+                        }],
+                    "text": "The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.\nSpecifies mirroring and clockwise rotation in degrees (0-360).\n\n`n`: Rotation in degrees only.\n\n`!n`: Mirror the image vertically, then rotate by n degrees."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rotation",
+                "defaultValue": "'0'"
+            },
+            "quality": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.\nControls the color delivery mode.\n\n`default`: The server's default quality.\n\n`color`: Full color information.\n\n`gray`: Grayscale rendering.\n\n`bitonal`: Black and white only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quality",
+                "defaultValue": "'default'"
+            },
+            "loading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'lazy' | 'eager'",
+                    "resolved": "\"eager\" | \"lazy\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'lazy'"
+                        }],
+                    "text": "Native browser lazy loading behavior. Use \"lazy\" to defer loading until the image is near the viewport,\nor \"eager\" to load immediately."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "'lazy'"
+            },
+            "showFallback": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to display a fallback placeholder image when the IIIF image fails to load."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-fallback",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoaded": {},
+            "hasError": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=pennlibs-iiif-img.js.map