@penn-libraries/web 0.3.0-dev.4 → 0.3.0

package/dist/esm/web.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-BQRdy1TQ.js';
-export { s as setNonce } from './index-BQRdy1TQ.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-BAQIT3Vo.js';
+export { s as setNonce } from './index-BAQIT3Vo.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,7 +17,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["pennlibs-chat_5",[[1,"pennlibs-chat",{"href":[32]}],[1,"pennlibs-feedback",{"error":[32],"answer":[32]}],[1,"pennlibs-footer",{"navigation":[16],"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-banner",[[1,"pennlibs-banner"]]],["pennlibs-colors",[[1,"pennlibs-colors",{"navigation":[16]}]]]], options);
+  return bootstrapLazy([["pennlibs-chat_6",[[1,"pennlibs-chat",{"href":[32]}],[1,"pennlibs-fallback-img"],[1,"pennlibs-feedback",{"error":[32],"answer":[32]}],[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]}],[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-banner",[[1,"pennlibs-banner"]]]], options);
 });
 //# sourceMappingURL=web.js.map
 

package/dist/types/components/pennlibs-fallback-img/pennlibs-fallback-img.d.ts

@@ -0,0 +1,3 @@
+export declare class NoImage {
+    render(): any;
+}

package/dist/types/components/pennlibs-footer/pennlibs-footer.d.ts

@@ -1,14 +1,4 @@
 export declare class Footer {
-    /**
-     * The navigation sections.
-     */
-    navigation: Array<{
-        heading: string;
-        links: Array<{
-            label: string;
-            href: string;
-        }>;
-    }>;
     navigationByChildren: any;
     hostElement: HTMLElement;
     componentWillLoad(): void;

package/dist/types/components/pennlibs-header/pennlibs-header.d.ts

@@ -1,20 +1,41 @@
+/**
+ * A header component for Penn Libraries websites that displays the Penn Libraries logo,
+ * service branding, and navigation. Supports both light and dark themes.
+ *
+ * @component
+ * @example
+ * <pennlibs-header
+ *   service-name="Find Books"
+ *   service-lede="Search our catalog and collections"
+ *   theme="light">
+ *   <a href="/search">Search</a>
+ *   <a href="/help">Help</a>
+ * </pennlibs-header>
+ *
+ * @slot end - Content to display at the end of the header (right side)
+ * @slot name-end - Content to display at the end of the service name (right side)
+ *
+ * @prop --max-width: The maximum width of the header.
+ */
 export declare class Header {
     /**
-     * The name of the service.
+     * The service name should clearly describe what users want to accomplish. Avoid technical jargon, technology names, and acronyms.
      */
-    serviceName: string;
+    serviceName?: string;
     /**
-     * The opening brief sentence introducting the most important aspects of the service.
+     * A brief, compelling description that helps users understand what they can do here. Keep it short and focused on user benefits.
      */
-    serviceLede: string;
+    serviceLede?: string;
     /**
-     * The service href that turns the service name into a link.
+     * The URL where the service name links to, typically the service homepage or main landing page.
+     * @default "/"
      */
-    serviceHref: string;
+    serviceHref?: string;
     /**
-     * The service href that turns the service name into a link.
+     * The visual theme of the header. Light theme uses blue logo, dark theme uses white logo.
+     * @default 'light'
      */
-    theme: string;
+    theme: 'light' | 'dark';
     isMenuOpen: boolean;
     navigation: any[];
     hostElement: HTMLElement;

package/dist/types/components/pennlibs-hero/pennlibs-hero.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Place your most important content in a prominent space, often at the top of your website.
+ *
+ * @slot start - Content to display at the start (top) of the hero.
+ *
+ * @prop --max-width: The maximum width of the hero inner content.
+ */
 export declare class Hero {
     hostElement: HTMLElement;
     heroPictureElement: null | HTMLPictureElement;

package/dist/types/components.d.ts

@@ -10,50 +10,49 @@ export namespace Components {
     }
     interface PennlibsChat {
     }
-    interface PennlibsColors {
-        /**
-          * The navigation sections.
-         */
-        "navigation": Array<{
-    heading: string;
-    links: Array<{
-      label: string;
-      href: string;
-    }>;
-  }>;
+    interface PennlibsFallbackImg {
     }
     interface PennlibsFeedback {
     }
     interface PennlibsFooter {
-        /**
-          * The navigation sections.
-         */
-        "navigation": Array<{
-    heading: string;
-    links: Array<{
-      label: string;
-      href: string;
-    }>;
-  }>;
     }
+    /**
+     * A header component for Penn Libraries websites that displays the Penn Libraries logo,
+     * service branding, and navigation. Supports both light and dark themes.
+     * @component 
+     * @example <pennlibs-header 
+     *   service-name="Find Books" 
+     *   service-lede="Search our catalog and collections"
+     *   theme="light">
+     *   <a href="/search">Search</a>
+     *   <a href="/help">Help</a>
+     * </pennlibs-header>
+     * @prop --max-width: The maximum width of the header.
+     */
     interface PennlibsHeader {
         /**
-          * The service href that turns the service name into a link.
+          * The URL where the service name links to, typically the service homepage or main landing page.
+          * @default "/"
          */
-        "serviceHref": string;
+        "serviceHref"?: string;
         /**
-          * The opening brief sentence introducting the most important aspects of the service.
+          * A brief, compelling description that helps users understand what they can do here. Keep it short and focused on user benefits.
          */
-        "serviceLede": string;
+        "serviceLede"?: string;
         /**
-          * The name of the service.
+          * The service name should clearly describe what users want to accomplish. Avoid technical jargon, technology names, and acronyms.
          */
-        "serviceName": string;
+        "serviceName"?: string;
         /**
-          * The service href that turns the service name into a link.
+          * The visual theme of the header. Light theme uses blue logo, dark theme uses white logo.
+          * @default 'light'
          */
-        "theme": string;
+        "theme": 'light' | 'dark';
     }
+    /**
+     * Place your most important content in a prominent space, often at the top of your website.
+     * @prop --max-width: The maximum width of the hero inner content.
+     */
     interface PennlibsHero {
     }
 }
@@ -74,11 +73,11 @@ declare global {
         prototype: HTMLPennlibsChatElement;
         new (): HTMLPennlibsChatElement;
     };
-    interface HTMLPennlibsColorsElement extends Components.PennlibsColors, HTMLStencilElement {
+    interface HTMLPennlibsFallbackImgElement extends Components.PennlibsFallbackImg, HTMLStencilElement {
     }
-    var HTMLPennlibsColorsElement: {
-        prototype: HTMLPennlibsColorsElement;
-        new (): HTMLPennlibsColorsElement;
+    var HTMLPennlibsFallbackImgElement: {
+        prototype: HTMLPennlibsFallbackImgElement;
+        new (): HTMLPennlibsFallbackImgElement;
     };
     interface HTMLPennlibsFeedbackElementEventMap {
         "pennlibs-feedback": {
@@ -109,12 +108,29 @@ declare global {
         prototype: HTMLPennlibsFooterElement;
         new (): HTMLPennlibsFooterElement;
     };
+    /**
+     * A header component for Penn Libraries websites that displays the Penn Libraries logo,
+     * service branding, and navigation. Supports both light and dark themes.
+     * @component 
+     * @example <pennlibs-header 
+     *   service-name="Find Books" 
+     *   service-lede="Search our catalog and collections"
+     *   theme="light">
+     *   <a href="/search">Search</a>
+     *   <a href="/help">Help</a>
+     * </pennlibs-header>
+     * @prop --max-width: The maximum width of the header.
+     */
     interface HTMLPennlibsHeaderElement extends Components.PennlibsHeader, HTMLStencilElement {
     }
     var HTMLPennlibsHeaderElement: {
         prototype: HTMLPennlibsHeaderElement;
         new (): HTMLPennlibsHeaderElement;
     };
+    /**
+     * Place your most important content in a prominent space, often at the top of your website.
+     * @prop --max-width: The maximum width of the hero inner content.
+     */
     interface HTMLPennlibsHeroElement extends Components.PennlibsHero, HTMLStencilElement {
     }
     var HTMLPennlibsHeroElement: {
@@ -124,7 +140,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "pennlibs-banner": HTMLPennlibsBannerElement;
         "pennlibs-chat": HTMLPennlibsChatElement;
-        "pennlibs-colors": HTMLPennlibsColorsElement;
+        "pennlibs-fallback-img": HTMLPennlibsFallbackImgElement;
         "pennlibs-feedback": HTMLPennlibsFeedbackElement;
         "pennlibs-footer": HTMLPennlibsFooterElement;
         "pennlibs-header": HTMLPennlibsHeaderElement;
@@ -136,17 +152,7 @@ declare namespace LocalJSX {
     }
     interface PennlibsChat {
     }
-    interface PennlibsColors {
-        /**
-          * The navigation sections.
-         */
-        "navigation"?: Array<{
-    heading: string;
-    links: Array<{
-      label: string;
-      href: string;
-    }>;
-  }>;
+    interface PennlibsFallbackImg {
     }
     interface PennlibsFeedback {
         "onPennlibs-feedback"?: (event: PennlibsFeedbackCustomEvent<{
@@ -158,41 +164,50 @@ declare namespace LocalJSX {
   }>) => void;
     }
     interface PennlibsFooter {
-        /**
-          * The navigation sections.
-         */
-        "navigation"?: Array<{
-    heading: string;
-    links: Array<{
-      label: string;
-      href: string;
-    }>;
-  }>;
     }
+    /**
+     * A header component for Penn Libraries websites that displays the Penn Libraries logo,
+     * service branding, and navigation. Supports both light and dark themes.
+     * @component 
+     * @example <pennlibs-header 
+     *   service-name="Find Books" 
+     *   service-lede="Search our catalog and collections"
+     *   theme="light">
+     *   <a href="/search">Search</a>
+     *   <a href="/help">Help</a>
+     * </pennlibs-header>
+     * @prop --max-width: The maximum width of the header.
+     */
     interface PennlibsHeader {
         /**
-          * The service href that turns the service name into a link.
+          * The URL where the service name links to, typically the service homepage or main landing page.
+          * @default "/"
          */
         "serviceHref"?: string;
         /**
-          * The opening brief sentence introducting the most important aspects of the service.
+          * A brief, compelling description that helps users understand what they can do here. Keep it short and focused on user benefits.
          */
         "serviceLede"?: string;
         /**
-          * The name of the service.
+          * The service name should clearly describe what users want to accomplish. Avoid technical jargon, technology names, and acronyms.
          */
         "serviceName"?: string;
         /**
-          * The service href that turns the service name into a link.
+          * The visual theme of the header. Light theme uses blue logo, dark theme uses white logo.
+          * @default 'light'
          */
-        "theme"?: string;
+        "theme"?: 'light' | 'dark';
     }
+    /**
+     * Place your most important content in a prominent space, often at the top of your website.
+     * @prop --max-width: The maximum width of the hero inner content.
+     */
     interface PennlibsHero {
     }
     interface IntrinsicElements {
         "pennlibs-banner": PennlibsBanner;
         "pennlibs-chat": PennlibsChat;
-        "pennlibs-colors": PennlibsColors;
+        "pennlibs-fallback-img": PennlibsFallbackImg;
         "pennlibs-feedback": PennlibsFeedback;
         "pennlibs-footer": PennlibsFooter;
         "pennlibs-header": PennlibsHeader;
@@ -205,10 +220,27 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "pennlibs-banner": LocalJSX.PennlibsBanner & JSXBase.HTMLAttributes<HTMLPennlibsBannerElement>;
             "pennlibs-chat": LocalJSX.PennlibsChat & JSXBase.HTMLAttributes<HTMLPennlibsChatElement>;
-            "pennlibs-colors": LocalJSX.PennlibsColors & JSXBase.HTMLAttributes<HTMLPennlibsColorsElement>;
+            "pennlibs-fallback-img": LocalJSX.PennlibsFallbackImg & JSXBase.HTMLAttributes<HTMLPennlibsFallbackImgElement>;
             "pennlibs-feedback": LocalJSX.PennlibsFeedback & JSXBase.HTMLAttributes<HTMLPennlibsFeedbackElement>;
             "pennlibs-footer": LocalJSX.PennlibsFooter & JSXBase.HTMLAttributes<HTMLPennlibsFooterElement>;
+            /**
+             * A header component for Penn Libraries websites that displays the Penn Libraries logo,
+             * service branding, and navigation. Supports both light and dark themes.
+             * @component 
+             * @example <pennlibs-header 
+             *   service-name="Find Books" 
+             *   service-lede="Search our catalog and collections"
+             *   theme="light">
+             *   <a href="/search">Search</a>
+             *   <a href="/help">Help</a>
+             * </pennlibs-header>
+             * @prop --max-width: The maximum width of the header.
+             */
             "pennlibs-header": LocalJSX.PennlibsHeader & JSXBase.HTMLAttributes<HTMLPennlibsHeaderElement>;
+            /**
+             * Place your most important content in a prominent space, often at the top of your website.
+             * @prop --max-width: The maximum width of the hero inner content.
+             */
             "pennlibs-hero": LocalJSX.PennlibsHero & JSXBase.HTMLAttributes<HTMLPennlibsHeroElement>;
         }
     }

package/dist/web/index.esm.js

@@ -1,4 +1,4 @@
-export { d as setAssetPath } from './p-BQRdy1TQ.js';
+export { d as setAssetPath } from './p-BAQIT3Vo.js';
 //# sourceMappingURL=index.esm.js.map
 
 //# sourceMappingURL=index.esm.js.map