@penn-libraries/web 0.0.6 → 0.0.8

package/dist/web/web.css

@@ -24,7 +24,7 @@
   --color-blue-2: #ebf2f9;
   --color-blue-3: #d6e4f2;
   --color-blue-4: #85afd8;
-  --color-blue-5: #3479be;
+  --color-blue-5: #3172b3;
   --color-blue-6: #275b8f;
   --color-blue-7: #1a3d5f;
   --color-blue-8: #0d1e30;
@@ -38,7 +38,7 @@
   --color-orange-6: #7d542b;
   --color-orange-7: #583a1e;
   --color-orange-8: #3f2a15;
-  --color-orange-9: #26190d;
+  --color-orange-9: #191108;
 
   --color-green-1: #f8fbf0;
   --color-green-2: #f3f8e5;
@@ -78,6 +78,54 @@
   --font-serif: 'Cormorant Garamond', serif;
 }
 
+html {
+  /* Foundation Colors */
+  --color-default: var(--color-gray-7);
+  --color-muted: var(--color-gray-5);
+  --color-on-emphasis: var(--color-white);
+
+  /* Role Colors */
+  --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-purple-5);
+  
+  /* Role Colors */
+  --color-accent-light: var(--color-blue-2);
+  --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-purple-2);
+}
+
+body {
+  --color-fg-default: var(--color-default);
+  --color-fg-muted: var(--color-muted);
+  --color-fg-on-emphasis: var(--color-on-emphasis);
+
+  --color-fg-accent: var(--color-accent);
+  --color-fg-success: var(--color-success);
+  --color-fg-attention: var(--color-attention);
+  --color-fg-danger: var(--color-danger);
+  --color-fg-done: var(--color-done);
+
+  --color-bg-default: var(--color-on-emphasis); /* What is a good role name here? */
+  --color-bg-subtle: var(--color-subtle);
+
+  --color-bg-accent: var(--color-accent-light);
+  --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-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-done);
+}
+
 pennlibs-header:not(.hydrated) {
   min-height: 110.84px;
 }

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.6",
+  "version": "0.0.8",
   "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="Schoenberg Database of Manuscripts" service-lede="Keeping observations of manuscripts">
+  <a href="/about">About</a>
+  <a href="/help">Help</a>
+</pennlibs-header>
 ```
 
 **Preview**