@cobwds/cob-unavfooter 1.19.3 → 1.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ declare const _default: "<svg width=\"54\" height=\"84\" viewBox=\"0 0 54 84\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M.082 0h24.162c6.549 0 12.478.265 16.284 1.503 7.7 2.477 10.797 8.578 10.797 14.504 0 3.36-.885 5.394-1.15 6.014-2.832 6.367-8.85 7.605-12.213 8.312 3.805.62 8.85 1.416 12.301 5.307 2.213 2.388 3.452 5.836 3.452 9.374 0 4.864-2.566 11.673-10.355 15.123-4.69 2.034-9.735 2.299-16.904 2.299H.082V0zm14.869 11.673v13h11.77c3.54-.088 9.293-.265 9.293-6.72 0-6.014-5.221-6.28-8.23-6.28H14.95zm0 24.32v15.123h10.885c5.222-.088 12.037-.265 12.037-7.429 0-7.516-6.195-7.605-9.381-7.694H14.95z\" fill=\"#FFF\"/><path d=\"M0 71.134h53.157v12.114H0V71.134z\" fill=\"#FB4D42\"/></g></svg>";
2
+ export default _default;
@@ -0,0 +1,33 @@
1
+ import { LitElement } from "lit";
2
+ import "@cobwds/cob-button";
3
+ /**
4
+ * Universal COB footer matching boston.gov: Charles Blue bar, “B” mark,
5
+ * legal links, and BOS:311. Required on all COB sites.
6
+ *
7
+ * Links are `cob-button` text links. They wrap beside the mark. When the
8
+ * footer is narrower than 769px, BOS:311 wraps with those links. From 769px,
9
+ * BOS:311 stays at the end of the bar. Horizontal padding increases again
10
+ * from 1281px.
11
+ *
12
+ * Place as the last element before `</body>`. No configuration needed.
13
+ *
14
+ * @accessibility
15
+ * - Uses semantic `<footer>` and a labeled navigation region.
16
+ * - All links are keyboard-navigable via Tab.
17
+ * - Visual design meets WCAG 2.2 AA contrast and focus indicator standards.
18
+ *
19
+ * @summary Universal COB footer with boston.gov legal links and BOS:311.
20
+ * @element cob-unavfooter
21
+ *
22
+ * @example Basic
23
+ * ```html
24
+ * <cob-unavfooter></cob-unavfooter>
25
+ * ```
26
+ */
27
+ export declare class CobUnavFooter extends LitElement {
28
+ static styles: import("lit").CSSResult;
29
+ private _parseSvg;
30
+ private _getLogo;
31
+ private _renderLink;
32
+ render(): import("lit-html").TemplateResult<1>;
33
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -1,99 +1,95 @@
1
- import { LitElement as t, unsafeCSS as r, html as a } from "lit";
1
+ import { LitElement as i, unsafeCSS as s, html as t } from "lit";
2
+ import "@cobwds/cob-button";
2
3
  /*!
3
4
  * █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
4
5
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
5
6
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
6
7
  *
7
- * Unav Footer Component v1.19.3
8
+ * Unav Footer Component v1.23.1
8
9
  * Part of the City of Boston Web Design System
9
10
  * Repository: https://github.com/CityOfBoston/nywds-poc
10
11
  * License: MIT
11
12
  */
12
- const c = '<svg width="54" height="84" viewBox="0 0 54 84" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M.082 0h24.162c6.549 0 12.478.265 16.284 1.503 7.7 2.477 10.797 8.578 10.797 14.504 0 3.36-.885 5.394-1.15 6.014-2.832 6.367-8.85 7.605-12.213 8.312 3.805.62 8.85 1.416 12.301 5.307 2.213 2.388 3.452 5.836 3.452 9.374 0 4.864-2.566 11.673-10.355 15.123-4.69 2.034-9.735 2.299-16.904 2.299H.082V0zm14.869 11.673v13h11.77c3.54-.088 9.293-.265 9.293-6.72 0-6.014-5.221-6.28-8.23-6.28H14.95zm0 24.32v15.123h10.885c5.222-.088 12.037-.265 12.037-7.429 0-7.516-6.195-7.605-9.381-7.694H14.95z" fill="#FFF"/><path d="M0 71.134h53.157v12.114H0V71.134z" fill="#FB4D42"/></g></svg>', l = '<svg xmlns="http://www.w3.org/2000/svg" width="82" height="164"> <g fill="none" fill-rule="evenodd"> <circle cx="41" cy="41" r="41" fill="#FCB61A"/> <g fill="#FFF"> <path d="M17 23.2h4.4c.3 0 .7.2 1 .4.3.2.6.4.7.7.3.3.4.6.4 1 0 .6 0 1-.4 1.3-.3.4-.6.6-1 .7l.7.3c.2 0 .4.3.6.5l.4.7.2.8c0 .5-.2.8-.4 1-.2.5-.5.7-.8 1l-1 .3h-4.9v-8.6zm1.8 3.5h1.9l.4-.2c.2 0 .3-.2.4-.3v-.5-.4L21 25h-.4c0-.2-.3-.2-.4-.2h-1.4v2zm0 3.6H21c.2 0 .4 0 .5-.2 0 0 .2 0 .3-.2v-.5-.5l-.4-.3c-.2 0-.4 0-.6-.2h-2v2zM40.3 25.3c-.2 0-.4-.3-.6-.4l-.7-.2h-.4s-.3 0-.4.2c0 0-.2 0-.3.3-.2 0-.2.2-.2.3 0 .3 0 .5.3.6.3 0 .5.2.8.3l1 .3.7.4c.3 0 .6.3.7.6.2.3.3.7.3 1 0 .6 0 1-.2 1.3l-.7 1c-.3 0-.6.3-1 .4l-1.2.2c-.5 0-1 0-1.5-.3-.5 0-1-.4-1.3-.7l1.3-1.4c0 .2.4.4.6.5.3.2.6.2 1 .2h.3l.3-.3c.2 0 .3 0 .3-.2V29v-.5c-.3 0-.6-.2-.8-.3l-1-.3-1-.5-.6-.7c-.2-.2-.3-.6-.3-1s0-.8.2-1c.2-.5.4-.7.7-1 .2-.2.5-.3 1-.4l1-.2c.5 0 1 0 1.3.2.5 0 1 .3 1.2.6l-1.2 1.3M34 27.5c0 2.4-1.8 4.3-4.2 4.3-2.5 0-4.4-2-4.4-4.3 0-2.4 2-4.3 4.4-4.3 2.4 0 4.3 2 4.3 4.3m-1.8 0c0-1.3-1-2.4-2.4-2.4s-2.5 1.2-2.5 2.5c0 1.4 1 2.4 2.5 2.4 1.3 0 2.4-1 2.4-2.5M45 26.2c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.6 1.2 1.3 0 .8-.6 1.4-1.3 1.4m0 5.4c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.5 1.2 1.2 0 .8-.6 1.4-1.3 1.4M34.6 52c0 4.5-4 8-9.2 8-5 0-9.3-3.5-9.3-8h5.2c0 2 1.8 3.3 4.2 3.3 2.3 0 4.2-1.2 4.2-3.3 0-3.7-2-4.3-4.2-4.3H20v-4l6.7-5.3h-10V34h17v4.4L27 43.7c4.7 0 7.6 3.4 7.6 8.3M50 34v25h-6V43H38v-4s5.4-.8 5.7-5h6M66 59h-6V43h-5.7v-4s5.4-.8 5.7-5h6v25z"/> </g> <circle cx="41" cy="123" r="41" fill="#FFF"/> <g fill="#FCB61A"> <path d="M17 105.2h4.4c.3 0 .7.2 1 .4.3.2.6.4.7.7.3.3.4.6.4 1 0 .6 0 1-.4 1.3-.3.4-.6.6-1 .7l.7.3c.2 0 .4.3.6.5l.4.7.2.8c0 .5-.2.8-.4 1-.2.5-.5.7-.8 1l-1 .3h-4.9v-8.6zm1.8 3.5h1.9l.4-.2c.2 0 .3-.2.4-.3v-.5-.4l-.3-.3h-.4c0-.2-.3-.2-.4-.2h-1.4v2zm0 3.6H21c.2 0 .4 0 .5-.2 0 0 .2 0 .3-.2v-.5-.5l-.4-.3c-.2 0-.4 0-.6-.2h-2v2zM40.3 107.3c-.2 0-.4-.3-.6-.4l-.7-.2h-.4s-.3 0-.4.2c0 0-.2 0-.3.3-.2 0-.2.2-.2.3 0 .3 0 .5.3.6.3 0 .5.2.8.3l1 .3.7.4c.3 0 .6.3.7.6.2.3.3.7.3 1 0 .6 0 1-.2 1.3l-.7 1c-.3 0-.6.3-1 .4l-1.2.2c-.5 0-1 0-1.5-.3-.5 0-1-.4-1.3-.7l1.3-1.4c0 .2.4.4.6.5.3.2.6.2 1 .2h.3l.3-.3c.2 0 .3 0 .3-.2v-.4-.5c-.3 0-.6-.2-.8-.3l-1-.3-1-.5-.6-.7c-.2-.2-.3-.6-.3-1s0-.8.2-1c.2-.5.4-.7.7-1 .2-.2.5-.3 1-.4l1-.2c.5 0 1 0 1.3.2.5 0 1 .3 1.2.6l-1.2 1.3M34 109.5c0 2.4-1.8 4.3-4.2 4.3-2.5 0-4.4-2-4.4-4.3 0-2.4 2-4.3 4.4-4.3 2.4 0 4.3 2 4.3 4.3m-1.8 0c0-1.3-1-2.4-2.4-2.4s-2.5 1.2-2.5 2.5c0 1.4 1 2.4 2.5 2.4 1.3 0 2.4-1 2.4-2.5M45 108.2c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.6 1.2 1.3 0 .8-.6 1.4-1.3 1.4m0 5.4c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.5 1.2 1.2 0 .8-.6 1.4-1.3 1.4M34.6 134c0 4.5-4 8-9.2 8-5 0-9.3-3.5-9.3-8h5.2c0 2 1.8 3.3 4.2 3.3 2.3 0 4.2-1.2 4.2-3.3 0-3.7-2-4.3-4.2-4.3H20v-4l6.7-5.3h-10V116h17v4.4l-6.6 5.3c4.7 0 7.6 3.4 7.6 8.3M50 116v25h-6v-16H38v-4s5.4-.8 5.7-5h6M66 141h-6v-16h-5.7v-4s5.4-.8 5.7-5h6v25z"/> </g> </g> </svg>', i = '@charset "UTF-8";:host{--_cob-unavfooter-background: var(--cob-color-charles-blue, #091f2f);--_cob-unavfooter-link: #28a7df;--_cob-unavfooter-link-311: #fcb61a;--_cob-unavfooter-font: var( --cob-font-family-sans, "Montserrat", Arial, sans-serif );display:block}.cob-unavfooter{background-color:var(--_cob-unavfooter-background);color:var(--_cob-unavfooter-link);font-family:var(--_cob-unavfooter-font);padding:1.75rem 1.75rem 0}.cob-unavfooter__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem 2rem;min-height:83px;padding:1.5rem 0;max-width:80rem;margin:0 auto}.cob-unavfooter__mark{flex-shrink:0;width:54px;height:83px;line-height:0}.cob-unavfooter__mark svg{display:block;width:54px;height:83px}.cob-unavfooter__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}.cob-unavfooter__links a{color:var(--_cob-unavfooter-link);font-family:var(--_cob-unavfooter-font);font-size:.75rem;font-weight:500;letter-spacing:.06em;line-height:1.2;text-decoration:none;text-transform:uppercase}.cob-unavfooter__links a:hover,.cob-unavfooter__links a:focus-visible{text-decoration:underline;outline:none}.cob-unavfooter__links a:focus-visible{outline:2px solid var(--_cob-unavfooter-link);outline-offset:2px}.cob-unavfooter__311{list-style:none;padding:0;margin:0 0 0 auto;display:flex;justify-content:flex-end;align-items:center}.cob-unavfooter__311 li{margin:0;padding:0}.cob-unavfooter__311-link{color:var(--_cob-unavfooter-link-311)!important;font-family:var(--_cob-unavfooter-font);font-size:.8rem;font-weight:500;letter-spacing:.06em;line-height:1;text-decoration:none;text-transform:uppercase;display:inline-flex;flex-direction:row;align-items:center;gap:1rem}.cob-unavfooter__311-link:hover,.cob-unavfooter__311-link:focus-visible{color:#fff!important;outline:none}.cob-unavfooter__311-link:focus-visible{outline:2px solid var(--_cob-unavfooter-link-311);outline-offset:2px}.cob-unavfooter__311-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.cob-unavfooter__311-sep{display:none}.cob-unavfooter__311-text{display:inline-block;order:1}.cob-unavfooter__311-circle{order:2;display:block;flex-shrink:0;width:82px;height:82px;background-image:var(--_cob-unavfooter-311-circle);background-repeat:no-repeat;background-position:0 100%;background-size:82px 164px}.cob-unavfooter__311-link:hover .cob-unavfooter__311-circle,.cob-unavfooter__311-link:focus-visible .cob-unavfooter__311-circle{background-position:0 0}@media(max-width:767px){.cob-unavfooter__mark{order:1}.cob-unavfooter__311{order:2;margin-left:auto;justify-content:flex-end;align-self:center}.cob-unavfooter__inner>nav{order:3;flex:1 1 100%}}', e = class e extends t {
13
- _parseSvg(n) {
14
- return n ? new DOMParser().parseFromString(n, "image/svg+xml").documentElement : null;
13
+ const l = '<svg width="54" height="84" viewBox="0 0 54 84" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M.082 0h24.162c6.549 0 12.478.265 16.284 1.503 7.7 2.477 10.797 8.578 10.797 14.504 0 3.36-.885 5.394-1.15 6.014-2.832 6.367-8.85 7.605-12.213 8.312 3.805.62 8.85 1.416 12.301 5.307 2.213 2.388 3.452 5.836 3.452 9.374 0 4.864-2.566 11.673-10.355 15.123-4.69 2.034-9.735 2.299-16.904 2.299H.082V0zm14.869 11.673v13h11.77c3.54-.088 9.293-.265 9.293-6.72 0-6.014-5.221-6.28-8.23-6.28H14.95zm0 24.32v15.123h10.885c5.222-.088 12.037-.265 12.037-7.429 0-7.516-6.195-7.605-9.381-7.694H14.95z" fill="#FFF"/><path d="M0 71.134h53.157v12.114H0V71.134z" fill="#FB4D42"/></g></svg>', b = ":host{display:block;container:cob-unavfooter/inline-size}.cob-unavfooter{box-sizing:border-box;background-color:var(--cob-color-charles-blue, #091f2f);padding:var(--cob-space-400, 2rem) var(--cob-space-250, 1.25rem)}.cob-unavfooter__inner{display:flex;align-items:flex-start;gap:var(--cob-space-300, 1.5rem)}.cob-unavfooter__mark{flex:0 0 auto;width:53px;height:82px;line-height:0}.cob-unavfooter__mark svg{display:block;width:53px;height:82px}.cob-unavfooter__nav{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:var(--cob-space-150, .75rem);min-width:0}.cob-unavfooter__links{display:contents;list-style:none;margin:0;padding:0}.cob-unavfooter__links>li{display:flex;margin:0;padding:0;list-style:none}cob-button.cob-unavfooter__link,cob-button.cob-unavfooter__311{--cob-button-color: var(--cob-color-blue-100, #c7e1f8);--cob-button-color--hover: var(--cob-color-blue-100, #c7e1f8);--cob-button-color--active: var(--cob-color-blue-100, #c7e1f8);--cob-button-background-color: var(--cob-color-transparent, #ffffff00);--cob-button-background-color--hover: var(--cob-color-transparent, #ffffff00);--cob-button-background-color--active: var( --cob-color-transparent, #ffffff00 );--_cob-button-font-size: var(--cob-font-size-ui-sm, .875rem);--_cob-button-font-weight: var(--cob-font-weight-semibold, 600);--_cob-button-line-height: var(--cob-font-lineheight-ui-sm, 1.5rem);--_cob-button-padding--y: var(--cob-space-150, .75rem);--_cob-button-padding--x: var(--cob-space-200, 1rem);--_cob-button-outline-color: var(--cob-color-focus-reverse, #5fa9ea);letter-spacing:var(--cob-font-letterspacing-ui-sm, .003rem);white-space:nowrap;text-underline-offset:auto;text-underline-position:from-font;text-decoration-skip-ink:auto}cob-button.cob-unavfooter__311{--cob-button-color: #fcb61a;--cob-button-color--hover: #fcb61a;--cob-button-color--active: #fcb61a}@container cob-unavfooter (width >= 769px){.cob-unavfooter{padding:var(--cob-space-400, 2rem)}.cob-unavfooter__inner{align-items:center}.cob-unavfooter__nav{display:contents}.cob-unavfooter__links{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;align-content:center;gap:var(--cob-space-100, .5rem) var(--cob-space-300, 1.5rem);min-width:0}.cob-unavfooter__311{flex:0 0 auto}}@container cob-unavfooter (width >= 1281px){.cob-unavfooter{padding-inline:var(--cob-space-800, 4rem)}}", f = [
14
+ {
15
+ label: "Privacy Policy",
16
+ href: "https://www.boston.gov/government/cabinets/innovation-and-technology/terms-use-and-privacy-policy-city-boston-digital"
17
+ },
18
+ {
19
+ label: "Vulnerability Disclosure",
20
+ href: "https://docs.google.com/forms/d/e/1FAIpQLSfWrMpJC1kZAhzJ43lAO8uWn9tjEqvTdfBprJZnGKJLt1uygg/viewform",
21
+ external: !0
22
+ },
23
+ {
24
+ label: "Public records",
25
+ href: "https://bostonma.govqa.us/WEBAPP/_rs/(S(den310hnrpqz2rzh5lgbgsby))/SupportHome.aspx",
26
+ external: !0
27
+ },
28
+ {
29
+ label: "Accessibility",
30
+ href: "https://www.boston.gov/departments/language-and-communications-access/notice-accommodations"
31
+ },
32
+ {
33
+ label: "Contact Us",
34
+ href: "https://www.boston.gov/departments/mayors-office/contact-boston-city-hall"
35
+ }
36
+ ], n = class n extends i {
37
+ _parseSvg(o) {
38
+ return new DOMParser().parseFromString(o, "image/svg+xml").documentElement;
15
39
  }
16
40
  _getLogo() {
17
- return this._parseSvg(c);
41
+ return this._parseSvg(l);
18
42
  }
19
- get _circle311DataUri() {
20
- return `url("data:image/svg+xml,${encodeURIComponent(l)}")`;
43
+ _renderLink(o, r, a, c = !1) {
44
+ return t`
45
+ <cob-button
46
+ class=${a}
47
+ variant="text"
48
+ inverted
49
+ label=${o}
50
+ href=${r}
51
+ target=${c ? "_blank" : "_self"}
52
+ ></cob-button>
53
+ `;
21
54
  }
22
55
  render() {
23
- return a`
24
- <footer
25
- class="cob-unavfooter"
26
- style="--_cob-unavfooter-311-circle: ${this._circle311DataUri}"
27
- >
56
+ return t`
57
+ <footer class="cob-unavfooter">
28
58
  <div class="cob-unavfooter__inner">
29
59
  <div class="cob-unavfooter__mark" aria-hidden="true">
30
60
  ${this._getLogo()}
31
61
  </div>
32
- <nav aria-label="Footer">
62
+ <nav class="cob-unavfooter__nav" aria-label="Footer">
33
63
  <ul class="cob-unavfooter__links">
34
- <li>
35
- <a
36
- href="https://www.boston.gov/government/cabinets/innovation-and-technology/terms-use-and-privacy-policy-city-boston-digital"
37
- >Privacy Policy</a
38
- >
39
- </li>
40
- <li>
41
- <a
42
- href="https://docs.google.com/forms/d/e/1FAIpQLSfWrMpJC1kZAhzJ43lAO8uWn9tjEqvTdfBprJZnGKJLt1uygg/viewform"
43
- target="_blank"
44
- rel="noopener noreferrer"
45
- >Vulnerability Disclosure</a
46
- >
47
- </li>
48
- <li>
49
- <a
50
- href="https://bostonma.govqa.us/WEBAPP/_rs/(S(den310hnrpqz2rzh5lgbgsby))/SupportHome.aspx"
51
- target="_blank"
52
- rel="noopener noreferrer"
53
- >Public records</a
54
- >
55
- </li>
56
- <li>
57
- <a
58
- href="https://www.boston.gov/departments/language-and-communications-access/notice-accommodations"
59
- >Accessibility</a
60
- >
61
- </li>
62
- <li>
63
- <a
64
- href="https://www.boston.gov/departments/mayors-office/contact-boston-city-hall"
65
- >Contact Us</a
66
- >
67
- </li>
64
+ ${f.map(
65
+ (o) => t`
66
+ <li>
67
+ ${this._renderLink(
68
+ o.label,
69
+ o.href,
70
+ "cob-unavfooter__link",
71
+ o.external
72
+ )}
73
+ </li>
74
+ `
75
+ )}
68
76
  </ul>
77
+ ${this._renderLink(
78
+ "BOS:311 Report an issue",
79
+ "https://www.cityofboston.gov/311/",
80
+ "cob-unavfooter__311",
81
+ !0
82
+ )}
69
83
  </nav>
70
- <ul class="cob-unavfooter__311">
71
- <li>
72
- <a
73
- class="cob-unavfooter__311-link"
74
- href="https://www.cityofboston.gov/311/"
75
- target="_blank"
76
- rel="noopener noreferrer"
77
- >
78
- <span
79
- class="cob-unavfooter__311-circle"
80
- aria-hidden="true"
81
- ></span>
82
- <span class="cob-unavfooter__311-label">BOS:311</span>
83
- <span class="cob-unavfooter__311-sep"> - </span>
84
- <span class="cob-unavfooter__311-text">Report an issue</span>
85
- </a>
86
- </li>
87
- </ul>
88
84
  </div>
89
85
  </footer>
90
86
  `;
91
87
  }
92
88
  };
93
- e.styles = r(i);
94
- let o = e;
95
- customElements.get("cob-unavfooter") || customElements.define("cob-unavfooter", o);
89
+ n.styles = s(b);
90
+ let e = n;
91
+ customElements.get("cob-unavfooter") || customElements.define("cob-unavfooter", e);
96
92
  export {
97
- o as CobUnavFooter
93
+ e as CobUnavFooter
98
94
  };
99
95
  //# sourceMappingURL=cob-unavfooter.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cob-unavfooter.js","sources":["../src/cob-unav.logo.ts","../src/cob-unav.311.ts","../src/cob-unavfooter.ts"],"sourcesContent":["export default `<svg width=\"54\" height=\"84\" viewBox=\"0 0 54 84\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M.082 0h24.162c6.549 0 12.478.265 16.284 1.503 7.7 2.477 10.797 8.578 10.797 14.504 0 3.36-.885 5.394-1.15 6.014-2.832 6.367-8.85 7.605-12.213 8.312 3.805.62 8.85 1.416 12.301 5.307 2.213 2.388 3.452 5.836 3.452 9.374 0 4.864-2.566 11.673-10.355 15.123-4.69 2.034-9.735 2.299-16.904 2.299H.082V0zm14.869 11.673v13h11.77c3.54-.088 9.293-.265 9.293-6.72 0-6.014-5.221-6.28-8.23-6.28H14.95zm0 24.32v15.123h10.885c5.222-.088 12.037-.265 12.037-7.429 0-7.516-6.195-7.605-9.381-7.694H14.95z\" fill=\"#FFF\"/><path d=\"M0 71.134h53.157v12.114H0V71.134z\" fill=\"#FB4D42\"/></g></svg>`;\n","export default `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"82\" height=\"164\"> <g fill=\"none\" fill-rule=\"evenodd\"> <circle cx=\"41\" cy=\"41\" r=\"41\" fill=\"#FCB61A\"/> <g fill=\"#FFF\"> <path d=\"M17 23.2h4.4c.3 0 .7.2 1 .4.3.2.6.4.7.7.3.3.4.6.4 1 0 .6 0 1-.4 1.3-.3.4-.6.6-1 .7l.7.3c.2 0 .4.3.6.5l.4.7.2.8c0 .5-.2.8-.4 1-.2.5-.5.7-.8 1l-1 .3h-4.9v-8.6zm1.8 3.5h1.9l.4-.2c.2 0 .3-.2.4-.3v-.5-.4L21 25h-.4c0-.2-.3-.2-.4-.2h-1.4v2zm0 3.6H21c.2 0 .4 0 .5-.2 0 0 .2 0 .3-.2v-.5-.5l-.4-.3c-.2 0-.4 0-.6-.2h-2v2zM40.3 25.3c-.2 0-.4-.3-.6-.4l-.7-.2h-.4s-.3 0-.4.2c0 0-.2 0-.3.3-.2 0-.2.2-.2.3 0 .3 0 .5.3.6.3 0 .5.2.8.3l1 .3.7.4c.3 0 .6.3.7.6.2.3.3.7.3 1 0 .6 0 1-.2 1.3l-.7 1c-.3 0-.6.3-1 .4l-1.2.2c-.5 0-1 0-1.5-.3-.5 0-1-.4-1.3-.7l1.3-1.4c0 .2.4.4.6.5.3.2.6.2 1 .2h.3l.3-.3c.2 0 .3 0 .3-.2V29v-.5c-.3 0-.6-.2-.8-.3l-1-.3-1-.5-.6-.7c-.2-.2-.3-.6-.3-1s0-.8.2-1c.2-.5.4-.7.7-1 .2-.2.5-.3 1-.4l1-.2c.5 0 1 0 1.3.2.5 0 1 .3 1.2.6l-1.2 1.3M34 27.5c0 2.4-1.8 4.3-4.2 4.3-2.5 0-4.4-2-4.4-4.3 0-2.4 2-4.3 4.4-4.3 2.4 0 4.3 2 4.3 4.3m-1.8 0c0-1.3-1-2.4-2.4-2.4s-2.5 1.2-2.5 2.5c0 1.4 1 2.4 2.5 2.4 1.3 0 2.4-1 2.4-2.5M45 26.2c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.6 1.2 1.3 0 .8-.6 1.4-1.3 1.4m0 5.4c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.5 1.2 1.2 0 .8-.6 1.4-1.3 1.4M34.6 52c0 4.5-4 8-9.2 8-5 0-9.3-3.5-9.3-8h5.2c0 2 1.8 3.3 4.2 3.3 2.3 0 4.2-1.2 4.2-3.3 0-3.7-2-4.3-4.2-4.3H20v-4l6.7-5.3h-10V34h17v4.4L27 43.7c4.7 0 7.6 3.4 7.6 8.3M50 34v25h-6V43H38v-4s5.4-.8 5.7-5h6M66 59h-6V43h-5.7v-4s5.4-.8 5.7-5h6v25z\"/> </g> <circle cx=\"41\" cy=\"123\" r=\"41\" fill=\"#FFF\"/> <g fill=\"#FCB61A\"> <path d=\"M17 105.2h4.4c.3 0 .7.2 1 .4.3.2.6.4.7.7.3.3.4.6.4 1 0 .6 0 1-.4 1.3-.3.4-.6.6-1 .7l.7.3c.2 0 .4.3.6.5l.4.7.2.8c0 .5-.2.8-.4 1-.2.5-.5.7-.8 1l-1 .3h-4.9v-8.6zm1.8 3.5h1.9l.4-.2c.2 0 .3-.2.4-.3v-.5-.4l-.3-.3h-.4c0-.2-.3-.2-.4-.2h-1.4v2zm0 3.6H21c.2 0 .4 0 .5-.2 0 0 .2 0 .3-.2v-.5-.5l-.4-.3c-.2 0-.4 0-.6-.2h-2v2zM40.3 107.3c-.2 0-.4-.3-.6-.4l-.7-.2h-.4s-.3 0-.4.2c0 0-.2 0-.3.3-.2 0-.2.2-.2.3 0 .3 0 .5.3.6.3 0 .5.2.8.3l1 .3.7.4c.3 0 .6.3.7.6.2.3.3.7.3 1 0 .6 0 1-.2 1.3l-.7 1c-.3 0-.6.3-1 .4l-1.2.2c-.5 0-1 0-1.5-.3-.5 0-1-.4-1.3-.7l1.3-1.4c0 .2.4.4.6.5.3.2.6.2 1 .2h.3l.3-.3c.2 0 .3 0 .3-.2v-.4-.5c-.3 0-.6-.2-.8-.3l-1-.3-1-.5-.6-.7c-.2-.2-.3-.6-.3-1s0-.8.2-1c.2-.5.4-.7.7-1 .2-.2.5-.3 1-.4l1-.2c.5 0 1 0 1.3.2.5 0 1 .3 1.2.6l-1.2 1.3M34 109.5c0 2.4-1.8 4.3-4.2 4.3-2.5 0-4.4-2-4.4-4.3 0-2.4 2-4.3 4.4-4.3 2.4 0 4.3 2 4.3 4.3m-1.8 0c0-1.3-1-2.4-2.4-2.4s-2.5 1.2-2.5 2.5c0 1.4 1 2.4 2.5 2.4 1.3 0 2.4-1 2.4-2.5M45 108.2c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.6 1.2 1.3 0 .8-.6 1.4-1.3 1.4m0 5.4c-1 0-1.5-.6-1.5-1.4 0-.7.6-1.3 1.4-1.3.6 0 1.2.5 1.2 1.2 0 .8-.6 1.4-1.3 1.4M34.6 134c0 4.5-4 8-9.2 8-5 0-9.3-3.5-9.3-8h5.2c0 2 1.8 3.3 4.2 3.3 2.3 0 4.2-1.2 4.2-3.3 0-3.7-2-4.3-4.2-4.3H20v-4l6.7-5.3h-10V116h17v4.4l-6.6 5.3c4.7 0 7.6 3.4 7.6 8.3M50 116v25h-6v-16H38v-4s5.4-.8 5.7-5h6M66 141h-6v-16h-5.7v-4s5.4-.8 5.7-5h6v25z\"/> </g> </g> </svg>`;\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport cobLogo from \"./cob-unav.logo\";\nimport circle311 from \"./cob-unav.311\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./cob-unavfooter.scss?inline\";\n\n/**\n * Universal COB footer matching boston.gov: Charles Blue bar, “B” mark,\n * legal links, and BOS:311. Required on all COB sites.\n *\n * Place as the last element before `</body>`. No configuration needed.\n *\n * @accessibility\n * - Uses semantic `<footer>` and a labeled navigation region.\n * - All links are keyboard-navigable via Tab.\n * - Visual design meets WCAG 2.2 AA contrast and focus indicator standards.\n *\n * @summary Universal COB footer with boston.gov legal links and BOS:311.\n * @element cob-unavfooter\n *\n * @example Basic\n * ```html\n * <cob-unavfooter></cob-unavfooter>\n * ```\n */\n\nexport class CobUnavFooter extends LitElement {\n static styles = unsafeCSS(styles);\n\n private _parseSvg(svg: string) {\n if (!svg) return null;\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svg, \"image/svg+xml\");\n return svgDoc.documentElement;\n }\n\n private _getLogo() {\n return this._parseSvg(cobLogo);\n }\n\n private get _circle311DataUri() {\n return `url(\"data:image/svg+xml,${encodeURIComponent(circle311)}\")`;\n }\n\n render() {\n return html`\n <footer\n class=\"cob-unavfooter\"\n style=\"--_cob-unavfooter-311-circle: ${this._circle311DataUri}\"\n >\n <div class=\"cob-unavfooter__inner\">\n <div class=\"cob-unavfooter__mark\" aria-hidden=\"true\">\n ${this._getLogo()}\n </div>\n <nav aria-label=\"Footer\">\n <ul class=\"cob-unavfooter__links\">\n <li>\n <a\n href=\"https://www.boston.gov/government/cabinets/innovation-and-technology/terms-use-and-privacy-policy-city-boston-digital\"\n >Privacy Policy</a\n >\n </li>\n <li>\n <a\n href=\"https://docs.google.com/forms/d/e/1FAIpQLSfWrMpJC1kZAhzJ43lAO8uWn9tjEqvTdfBprJZnGKJLt1uygg/viewform\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >Vulnerability Disclosure</a\n >\n </li>\n <li>\n <a\n href=\"https://bostonma.govqa.us/WEBAPP/_rs/(S(den310hnrpqz2rzh5lgbgsby))/SupportHome.aspx\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >Public records</a\n >\n </li>\n <li>\n <a\n href=\"https://www.boston.gov/departments/language-and-communications-access/notice-accommodations\"\n >Accessibility</a\n >\n </li>\n <li>\n <a\n href=\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\"\n >Contact Us</a\n >\n </li>\n </ul>\n </nav>\n <ul class=\"cob-unavfooter__311\">\n <li>\n <a\n class=\"cob-unavfooter__311-link\"\n href=\"https://www.cityofboston.gov/311/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span\n class=\"cob-unavfooter__311-circle\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"cob-unavfooter__311-label\">BOS:311</span>\n <span class=\"cob-unavfooter__311-sep\"> - </span>\n <span class=\"cob-unavfooter__311-text\">Report an issue</span>\n </a>\n </li>\n </ul>\n </div>\n </footer>\n `;\n }\n}\n\nif (!customElements.get(\"cob-unavfooter\")) {\n customElements.define(\"cob-unavfooter\", CobUnavFooter);\n}\n"],"names":["cobLogo","circle311","_CobUnavFooter","LitElement","svg","html","unsafeCSS","styles","CobUnavFooter"],"mappings":";;;;;;;;;;;AAAA,MAAAA,IAAe,4rBCAfC,IAAe,qmLC0BFC,IAAN,MAAMA,UAAsBC,EAAW;AAAA,EAGpC,UAAUC,GAAa;AAC7B,WAAKA,IACU,IAAI,UAAA,EACG,gBAAgBA,GAAK,eAAe,EAC5C,kBAHG;AAAA,EAInB;AAAA,EAEQ,WAAW;AACjB,WAAO,KAAK,UAAUJ,CAAO;AAAA,EAC/B;AAAA,EAEA,IAAY,oBAAoB;AAC9B,WAAO,2BAA2B,mBAAmBC,CAAS,CAAC;AAAA,EACjE;AAAA,EAEA,SAAS;AACP,WAAOI;AAAA;AAAA;AAAA,+CAGoC,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,cAIvD,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6D3B;AACF;AAvFEH,EAAO,SAASI,EAAUC,CAAM;AAD3B,IAAMC,IAANN;AA0FF,eAAe,IAAI,gBAAgB,KACtC,eAAe,OAAO,kBAAkBM,CAAa;"}
1
+ {"version":3,"file":"cob-unavfooter.js","sources":["../src/cob-unav.logo.ts","../src/cob-unavfooter.ts"],"sourcesContent":["export default `<svg width=\"54\" height=\"84\" viewBox=\"0 0 54 84\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M.082 0h24.162c6.549 0 12.478.265 16.284 1.503 7.7 2.477 10.797 8.578 10.797 14.504 0 3.36-.885 5.394-1.15 6.014-2.832 6.367-8.85 7.605-12.213 8.312 3.805.62 8.85 1.416 12.301 5.307 2.213 2.388 3.452 5.836 3.452 9.374 0 4.864-2.566 11.673-10.355 15.123-4.69 2.034-9.735 2.299-16.904 2.299H.082V0zm14.869 11.673v13h11.77c3.54-.088 9.293-.265 9.293-6.72 0-6.014-5.221-6.28-8.23-6.28H14.95zm0 24.32v15.123h10.885c5.222-.088 12.037-.265 12.037-7.429 0-7.516-6.195-7.605-9.381-7.694H14.95z\" fill=\"#FFF\"/><path d=\"M0 71.134h53.157v12.114H0V71.134z\" fill=\"#FB4D42\"/></g></svg>`;\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport \"@cobwds/cob-button\";\nimport cobLogo from \"./cob-unav.logo\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./cob-unavfooter.scss?inline\";\n\nconst footerLinks = [\n {\n label: \"Privacy Policy\",\n href: \"https://www.boston.gov/government/cabinets/innovation-and-technology/terms-use-and-privacy-policy-city-boston-digital\",\n },\n {\n label: \"Vulnerability Disclosure\",\n href: \"https://docs.google.com/forms/d/e/1FAIpQLSfWrMpJC1kZAhzJ43lAO8uWn9tjEqvTdfBprJZnGKJLt1uygg/viewform\",\n external: true,\n },\n {\n label: \"Public records\",\n href: \"https://bostonma.govqa.us/WEBAPP/_rs/(S(den310hnrpqz2rzh5lgbgsby))/SupportHome.aspx\",\n external: true,\n },\n {\n label: \"Accessibility\",\n href: \"https://www.boston.gov/departments/language-and-communications-access/notice-accommodations\",\n },\n {\n label: \"Contact Us\",\n href: \"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\",\n },\n];\n\n/**\n * Universal COB footer matching boston.gov: Charles Blue bar, “B” mark,\n * legal links, and BOS:311. Required on all COB sites.\n *\n * Links are `cob-button` text links. They wrap beside the mark. When the\n * footer is narrower than 769px, BOS:311 wraps with those links. From 769px,\n * BOS:311 stays at the end of the bar. Horizontal padding increases again\n * from 1281px.\n *\n * Place as the last element before `</body>`. No configuration needed.\n *\n * @accessibility\n * - Uses semantic `<footer>` and a labeled navigation region.\n * - All links are keyboard-navigable via Tab.\n * - Visual design meets WCAG 2.2 AA contrast and focus indicator standards.\n *\n * @summary Universal COB footer with boston.gov legal links and BOS:311.\n * @element cob-unavfooter\n *\n * @example Basic\n * ```html\n * <cob-unavfooter></cob-unavfooter>\n * ```\n */\n\nexport class CobUnavFooter extends LitElement {\n static styles = unsafeCSS(styles);\n\n private _parseSvg(svg: string) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svg, \"image/svg+xml\");\n return svgDoc.documentElement;\n }\n\n private _getLogo() {\n return this._parseSvg(cobLogo);\n }\n\n private _renderLink(\n label: string,\n href: string,\n className: string,\n external = false,\n ) {\n return html`\n <cob-button\n class=${className}\n variant=\"text\"\n inverted\n label=${label}\n href=${href}\n target=${external ? \"_blank\" : \"_self\"}\n ></cob-button>\n `;\n }\n\n render() {\n return html`\n <footer class=\"cob-unavfooter\">\n <div class=\"cob-unavfooter__inner\">\n <div class=\"cob-unavfooter__mark\" aria-hidden=\"true\">\n ${this._getLogo()}\n </div>\n <nav class=\"cob-unavfooter__nav\" aria-label=\"Footer\">\n <ul class=\"cob-unavfooter__links\">\n ${footerLinks.map(\n (link) => html`\n <li>\n ${this._renderLink(\n link.label,\n link.href,\n \"cob-unavfooter__link\",\n link.external,\n )}\n </li>\n `,\n )}\n </ul>\n ${this._renderLink(\n \"BOS:311 Report an issue\",\n \"https://www.cityofboston.gov/311/\",\n \"cob-unavfooter__311\",\n true,\n )}\n </nav>\n </div>\n </footer>\n `;\n }\n}\n\nif (!customElements.get(\"cob-unavfooter\")) {\n customElements.define(\"cob-unavfooter\", CobUnavFooter);\n}\n"],"names":["cobLogo","footerLinks","_CobUnavFooter","LitElement","svg","label","href","className","external","html","link","unsafeCSS","styles","CobUnavFooter"],"mappings":";;;;;;;;;;;;AAAA,MAAAA,IAAe,mhGCMTC,IAAc;AAAA,EAClB;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,GA2BaC,IAAN,MAAMA,UAAsBC,EAAW;AAAA,EAGpC,UAAUC,GAAa;AAG7B,WAFe,IAAI,UAAA,EACG,gBAAgBA,GAAK,eAAe,EAC5C;AAAA,EAChB;AAAA,EAEQ,WAAW;AACjB,WAAO,KAAK,UAAUJ,CAAO;AAAA,EAC/B;AAAA,EAEQ,YACNK,GACAC,GACAC,GACAC,IAAW,IACX;AACA,WAAOC;AAAA;AAAA,gBAEKF,CAAS;AAAA;AAAA;AAAA,gBAGTF,CAAK;AAAA,eACNC,CAAI;AAAA,iBACFE,IAAW,WAAW,OAAO;AAAA;AAAA;AAAA,EAG5C;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA;AAAA,cAIG,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,gBAIbR,EAAY;AAAA,MACZ,CAACS,MAASD;AAAA;AAAA,sBAEJ,KAAK;AAAA,QACLC,EAAK;AAAA,QACLA,EAAK;AAAA,QACL;AAAA,QACAA,EAAK;AAAA,MAAA,CACN;AAAA;AAAA;AAAA,IAAA,CAGN;AAAA;AAAA,cAED,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA;AAAA;AAAA;AAAA;AAAA,EAKX;AACF;AA/DER,EAAO,SAASS,EAAUC,CAAM;AAD3B,IAAMC,IAANX;AAkEF,eAAe,IAAI,gBAAgB,KACtC,eAAe,OAAO,kBAAkBW,CAAa;"}
@@ -0,0 +1 @@
1
+ export * from "./cob-unavfooter";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cobwds/cob-unavfooter",
3
- "version": "1.19.3",
3
+ "version": "1.23.1",
4
4
  "description": "The Unavfooter component from the City of Boston Web Design System.",
5
5
  "module": "dist/cob-unavfooter.js",
6
6
  "types": "dist/index.d.ts",
@@ -27,6 +27,9 @@
27
27
  "typescript": "^5.9.3",
28
28
  "vite": "^7.3.1"
29
29
  },
30
+ "dependencies": {
31
+ "@cobwds/cob-button": "^1.19.4"
32
+ },
30
33
  "keywords": [
31
34
  "cobwds",
32
35
  "city-of-boston",