@penn-libraries/web 1.1.0-dev.0 → 1.1.0-dev.2

package/dist/web/web.esm.js

@@ -17,7 +17,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-ceaf55b0",[[1,"pennlibs-allow-tracking",{"consentGiven":[32],"hide":[32]}],[1,"pennlibs-autocomplete",{"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-20c0bd7a",[[1,"pennlibs-banner"]]],["p-cbae5952",[[1,"pennlibs-chat",{"href":[32]}]]],["p-5e385536",[[1,"pennlibs-fallback-img"]]],["p-370e32b1",[[1,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["p-07ad051f",[[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
+  return bootstrapLazy([["p-270fd846",[[1,"pennlibs-allow-tracking",{"consentGiven":[32],"hide":[32]}],[1,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-20c0bd7a",[[1,"pennlibs-banner"]]],["p-cbae5952",[[1,"pennlibs-chat",{"href":[32]}]]],["p-5e385536",[[1,"pennlibs-fallback-img"]]],["p-370e32b1",[[1,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["p-07ad051f",[[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
 });
 //# sourceMappingURL=web.esm.js.map
 

package/hydrate/index.js

@@ -3228,7 +3228,7 @@ function TrackingIcon() {
     return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-trending-up-down-icon lucide-trending-up-down" }, hAsync("path", { d: "M14.828 14.828 21 21" }), hAsync("path", { d: "M21 16v5h-5" }), hAsync("path", { d: "m21 3-9 9-4-4-6 6" }), hAsync("path", { d: "M21 8V3h-5" })));
 }
 
-const pennlibsAutocompleteCss = ":host {\n  display: block;\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 {\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}";
+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 {\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}";
 
 class Autocomplete {
     constructor(hostRef) {
@@ -3268,27 +3268,36 @@ class Autocomplete {
         return {
             id: element.id || `option-${index}`,
             html: element.innerHTML,
-            value: element.getAttribute('data-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
+            value: element.getAttribute('data-pl-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
         };
     }
     getInput() {
-        var _a, _b;
+        var _a;
+        if (!this.for)
+            return null;
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
-        return ((_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0]) === null || _b === void 0 ? void 0 : _b.querySelector('input')) || null;
+        const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
+        return input || null;
     }
     isInputFocused() {
         return this.getInput() === document.activeElement;
     }
     isTrackedInput(input) {
-        return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-input')) === 'true' &&
+        return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-connected')) === 'true' &&
             this.el.contains(input);
     }
     setupInput() {
+        if (!this.for) {
+            console.warn('<pennlibs-autocomplete> Missing "for" attribute. Please add for="input-id" to specify which input to attach to.');
+            return;
+        }
         const input = this.getInput();
-        if (!input)
+        if (!input) {
+            console.warn(`<pennlibs-autocomplete> No input element found with id="${this.for}". Ensure an input with this id exists.`);
             return;
+        }
         this.setComboboxAttributes(input);
-        input.setAttribute('data-pl-autocomplete-input', 'true');
+        input.setAttribute('data-pl-autocomplete-connected', 'true');
     }
     setComboboxAttributes(input) {
         input.setAttribute('role', 'combobox');
@@ -3452,7 +3461,7 @@ class Autocomplete {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (hAsync("div", { key: '115c30f765cf21c38e2e5376da41295850ec76e3' }, hAsync("slot", { key: '878c10f3b561bf8c85f920b7238227a5b0429204', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: 'ea491160d597a9c2b553107fb3edad698d652549', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (hAsync("div", { key: '2091f8acacac10714c4d607e294248f3bd7e5fd7' }, hAsync("slot", { key: '628a216ce90ee693a354a74f91bcce2fe61b74a5', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: '916eba0f4b2148616fac4cc96cac4c7506a9bd0e', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     get el() { return getElement(this); }
     static get style() { return pennlibsAutocompleteCss; }
@@ -3460,6 +3469,7 @@ class Autocomplete {
         "$flags$": 9,
         "$tagName$": "pennlibs-autocomplete",
         "$members$": {
+            "for": [1],
             "showSuggestions": [32],
             "currentIndex": [32],
             "originalValue": [32],

package/hydrate/index.mjs

@@ -3226,7 +3226,7 @@ function TrackingIcon() {
     return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-trending-up-down-icon lucide-trending-up-down" }, hAsync("path", { d: "M14.828 14.828 21 21" }), hAsync("path", { d: "M21 16v5h-5" }), hAsync("path", { d: "m21 3-9 9-4-4-6 6" }), hAsync("path", { d: "M21 8V3h-5" })));
 }
 
-const pennlibsAutocompleteCss = ":host {\n  display: block;\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 {\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}";
+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 {\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}";
 
 class Autocomplete {
     constructor(hostRef) {
@@ -3266,27 +3266,36 @@ class Autocomplete {
         return {
             id: element.id || `option-${index}`,
             html: element.innerHTML,
-            value: element.getAttribute('data-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
+            value: element.getAttribute('data-pl-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
         };
     }
     getInput() {
-        var _a, _b;
+        var _a;
+        if (!this.for)
+            return null;
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
-        return ((_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0]) === null || _b === void 0 ? void 0 : _b.querySelector('input')) || null;
+        const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
+        return input || null;
     }
     isInputFocused() {
         return this.getInput() === document.activeElement;
     }
     isTrackedInput(input) {
-        return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-input')) === 'true' &&
+        return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-connected')) === 'true' &&
             this.el.contains(input);
     }
     setupInput() {
+        if (!this.for) {
+            console.warn('<pennlibs-autocomplete> Missing "for" attribute. Please add for="input-id" to specify which input to attach to.');
+            return;
+        }
         const input = this.getInput();
-        if (!input)
+        if (!input) {
+            console.warn(`<pennlibs-autocomplete> No input element found with id="${this.for}". Ensure an input with this id exists.`);
             return;
+        }
         this.setComboboxAttributes(input);
-        input.setAttribute('data-pl-autocomplete-input', 'true');
+        input.setAttribute('data-pl-autocomplete-connected', 'true');
     }
     setComboboxAttributes(input) {
         input.setAttribute('role', 'combobox');
@@ -3450,7 +3459,7 @@ class Autocomplete {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (hAsync("div", { key: '115c30f765cf21c38e2e5376da41295850ec76e3' }, hAsync("slot", { key: '878c10f3b561bf8c85f920b7238227a5b0429204', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: 'ea491160d597a9c2b553107fb3edad698d652549', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (hAsync("div", { key: '2091f8acacac10714c4d607e294248f3bd7e5fd7' }, hAsync("slot", { key: '628a216ce90ee693a354a74f91bcce2fe61b74a5', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: '916eba0f4b2148616fac4cc96cac4c7506a9bd0e', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     get el() { return getElement(this); }
     static get style() { return pennlibsAutocompleteCss; }
@@ -3458,6 +3467,7 @@ class Autocomplete {
         "$flags$": 9,
         "$tagName$": "pennlibs-autocomplete",
         "$members$": {
+            "for": [1],
             "showSuggestions": [32],
             "currentIndex": [32],
             "originalValue": [32],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penn-libraries/web",
-  "version": "1.1.0-dev.0",
+  "version": "1.1.0-dev.2",
   "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",