@penn-libraries/web 0.0.7 → 0.0.9

package/dist/web/web.css

@@ -21,40 +21,40 @@
 */
 
   --color-blue-1: #f5f8fc;
-  --color-blue-2: #ebf2f9;
-  --color-blue-3: #d6e4f2;
+  --color-blue-2: #d4e4f2;
+  --color-blue-3: #d4e4f2;
   --color-blue-4: #85afd8;
-  --color-blue-5: #3479be;
+  --color-blue-5: #0b4d88;
   --color-blue-6: #275b8f;
   --color-blue-7: #1a3d5f;
   --color-blue-8: #0d1e30;
   --color-blue-9: #091521;
 
   --color-orange-1: #fff6ee;
-  --color-orange-2: #fee9d5;
+  --color-orange-2: #feeddd;
   --color-orange-3: #fcca99;
   --color-orange-4: #faa755;
-  --color-orange-5: #9c6835;
+  --color-orange-5: #bd4718;
   --color-orange-6: #7d542b;
   --color-orange-7: #583a1e;
   --color-orange-8: #3f2a15;
   --color-orange-9: #191108;
 
   --color-green-1: #f8fbf0;
-  --color-green-2: #f3f8e5;
+  --color-green-2: #f1f7e1;
   --color-green-3: #ddecb5;
   --color-green-4: #bbd86b;
-  --color-green-5: #67773b;
+  --color-green-5: #267434;
   --color-green-6: #586532;
   --color-green-7: #343c1e;
   --color-green-8: #1a1e0f;
   --color-green-9: #12150a;
 
   --color-purple-1: #faf6f9;
-  --color-purple-2: #f6eef4;
+  --color-purple-2: #f2dfed;
   --color-purple-3: #ecdce8;
   --color-purple-4: #c797ba;
-  --color-purple-5: #a1528c;
+  --color-purple-5: #80317f;
   --color-purple-6: #894677;
   --color-purple-7: #512946;
   --color-purple-8: #281523;
@@ -80,18 +80,16 @@
 
 html {
   /* Foundation Colors */
+  --color-subtle: var(--color-gray-2);
   --color-default: var(--color-gray-7);
   --color-muted: var(--color-gray-5);
   --color-on-emphasis: var(--color-white);
-  --color-subtle: var(--color-gray-2);
 
   /* Role Colors */
-  --color-accent: var(--color-blue-6);
+  --color-accent: var(--color-blue-5);
   --color-success: var(--color-green-5);
   --color-attention: var(--color-orange-5);
   --color-danger: var(--color-orange-5);
-  --color-done: var(--color-green-5);
-  --color-closed: var(--color-orange-5);
   --color-done: var(--color-purple-5);
   
   /* Role Colors */
@@ -99,8 +97,6 @@ html {
   --color-success-light: var(--color-green-2);
   --color-attention-light: var(--color-orange-2);
   --color-danger-light: var(--color-orange-2);
-  --color-done-light: var(--color-green-2);
-  --color-closed-light: var(--color-orange-2);
   --color-done-light: var(--color-purple-2);
 }
 
@@ -113,8 +109,6 @@ body {
   --color-fg-success: var(--color-success);
   --color-fg-attention: var(--color-attention);
   --color-fg-danger: var(--color-danger);
-  --color-fg-done: var(--color-success);
-  --color-fg-closed: var(--color-danger);
   --color-fg-done: var(--color-done);
 
   --color-bg-default: var(--color-on-emphasis); /* What is a good role name here? */
@@ -124,16 +118,12 @@ body {
   --color-bg-success: var(--color-success-light);
   --color-bg-attention: var(--color-attention-light);
   --color-bg-danger: var(--color-danger-light);
-  --color-bg-done: var(--color-success-light);
-  --color-bg-closed: var(--color-danger-light);
   --color-bg-done: var(--color-done-light);
 
   --color-bg-accent-emphasis: var(--color-accent);
   --color-bg-success-emphasis: var(--color-success);
   --color-bg-attention-emphasis: var(--color-attention);
   --color-bg-danger-emphasis: var(--color-danger);
-  --color-bg-done-emphasis: var(--color-success);
-  --color-bg-closed-emphasis: var(--color-danger);
   --color-bg-done-emphasis: var(--color-done);
 }
 

package/dist/web/web.esm.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './p-d9c828d7.js';
-export { s as setNonce } from './p-d9c828d7.js';
+import { p as promiseResolve, b as bootstrapLazy } from './p-dd3ab4f7.js';
+export { s as setNonce } from './p-dd3ab4f7.js';
 
 /*
- Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.10.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -14,7 +14,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["p-d85c4348",[[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"isMenuVisible":[32],"links":[32]},[[2,"click","handleToggleMenu"]]],[1,"pennlibs-footer",{"navigation":[16]}],[1,"pennlibs-banner"]]]], options);
+  return bootstrapLazy([["p-41432e5b",[[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"isMenuVisible":[32],"navigation":[32]},[[2,"click","handleToggleMenu"]]],[1,"pennlibs-footer",{"navigation":[16]}],[1,"pennlibs-banner"]]]], options);
 });
 
 //# sourceMappingURL=web.esm.js.map

package/dist/web/web.esm.js.map

@@ -1 +1 @@
-{"file":"web.esm.js","mappings":";;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"file":"web.esm.js","mappings":";;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.10.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penn-libraries/web",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "University of Pennsylvania Libraries web components and assets.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -22,7 +22,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@stencil/core": "^4.0.0"
+    "@stencil/core": "^4.10.0"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",

package/readme.md

@@ -7,21 +7,18 @@ Reusable web designs for University of Pennsylvania Libraries websites. This rep
 You can start using the components immediately by adding these tags to the `<head>`:
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/@penn-libraries/web@1/web.css" rel="stylesheet"/>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@penn-libraries/web@1/dist/web/web.esm.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/@penn-libraries/web@0/dist/web/web.css" rel="stylesheet"/>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@penn-libraries/web@0/dist/web/web.esm.js"></script>
 ```
 
 Once included, components can be used in your markup like any other regular HTML elements:
 
 **HTML**
 ```html
-<pennlibs-header service-name="Schoenberg Database of Manuscripts" service-lede="Keeping observations of manuscripts"></pennlibs-header>
-<script>
-  document.querySelector('pennlibs-header').navigation = [
-    { label: "About", href: "/about" },
-    { label: "Help", href: "/help" }
-  ];
-</script>
+<pennlibs-header service-name="<service name>" service-lede="<service lede>">
+  <a href="/#">About</a>
+  <a href="/help">Help</a>
+</pennlibs-header>
 ```
 
 **Preview**