@mdn/fred 0.0.1

package/components/article-footer/server.js

@@ -0,0 +1,208 @@
+import { html } from "lit";
+
+import { HeadingAnchor } from "../heading-anchor/server.js";
+import { ServerComponent } from "../server/index.js";
+
+import svg from "./article-footer.svg?lit";
+
+export class ArticleFooter extends ServerComponent {
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   */
+  render(context) {
+    const { doc } = context;
+
+    if (!doc) {
+      return;
+    }
+
+    return html`<section
+      class="content-section article-footer"
+      aria-labelledby="article_footer"
+    >
+      <div class="article-footer__inner">
+        <div class="article-footer__svg-container">${svg}</div>
+        ${HeadingAnchor.render(
+          2,
+          "article_footer",
+          context.l10n`Help improve MDN`,
+        )}
+        <mdn-content-feedback locale=${context.locale}></mdn-content-feedback>
+        ${Contribute(context)} ${LastModified(context)} ${Links(context)}
+      </div>
+    </section>`;
+  }
+}
+
+/**
+ * @param {import("@fred").Context<import("@rari").DocPage>} context
+ */
+function Contribute(context) {
+  return html`<a
+    class="article-footer__contribute external"
+    href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md"
+    title=${context.l10n`This will take you to our contribution guidelines on GitHub.`}
+    target="_blank"
+    rel="noopener noreferrer"
+    >${context.l10n`Learn how to contribute`}</a
+  >`;
+}
+
+/**
+ * @param {import("@fred").Context<import("@rari").DocPage>} context
+ */
+function LastModified(context) {
+  const { doc, locale } = context;
+
+  if (locale === "de") {
+    return html`Diese Seite wurde automatisch aus dem Englischen übersetzt.`;
+  }
+
+  const date = new Date(doc.modified);
+  const formattedDate = date.toLocaleString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
+  return html`<p class="article-footer__last-modified">
+    ${context.l10n.raw({
+      id: "article-footer-last-modified",
+      args: {
+        date: formattedDate,
+      },
+      elements: {
+        date: {
+          tag: "time",
+          datetime: doc.modified,
+        },
+        contributors: {
+          tag: "a",
+          href: `${doc.mdn_url}/contributors.txt`,
+        },
+      },
+    })}
+  </p>`;
+}
+
+/**
+ * @param {import("@fred").Context<import("@rari").DocPage>} context
+ */
+function Links(context) {
+  return html`<div class="article-footer__links">
+    ${GitHubSourceLink(context)} • ${GitHubIssueLink(context)}
+  </div>`;
+}
+
+/**
+ * @param {import("@fred").Context<import("@rari").DocPage>} context
+ */
+function GitHubSourceLink(context) {
+  const {
+    doc: {
+      locale,
+      source: { folder, github_url },
+    },
+  } = context;
+
+  return html`<a
+    class="external"
+    href=${`${github_url}?plain=1`}
+    title=${context.l10n.raw({
+      id: "article-footer-source-title",
+      args: {
+        folder,
+      },
+    })}
+    target="_blank"
+    rel="noopener"
+    >${locale === "de"
+      ? "Übersetzung auf GitHub anzeigen"
+      : context.l10n`View this page on GitHub`}</a
+  >`;
+}
+
+/**
+ * @param {import("@fred").Context<import("@rari").DocPage>} context
+ */
+function GitHubIssueLink(context) {
+  const { doc } = context;
+  const { locale } = doc;
+  const url = new URL("https://github.com/");
+  const sp = new URLSearchParams();
+
+  url.pathname =
+    locale === "en-US"
+      ? "/mdn/content/issues/new"
+      : locale === "de"
+        ? "/mdn/translated-content-de/issues/new"
+        : "/mdn/translated-content/issues/new";
+
+  sp.set(
+    "template",
+    locale === "en-US"
+      ? "page-report.yml"
+      : `page-report-${locale.toLowerCase()}.yml`,
+  );
+  sp.set("mdn-url", `https://developer.mozilla.org${doc.mdn_url}`);
+  sp.set("metadata", fillMetadata(METADATA_TEMPLATE, doc));
+
+  url.search = sp.toString();
+
+  return html`<a
+    class="external"
+    href=${url.href}
+    title=${context.l10n`This will take you to GitHub to file a new issue.`}
+    target="_blank"
+    rel="noopener"
+    >${locale === "de"
+      ? "Fehler mit dieser Übersetzung melden"
+      : context.l10n`Report a problem with this content`}</a
+  >`;
+}
+
+const METADATA_TEMPLATE = `
+<!-- Do not make changes below this line -->
+<details>
+<summary>Page report details</summary>
+
+* Folder: \`$FOLDER\`
+* MDN URL: https://developer.mozilla.org$PATHNAME
+* GitHub URL: $GITHUB_URL
+* Last commit: $LAST_COMMIT_URL
+* Document last modified: $DATE
+
+</details>
+`;
+
+/**
+ *
+ * @param {string} template
+ * @param {import("@rari").Doc} doc
+ * @returns
+ */
+function fillMetadata(template, doc) {
+  let { folder, github_url, last_commit_url } = doc.source;
+
+  if (doc.locale === "de") {
+    github_url = github_url.replace(
+      "/translated-content/",
+      "/translated-content-de/",
+    );
+    last_commit_url = last_commit_url.replace(
+      "/translated-content/",
+      "/translated-content-de/",
+    );
+  }
+
+  return template
+    .replaceAll("$PATHNAME", doc.mdn_url)
+    .replaceAll("$FOLDER", folder)
+    .replaceAll("$GITHUB_URL", github_url)
+    .replaceAll("$LAST_COMMIT_URL", last_commit_url)
+    .replaceAll(
+      "$DATE",
+      doc.modified ? new Date(doc.modified).toISOString() : "*date not known*",
+    )
+    .trim();
+}

package/components/badge/global.css

@@ -0,0 +1,28 @@
+/*
+  Badge legacy.
+
+  To be removed when rari no longer renders these.
+
+  Note: The selectors are intentionally explicit to discourage use.
+*/
+.badge.inline {
+  /* See https://github.com/mdn/rari/blob/5a2ead64bb8d4f46f9c548b942072838fb686281/crates/rari-doc/src/templ/templs/inline_labels.rs#L16-L21 */
+  &.optional,
+  /* See https://github.com/mdn/rari/blob/5a2ead64bb8d4f46f9c548b942072838fb686281/crates/rari-doc/src/templ/templs/inline_labels.rs#L16-L21 */
+  &.readonly,
+  /* See https://github.com/mdn/rari/blob/5a2ead64bb8d4f46f9c548b942072838fb686281/crates/rari-doc/src/templ/templs/inline_labels.rs#L8-L13 */
+  &.secure {
+    padding: 0.25em 0.5em;
+
+    font-size: var(--font-size-small);
+
+    vertical-align: text-top;
+
+    color: var(--color-text-secondary);
+
+    white-space: nowrap;
+
+    border: 1px solid var(--color-border-primary);
+    border-radius: 1em;
+  }
+}

package/components/banner/server.css

@@ -0,0 +1,11 @@
+.banner {
+  padding: 16px;
+
+  background-color: var(--color-background-secondary);
+  background-image: repeating-linear-gradient(
+    115deg,
+    var(--color-background-primary) 0 24px,
+    var(--color-background-secondary) 24px 48px
+  );
+  border-block-end: 1px solid var(--color-border-primary);
+}

package/components/banner/server.js

@@ -0,0 +1,9 @@
+import { html } from "lit";
+
+import { ServerComponent } from "../server/index.js";
+
+export class Banner extends ServerComponent {
+  render() {
+    return html`<div class="banner">Banner</div>`;
+  }
+}

package/components/baseline-indicator/icons/browser/chrome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><g clip-path="url(#a)" transform="translate(-100 -100)"><path fill="#fff" d="M150.001 174.999c13.808 0 25.001-11.194 25.001-25.002 0-13.808-11.193-25.001-25.001-25.001-13.808 0-25.001 11.193-25.001 25.001 0 13.808 11.193 25.002 25.001 25.002z"/><path fill="#229342" d="m128.349 162.504-21.648-37.496a49.994 49.994 0 0 0 18.302 68.299A49.981 49.981 0 0 0 150.004 200l21.648-37.496v-.006a24.992 24.992 0 0 1-34.152 9.16 24.989 24.989 0 0 1-9.151-9.153z"/><path fill="#fbc116" d="m171.651 162.502-21.648 37.496A49.984 49.984 0 0 0 193.304 175a49.995 49.995 0 0 0-.008-50h-43.297l-.005.004a24.995 24.995 0 0 1 21.657 37.499z"/><path fill="#1a73e8" d="M150.001 169.796c10.931 0 19.793-8.862 19.793-19.793 0-10.932-8.862-19.793-19.793-19.793s-19.793 8.861-19.793 19.793c0 10.931 8.862 19.793 19.793 19.793z"/><path fill="#e33b2e" d="M150.001 125.002h43.296a49.99 49.99 0 0 0-86.596.005l21.649 37.496.005.004a25.004 25.004 0 0 1-.008-25.005 24.996 24.996 0 0 1 21.655-12.501z"/></g><defs><clipPath id="a"><path fill="#fff" d="M100 100h100v100H100z"/></clipPath></defs></svg>

package/components/baseline-indicator/icons/browser/edge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 99.957"><g clip-path="url(#a)" transform="translate(-100 -300)"><path fill="url(#b)" d="M190.273 374.414a36.57 36.57 0 0 1-4.14 1.836 39.793 39.793 0 0 1-14.024 2.5c-18.476 0-34.57-12.695-34.57-29.023a12.307 12.307 0 0 1 6.406-10.665c-16.718.704-21.015 18.126-21.015 28.321 0 28.906 26.601 31.797 32.343 31.797 3.086 0 7.735-.899 10.547-1.797l.508-.156a50.122 50.122 0 0 0 26.016-20.625 1.565 1.565 0 0 0-2.071-2.188z" style="fill:url(#b)"/><path fill="url(#c)" d="M190.273 374.414a36.57 36.57 0 0 1-4.14 1.836 39.793 39.793 0 0 1-14.024 2.5c-18.476 0-34.57-12.695-34.57-29.023a12.307 12.307 0 0 1 6.406-10.665c-16.718.704-21.015 18.126-21.015 28.321 0 28.906 26.601 31.797 32.343 31.797 3.086 0 7.735-.899 10.547-1.797l.508-.156a50.122 50.122 0 0 0 26.016-20.625 1.565 1.565 0 0 0-2.071-2.188z" opacity=".35" style="fill:url(#c)"/><path fill="url(#d)" d="M141.289 394.258a30.949 30.949 0 0 1-8.867-8.32 31.524 31.524 0 0 1 11.523-46.875c1.25-.586 3.321-1.602 6.094-1.563a12.655 12.655 0 0 1 10.039 5.078 12.463 12.463 0 0 1 2.461 7.305c0-.078 9.57-31.094-31.25-31.094-17.148 0-31.25 16.25-31.25 30.547a50.849 50.849 0 0 0 4.727 21.875 49.998 49.998 0 0 0 61.093 26.172 29.498 29.498 0 0 1-24.531-3.125z" style="fill:url(#d)"/><path fill="url(#e)" d="M141.289 394.258a30.949 30.949 0 0 1-8.867-8.32 31.524 31.524 0 0 1 11.523-46.875c1.25-.586 3.321-1.602 6.094-1.563a12.655 12.655 0 0 1 10.039 5.078 12.463 12.463 0 0 1 2.461 7.305c0-.078 9.57-31.094-31.25-31.094-17.148 0-31.25 16.25-31.25 30.547a50.849 50.849 0 0 0 4.727 21.875 49.998 49.998 0 0 0 61.093 26.172 29.498 29.498 0 0 1-24.531-3.125z" opacity=".41" style="fill:url(#e)"/><path fill="url(#f)" d="M159.531 358.125c-.351.391-1.328.977-1.328 2.187 0 1.016.664 2.032 1.875 2.852 5.586 3.906 16.172 3.359 16.211 3.359a23.272 23.272 0 0 0 11.836-3.242A23.98 23.98 0 0 0 200 342.617c.117-8.75-3.125-14.57-4.414-17.148C187.266 309.297 169.414 300 150 300a50.002 50.002 0 0 0-50 49.297c.195-14.258 14.375-25.781 31.25-25.781 1.367 0 9.18.117 16.406 3.906a28.36 28.36 0 0 1 12.071 11.445c2.382 4.141 2.812 9.414 2.812 11.524 0 2.109-1.055 5.195-3.047 7.773z" style="fill:url(#f)"/><path fill="url(#g)" d="M159.531 358.125c-.351.391-1.328.977-1.328 2.187 0 1.016.664 2.032 1.875 2.852 5.586 3.906 16.172 3.359 16.211 3.359a23.272 23.272 0 0 0 11.836-3.242A23.98 23.98 0 0 0 200 342.617c.117-8.75-3.125-14.57-4.414-17.148C187.266 309.297 169.414 300 150 300a50.002 50.002 0 0 0-50 49.297c.195-14.258 14.375-25.781 31.25-25.781 1.367 0 9.18.117 16.406 3.906a28.36 28.36 0 0 1 12.071 11.445c2.382 4.141 2.812 9.414 2.812 11.524 0 2.109-1.055 5.195-3.047 7.773z" style="fill:url(#g)"/></g><defs><radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="matrix(37.2656 0 0 35.4023 161.406 369.666)" gradientUnits="userSpaceOnUse"><stop offset=".7" stop-opacity="0"/><stop offset=".9" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="matrix(8.39058 -55.37816 44.73998 6.77875 127.561 377.71)" gradientUnits="userSpaceOnUse"><stop offset=".8" stop-opacity="0"/><stop offset=".9" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="matrix(-3.16249 79.06248 -168.38635 -6.73542 110.113 318.483)" gradientUnits="userSpaceOnUse"><stop stop-color="#35C1F1"/><stop offset=".1" stop-color="#34C1ED"/><stop offset=".2" stop-color="#2FC2DF"/><stop offset=".3" stop-color="#2BC3D2"/><stop offset=".7" stop-color="#36C752"/></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientTransform="matrix(10.64218 36.48749 -29.67168 8.65424 193.773 330.195)" gradientUnits="userSpaceOnUse"><stop stop-color="#66EB6E"/><stop offset="1" stop-color="#66EB6E" stop-opacity="0"/></radialGradient><linearGradient id="b" x1="122.93" x2="192.617" y1="369.141" y2="369.141" gradientUnits="userSpaceOnUse"><stop stop-color="#0C59A4"/><stop offset="1" stop-color="#114A8B"/></linearGradient><linearGradient id="d" x1="159.648" x2="116.172" y1="338.906" y2="386.289" gradientUnits="userSpaceOnUse"><stop stop-color="#1B9DE2"/><stop offset=".2" stop-color="#1595DF"/><stop offset=".7" stop-color="#0680D7"/><stop offset="1" stop-color="#0078D4"/></linearGradient><clipPath id="a"><path fill="#fff" d="M100 300h100v100H100z"/></clipPath></defs></svg>

package/components/baseline-indicator/icons/browser/firefox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 102.991"><g clip-path="url(#a)" transform="translate(-100 -500)"><path fill="url(#b)" d="M196.375 534.585c-2.175-5.22-6.587-10.855-10.042-12.637a51.752 51.752 0 0 1 5.069 15.149l.009.084c-5.659-14.067-15.254-19.748-23.094-32.102-.396-.625-.793-1.251-1.179-1.911a15.483 15.483 0 0 1-.551-1.031 9.027 9.027 0 0 1-.747-1.977.13.13 0 0 0-.114-.129.167.167 0 0 0-.094 0c-.006 0-.017.011-.024.014-.008.003-.025.014-.037.019l.02-.033c-12.574 7.343-16.843 20.933-17.23 27.734a25.086 25.086 0 0 0-13.782 5.296 14.975 14.975 0 0 0-1.292-.976 23.088 23.088 0 0 1-.14-12.203 37.051 37.051 0 0 0-12.05 9.288h-.023c-1.984-2.509-1.844-10.779-1.731-12.506a8.935 8.935 0 0 0-1.671.885 36.321 36.321 0 0 0-4.893 4.18 43.551 43.551 0 0 0-4.679 5.6v.007-.009a42.122 42.122 0 0 0-6.717 15.124l-.067.33c-.094.439-.434 2.639-.492 3.117 0 .037-.008.072-.012.109a47.539 47.539 0 0 0-.812 6.883v.258a49.86 49.86 0 0 0 13.221 33.719 50.12 50.12 0 0 0 32.593 15.943 50.157 50.157 0 0 0 34.827-10.216 49.912 49.912 0 0 0 18.749-31.003c.084-.645.152-1.282.227-1.933a51.224 51.224 0 0 0-3.247-25.081zm-57.696 39.084c.233.112.453.233.693.34l.035.022a25.912 25.912 0 0 1-.728-.362zm52.734-36.474v-.048l.009.053z" style="fill:url(#b)"/><path fill="url(#c)" d="M196.375 534.585c-2.175-5.22-6.587-10.855-10.042-12.637a51.782 51.782 0 0 1 5.069 15.149v.048l.009.053a45.106 45.106 0 0 1-1.557 33.698c-5.738 12.278-19.62 24.862-41.358 24.244-23.481-.663-44.173-18.047-48.035-40.81-.704-3.59 0-5.41.354-8.328a37.133 37.133 0 0 0-.805 6.889v.258a49.855 49.855 0 0 0 13.222 33.719 50.11 50.11 0 0 0 32.593 15.943 50.156 50.156 0 0 0 34.826-10.216 49.905 49.905 0 0 0 18.749-31.003c.084-.644.152-1.282.227-1.932a51.221 51.221 0 0 0-3.247-25.081z" style="fill:url(#c)"/><path fill="url(#d)" d="M196.375 534.585c-2.175-5.22-6.587-10.855-10.042-12.637a51.782 51.782 0 0 1 5.069 15.149v.048l.009.053a45.106 45.106 0 0 1-1.557 33.698c-5.738 12.278-19.62 24.862-41.358 24.244-23.481-.663-44.173-18.047-48.035-40.81-.704-3.59 0-5.41.354-8.328a37.133 37.133 0 0 0-.805 6.889v.258a49.855 49.855 0 0 0 13.222 33.719 50.11 50.11 0 0 0 32.593 15.943 50.156 50.156 0 0 0 34.826-10.216 49.905 49.905 0 0 0 18.749-31.003c.084-.644.152-1.282.227-1.932a51.221 51.221 0 0 0-3.247-25.081z" style="fill:url(#d)"/><path fill="url(#e)" d="M172.041 540.446c.108.076.209.152.311.228a27.168 27.168 0 0 0-4.65-6.048c-15.564-15.522-4.077-33.647-2.141-34.575l.019-.028c-12.574 7.343-16.842 20.933-17.23 27.735.584-.04 1.163-.089 1.759-.089a25.31 25.31 0 0 1 12.693 3.439 25.229 25.229 0 0 1 9.239 9.336z" style="fill:url(#e)"/><path fill="url(#f)" d="M150.135 543.551c-.082 1.242-4.482 5.525-6.02 5.525-14.234 0-16.546 8.588-16.546 8.588.631 7.232 5.683 13.191 11.792 16.334.279.145.561.275.844.402.49.217.98.417 1.47.601a22.343 22.343 0 0 0 6.514 1.253c24.954 1.167 29.784-29.757 11.778-38.736a17.321 17.321 0 0 1 12.07 2.923 25.229 25.229 0 0 0-9.239-9.336 25.317 25.317 0 0 0-12.693-3.439c-.594 0-1.175.049-1.759.089a25.082 25.082 0 0 0-13.781 5.296c.763.644 1.625 1.504 3.439 3.289 3.397 3.337 12.109 6.795 12.129 7.201z" style="fill:url(#f)"/><path fill="url(#g)" d="M150.135 543.551c-.082 1.242-4.482 5.525-6.02 5.525-14.234 0-16.546 8.588-16.546 8.588.631 7.232 5.683 13.191 11.792 16.334.279.145.561.275.844.402.49.217.98.417 1.47.601a22.343 22.343 0 0 0 6.514 1.253c24.954 1.167 29.784-29.757 11.778-38.736a17.321 17.321 0 0 1 12.07 2.923 25.229 25.229 0 0 0-9.239-9.336 25.317 25.317 0 0 0-12.693-3.439c-.594 0-1.175.049-1.759.089a25.082 25.082 0 0 0-13.781 5.296c.763.644 1.625 1.504 3.439 3.289 3.397 3.337 12.109 6.795 12.129 7.201z" style="fill:url(#g)"/><path fill="url(#h)" d="M132.233 531.403c.406.258.741.482 1.034.684a23.088 23.088 0 0 1-.141-12.203 37.065 37.065 0 0 0-12.05 9.288c.245-.006 7.506-.136 11.157 2.231z" style="fill:url(#h)"/><path fill="url(#i)" d="M100.452 554.333c3.863 22.762 24.554 40.153 48.035 40.809 21.738.614 35.623-11.972 41.358-24.243a45.108 45.108 0 0 0 1.557-33.699v-.048c0-.037-.008-.059 0-.047l.009.083c1.776 11.564-4.121 22.763-13.342 30.35l-.028.064c-17.967 14.596-35.158 8.804-38.633 6.441a25.897 25.897 0 0 1-.728-.362c-10.474-4.993-14.802-14.505-13.872-22.672a12.875 12.875 0 0 1-7.035-1.967 12.829 12.829 0 0 1-4.823-5.472 18.932 18.932 0 0 1 18.405-.737 24.987 24.987 0 0 0 18.793.737c-.019-.406-8.731-3.864-12.128-7.201-1.815-1.784-2.676-2.643-3.44-3.289a14.96 14.96 0 0 0-1.291-.976c-.297-.202-.632-.421-1.034-.684-3.651-2.368-10.912-2.238-11.153-2.231h-.023c-1.984-2.508-1.844-10.778-1.731-12.506a8.935 8.935 0 0 0-1.671.885 36.528 36.528 0 0 0-4.893 4.18 43.599 43.599 0 0 0-4.699 5.587 42.103 42.103 0 0 0-6.716 15.122c-.025.102-1.803 7.857-.926 11.878z" style="fill:url(#i)"/><path fill="url(#j)" d="M167.701 534.624a27.172 27.172 0 0 1 4.65 6.054c.275.208.532.414.75.613 11.35 10.435 5.403 25.184 4.96 26.228 9.22-7.576 15.112-18.782 13.343-30.35-5.663-14.08-15.267-19.761-23.095-32.114-.396-.625-.793-1.251-1.179-1.912a15.234 15.234 0 0 1-.551-1.03 9.086 9.086 0 0 1-.747-1.978.13.13 0 0 0-.114-.129.187.187 0 0 0-.094 0c-.006 0-.017.012-.024.015-.008.002-.025.014-.036.019-1.937.916-13.42 19.052 2.144 34.562z" style="fill:url(#j)"/><path fill="url(#k)" d="M173.1 541.297c-.218-.2-.475-.406-.75-.614-.102-.076-.203-.152-.312-.228a17.32 17.32 0 0 0-12.07-2.923c18.005 8.979 13.175 39.895-11.778 38.736a22.316 22.316 0 0 1-6.514-1.253c-.49-.183-.98-.383-1.469-.601a17.102 17.102 0 0 1-.845-.402l.035.022c3.479 2.369 20.666 8.157 38.632-6.441l.028-.064c.448-1.043 6.395-15.793-4.96-26.227z" style="fill:url(#k)"/><path fill="url(#l)" d="M127.571 557.656s2.31-8.588 16.545-8.588c1.539 0 5.942-4.283 6.02-5.525a24.987 24.987 0 0 1-18.793-.737 18.929 18.929 0 0 0-18.405.737 12.824 12.824 0 0 0 4.824 5.472 12.872 12.872 0 0 0 7.034 1.967c-.927 8.164 3.4 17.674 13.872 22.672.234.112.454.234.694.34-6.113-3.149-11.161-9.106-11.791-16.334z" style="fill:url(#l)"/><path fill="url(#m)" d="M196.372 534.561c-2.175-5.22-6.587-10.856-10.042-12.638a51.79 51.79 0 0 1 5.07 15.15l.009.083c-5.66-14.067-15.254-19.748-23.094-32.101a59.521 59.521 0 0 1-1.179-1.912 15.748 15.748 0 0 1-.552-1.03 9.086 9.086 0 0 1-.747-1.978.13.13 0 0 0-.113-.129.191.191 0 0 0-.095 0c-.006 0-.016.012-.024.015-.008.002-.025.014-.036.019l.019-.034c-12.574 7.343-16.842 20.933-17.23 27.735.584-.04 1.162-.089 1.759-.089a25.322 25.322 0 0 1 12.693 3.439 25.229 25.229 0 0 1 9.239 9.336 17.316 17.316 0 0 0-12.07-2.923c18.005 8.979 13.174 39.895-11.779 38.736a22.31 22.31 0 0 1-6.513-1.254 26.7 26.7 0 0 1-1.47-.6c-.283-.129-.566-.258-.845-.402l.035.022a25.912 25.912 0 0 1-.728-.362c.233.112.453.233.693.34-6.113-3.151-11.161-9.107-11.791-16.334 0 0 2.311-8.588 16.546-8.588 1.538 0 5.941-4.284 6.02-5.525-.019-.406-8.731-3.865-12.128-7.201-1.815-1.784-2.677-2.644-3.44-3.289a14.577 14.577 0 0 0-1.292-.976 23.088 23.088 0 0 1-.14-12.203 37.048 37.048 0 0 0-12.05 9.287h-.023c-1.984-2.508-1.844-10.778-1.731-12.505a8.935 8.935 0 0 0-1.671.885 36.321 36.321 0 0 0-4.893 4.18 43.551 43.551 0 0 0-4.679 5.6 42.105 42.105 0 0 0-6.717 15.122l-.067.329c-.094.44-.516 2.671-.577 3.15a57.836 57.836 0 0 0-.739 6.96v.258a49.858 49.858 0 0 0 13.221 33.718 50.115 50.115 0 0 0 32.593 15.943 50.152 50.152 0 0 0 34.827-10.216 49.909 49.909 0 0 0 18.749-31.003c.084-.644.152-1.281.227-1.932a51.224 51.224 0 0 0-3.247-25.081z" style="fill:url(#m)"/></g><defs><radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="matrix(104.362 0 0 104.085 186.533 511.617)" gradientUnits="userSpaceOnUse"><stop offset=".129" stop-color="#FFBD4F"/><stop offset=".186" stop-color="#FFAC31"/><stop offset=".247" stop-color="#FF9D17"/><stop offset=".283" stop-color="#FF980E"/><stop offset=".403" stop-color="#FF563B"/><stop offset=".467" stop-color="#FF3750"/><stop offset=".71" stop-color="#F5156C"/><stop offset=".782" stop-color="#EB0878"/><stop offset=".86" stop-color="#E50080"/></radialGradient><radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="matrix(104.362 0 0 104.085 147.784 554.127)" gradientUnits="userSpaceOnUse"><stop offset=".3" stop-color="#960E18"/><stop offset=".351" stop-color="#B11927" stop-opacity=".74"/><stop offset=".435" stop-color="#DB293D" stop-opacity=".343"/><stop offset=".497" stop-color="#F5334B" stop-opacity=".094"/><stop offset=".53" stop-color="#FF3750" stop-opacity="0"/></radialGradient><radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="matrix(75.5982 0 0 75.3974 160.701 488.429)" gradientUnits="userSpaceOnUse"><stop offset=".132" stop-color="#FFF44F"/><stop offset=".252" stop-color="#FFDC3E"/><stop offset=".506" stop-color="#FF9D12"/><stop offset=".526" stop-color="#FF980E"/></radialGradient><radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="matrix(49.6884 0 0 49.5564 136.16 581.179)" gradientUnits="userSpaceOnUse"><stop offset=".353" stop-color="#3A8EE6"/><stop offset=".472" stop-color="#5C79F0"/><stop offset=".669" stop-color="#9059FF"/><stop offset="1" stop-color="#C139E6"/></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientTransform="matrix(25.61117 -6.17556 7.21294 29.91337 152.832 545.192)" gradientUnits="userSpaceOnUse"><stop offset=".206" stop-color="#9059FF" stop-opacity="0"/><stop offset=".278" stop-color="#8C4FF3" stop-opacity=".064"/><stop offset=".747" stop-color="#7716A8" stop-opacity=".45"/><stop offset=".975" stop-color="#6E008B" stop-opacity=".6"/></radialGradient><radialGradient id="h" cx="0" cy="0" r="1" gradientTransform="matrix(35.7519 0 0 35.6569 146.493 507.752)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE226"/><stop offset=".121" stop-color="#FFDB27"/><stop offset=".295" stop-color="#FFC82A"/><stop offset=".502" stop-color="#FFA930"/><stop offset=".732" stop-color="#FF7E37"/><stop offset=".792" stop-color="#FF7139"/></radialGradient><radialGradient id="i" cx="0" cy="0" r="1" gradientTransform="matrix(152.54 0 0 152.134 174.908 484.565)" gradientUnits="userSpaceOnUse"><stop offset=".113" stop-color="#FFF44F"/><stop offset=".456" stop-color="#FF980E"/><stop offset=".622" stop-color="#FF5634"/><stop offset=".716" stop-color="#FF3647"/><stop offset=".904" stop-color="#E31587"/></radialGradient><radialGradient id="j" cx="0" cy="0" r="1" gradientTransform="matrix(11.73109 110.8711 -72.95297 7.71903 162.23 493)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F"/><stop offset=".06" stop-color="#FFE847"/><stop offset=".168" stop-color="#FFC830"/><stop offset=".304" stop-color="#FF980E"/><stop offset=".356" stop-color="#FF8B16"/><stop offset=".455" stop-color="#FF672A"/><stop offset=".57" stop-color="#FF3647"/><stop offset=".737" stop-color="#E31587"/></radialGradient><radialGradient id="k" cx="0" cy="0" r="1" gradientTransform="matrix(95.2178 0 0 94.9649 146.493 520.634)" gradientUnits="userSpaceOnUse"><stop offset=".137" stop-color="#FFF44F"/><stop offset=".48" stop-color="#FF980E"/><stop offset=".592" stop-color="#FF5634"/><stop offset=".655" stop-color="#FF3647"/><stop offset=".904" stop-color="#E31587"/></radialGradient><radialGradient id="l" cx="0" cy="0" r="1" gradientTransform="matrix(104.22 0 0 103.944 171.033 525.787)" gradientUnits="userSpaceOnUse"><stop offset=".094" stop-color="#FFF44F"/><stop offset=".231" stop-color="#FFE141"/><stop offset=".509" stop-color="#FFAF1E"/><stop offset=".626" stop-color="#FF980E"/></radialGradient><linearGradient id="b" x1="189.749" x2="106.856" y1="515.978" y2="596.169" gradientUnits="userSpaceOnUse"><stop offset=".048" stop-color="#FFF44F"/><stop offset=".111" stop-color="#FFE847"/><stop offset=".225" stop-color="#FFC830"/><stop offset=".368" stop-color="#FF980E"/><stop offset=".401" stop-color="#FF8B16"/><stop offset=".462" stop-color="#FF672A"/><stop offset=".534" stop-color="#FF3647"/><stop offset=".705" stop-color="#E31587"/></linearGradient><linearGradient id="m" x1="188.739" x2="118.224" y1="515.529" y2="586.244" gradientUnits="userSpaceOnUse"><stop offset=".167" stop-color="#FFF44F" stop-opacity=".8"/><stop offset=".266" stop-color="#FFF44F" stop-opacity=".634"/><stop offset=".489" stop-color="#FFF44F" stop-opacity=".217"/><stop offset=".6" stop-color="#FFF44F" stop-opacity="0"/></linearGradient><clipPath id="a"><path fill="#fff" d="M100 500h100v103H100z"/></clipPath></defs></svg>

package/components/baseline-indicator/icons/browser/safari.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 95.038 95.748"><g clip-path="url(#a)" transform="translate(-102.481 -703)"><path fill="#000" d="M195.609 754.589a42.946 42.946 0 0 1-3.471 16.899 44.106 44.106 0 0 1-9.887 14.326 45.732 45.732 0 0 1-14.796 9.572 46.912 46.912 0 0 1-17.453 3.362 46.912 46.912 0 0 1-17.453-3.362 45.742 45.742 0 0 1-14.796-9.572 44.103 44.103 0 0 1-9.886-14.326 42.947 42.947 0 0 1-3.472-16.899c0-11.712 4.805-22.943 13.358-31.225 8.553-8.281 20.154-12.934 32.249-12.934 5.989 0 11.92 1.143 17.453 3.362a45.732 45.732 0 0 1 14.796 9.572 44.106 44.106 0 0 1 9.887 14.326 42.946 42.946 0 0 1 3.471 16.899z" opacity=".53"/><path fill="url(#b)" stroke="#cdcdcd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".352" d="M197.343 750.69a47.837 47.837 0 0 1-3.603 18.217 47.641 47.641 0 0 1-10.263 15.444 47.324 47.324 0 0 1-15.359 10.319A47.128 47.128 0 0 1 150 798.294a47.216 47.216 0 0 1-33.477-13.943 47.74 47.74 0 0 1-13.866-33.661 47.737 47.737 0 0 1 13.866-33.661A47.212 47.212 0 0 1 150 703.086a47.127 47.127 0 0 1 18.118 3.623 47.327 47.327 0 0 1 15.359 10.32 47.63 47.63 0 0 1 10.263 15.444 47.83 47.83 0 0 1 3.603 18.217z" style="fill:url(#b)"/><path fill="url(#c)" d="M193.634 750.69a43.995 43.995 0 0 1-12.78 31.023A43.514 43.514 0 0 1 150 794.563a43.514 43.514 0 0 1-30.854-12.85 43.995 43.995 0 0 1-12.78-31.023 43.998 43.998 0 0 1 12.78-31.024A43.514 43.514 0 0 1 150 706.816a43.514 43.514 0 0 1 30.854 12.85 43.998 43.998 0 0 1 12.78 31.024z" style="fill:url(#c)"/><path fill="#f4f2f3" d="M150 709.104a.637.637 0 0 0-.636.64v7.378a.637.637 0 1 0 1.272 0v-7.378a.637.637 0 0 0-.636-.64zm-4.162.265a.638.638 0 0 0-.696.703l.321 3.086a.635.635 0 1 0 1.265-.132l-.32-3.087a.636.636 0 0 0-.57-.57zm8.353.003a.635.635 0 0 0-.57.57l-.323 3.086a.637.637 0 1 0 1.265.134l.323-3.087a.638.638 0 0 0-.695-.703zm-12.628.62a.638.638 0 0 0-.619.772l1.52 7.218a.635.635 0 1 0 1.244-.265l-1.519-7.218a.636.636 0 0 0-.626-.507zm16.903.006a.635.635 0 0 0-.626.507l-1.525 7.217a.639.639 0 0 0 .49.759.634.634 0 0 0 .754-.493l1.525-7.217a.638.638 0 0 0-.618-.773zm-20.983 1.151a.64.64 0 0 0-.66.835l.954 2.952c.109.337.467.52.802.411a.64.64 0 0 0 .408-.807l-.954-2.951a.634.634 0 0 0-.55-.44zm25.04.001a.638.638 0 0 0-.551.44l-.954 2.952a.639.639 0 0 0 .408.806.635.635 0 0 0 .802-.411l.954-2.951a.64.64 0 0 0-.659-.836zm-29.075 1.483a.64.64 0 0 0-.569.9l2.98 6.742a.634.634 0 0 0 .84.325.64.64 0 0 0 .323-.844l-2.981-6.742a.635.635 0 0 0-.593-.381zm33.155.023a.634.634 0 0 0-.593.38l-2.99 6.738a.64.64 0 0 0 .322.844c.322.145.696 0 .84-.323l2.989-6.738a.639.639 0 0 0-.568-.901zm-36.9 1.97a.641.641 0 0 0-.595.958l1.543 2.688a.633.633 0 0 0 .869.234.639.639 0 0 0 .233-.874l-1.543-2.687a.633.633 0 0 0-.507-.319zm40.594 0a.631.631 0 0 0-.507.319l-1.543 2.687a.64.64 0 0 0 .233.874.633.633 0 0 0 .869-.234l1.543-2.688a.641.641 0 0 0-.595-.958zm-44.23 2.28a.641.641 0 0 0-.493 1.016l4.308 5.972c.207.287.604.35.889.142a.64.64 0 0 0 .141-.893l-4.309-5.972a.63.63 0 0 0-.536-.265zm47.912.033a.63.63 0 0 0-.537.263l-4.317 5.967a.64.64 0 0 0 .14.893.633.633 0 0 0 .889-.14l4.317-5.967a.642.642 0 0 0-.492-1.016zm-51.163 2.708a.641.641 0 0 0-.506 1.068l2.065 2.306a.633.633 0 0 0 .899.048.641.641 0 0 0 .047-.904l-2.065-2.306a.634.634 0 0 0-.44-.212zm54.372.005a.637.637 0 0 0-.439.211l-2.066 2.307a.64.64 0 0 0 .047.903.633.633 0 0 0 .899-.047l2.065-2.306a.641.641 0 0 0-.506-1.068zm-57.487 3.004a.64.64 0 0 0-.392 1.115l5.453 4.937a.633.633 0 0 0 .899-.048.64.64 0 0 0-.047-.903l-5.454-4.937a.637.637 0 0 0-.459-.164zm60.618.022a.631.631 0 0 0-.46.164l-5.456 4.932a.64.64 0 0 0 .85.952l5.457-4.933a.64.64 0 0 0-.391-1.115zm-63.209 3.328a.64.64 0 0 0-.396 1.157l2.497 1.825a.633.633 0 0 0 .889-.142.64.64 0 0 0-.141-.893l-2.497-1.825a.63.63 0 0 0-.352-.122zm65.797.023a.64.64 0 0 0-.352.122l-2.498 1.823a.642.642 0 0 0-.142.894c.207.286.604.35.889.141l2.498-1.822a.642.642 0 0 0-.395-1.158zm-68.218 3.55a.64.64 0 0 0-.273 1.193l6.354 3.689a.64.64 0 0 0 .637-1.108l-6.355-3.689a.627.627 0 0 0-.363-.085zm70.622 0a.627.627 0 0 0-.363.085l-6.355 3.689a.64.64 0 0 0 .637 1.108l6.355-3.689a.64.64 0 0 0-.274-1.193zm-72.452 3.808a.64.64 0 0 0-.272 1.224l2.819 1.265a.64.64 0 0 0 .518-1.169l-2.819-1.264a.638.638 0 0 0-.246-.056zm74.295.027a.62.62 0 0 0-.247.055l-2.82 1.263a.64.64 0 0 0-.323.844c.144.324.518.469.84.324l2.82-1.262a.64.64 0 0 0-.27-1.224zm-75.927 3.954a.64.64 0 0 0-.143 1.246l6.977 2.286a.64.64 0 0 0 .395-1.217l-6.977-2.286a.643.643 0 0 0-.252-.029zm77.555.027a.623.623 0 0 0-.251.03l-6.979 2.281a.639.639 0 0 0-.408.806c.109.337.467.52.802.41l6.978-2.281a.64.64 0 0 0-.142-1.246zm-78.571 4.151a.635.635 0 0 0-.626.507.638.638 0 0 0 .49.759l3.019.645a.634.634 0 0 0 .754-.493.637.637 0 0 0-.49-.758l-3.019-.646a.627.627 0 0 0-.128-.014zm79.58.006a.808.808 0 0 0-.129.014l-3.019.645a.638.638 0 0 0-.49.758c.073.347.41.567.754.493l3.02-.645a.638.638 0 0 0 .49-.758.635.635 0 0 0-.626-.507zm-80.35 4.197a.636.636 0 0 0-.57.57.637.637 0 0 0 .566.703l7.297.776a.636.636 0 0 0 .7-.569.639.639 0 0 0-.566-.704l-7.297-.775a.628.628 0 0 0-.13-.001zm81.124.055a.619.619 0 0 0-.129.001l-7.298.766a.637.637 0 0 0-.567.702.635.635 0 0 0 .699.57l7.298-.766a.638.638 0 0 0 .567-.702.637.637 0 0 0-.57-.571zm-81.247 4.247a.637.637 0 0 0-.636.64c0 .354.283.64.636.64h3.087a.637.637 0 0 0 .636-.64.637.637 0 0 0-.636-.64zm78.277 0a.637.637 0 0 0-.636.64c0 .354.284.64.636.64h3.087a.637.637 0 0 0 .636-.64.637.637 0 0 0-.636-.64zm-70.736 3.487a.619.619 0 0 0-.129.001l-7.298.766a.637.637 0 0 0-.567.702.635.635 0 0 0 .699.57l7.298-.766a.638.638 0 0 0 .567-.702.637.637 0 0 0-.57-.571zm66.278.046a.635.635 0 0 0-.57.569.638.638 0 0 0 .565.704l7.297.775a.635.635 0 0 0 .7-.569.637.637 0 0 0-.566-.703l-7.297-.776a.695.695 0 0 0-.129 0zm-69.916 4.321a.627.627 0 0 0-.128.014l-3.019.645a.638.638 0 0 0-.491.758c.074.347.41.567.755.493l3.019-.645a.637.637 0 0 0 .49-.758.634.634 0 0 0-.626-.507zm73.557.006a.635.635 0 0 0-.626.507.639.639 0 0 0 .49.759l3.019.645a.634.634 0 0 0 .754-.493.638.638 0 0 0-.49-.759l-3.019-.645a.627.627 0 0 0-.128-.014zm-68.472 2.519a.626.626 0 0 0-.252.03l-6.978 2.281a.639.639 0 0 0-.408.806c.109.337.466.52.801.41l6.979-2.28a.64.64 0 0 0-.142-1.247zm63.381.023a.635.635 0 0 0-.55.44.639.639 0 0 0 .408.806l6.977 2.286a.64.64 0 0 0 .394-1.217l-6.977-2.285a.626.626 0 0 0-.252-.03zm-66.044 4.973a.638.638 0 0 0-.247.056l-2.82 1.262a.64.64 0 0 0 .517 1.169l2.82-1.262a.64.64 0 0 0-.27-1.225zm68.704.025a.64.64 0 0 0-.271 1.224l2.818 1.264a.64.64 0 0 0 .519-1.168l-2.819-1.265a.62.62 0 0 0-.247-.055zm-63.214 1.386a.634.634 0 0 0-.363.084l-6.354 3.69a.639.639 0 0 0 .636 1.107l6.355-3.688a.64.64 0 0 0-.274-1.193zm57.734 0a.64.64 0 0 0-.274 1.193l6.355 3.688a.632.632 0 0 0 .869-.234.638.638 0 0 0-.232-.873l-6.355-3.69a.634.634 0 0 0-.363-.084zm-59.319 5.413a.641.641 0 0 0-.352.123l-2.498 1.822a.642.642 0 0 0-.142.894c.207.287.604.35.889.142l2.498-1.823a.64.64 0 0 0-.395-1.158zm60.889.022a.642.642 0 0 0-.396 1.158l2.497 1.824a.633.633 0 0 0 .889-.142.64.64 0 0 0-.141-.893l-2.497-1.824a.626.626 0 0 0-.352-.123zm-55.231.221a.629.629 0 0 0-.459.164l-5.457 4.932a.641.641 0 0 0-.048.903.633.633 0 0 0 .899.048l5.457-4.932a.64.64 0 0 0-.392-1.115zm49.573.017a.64.64 0 0 0-.393 1.115l5.454 4.937a.633.633 0 0 0 .899-.048.641.641 0 0 0-.048-.903l-5.453-4.936a.636.636 0 0 0-.459-.165zm-44.396 4.686a.635.635 0 0 0-.537.264l-4.316 5.966a.64.64 0 0 0 .14.894.632.632 0 0 0 .888-.141l4.317-5.966a.641.641 0 0 0-.492-1.017zm39.198.027a.64.64 0 0 0-.493 1.016l4.309 5.972c.206.287.603.35.888.142a.64.64 0 0 0 .141-.893l-4.308-5.972a.634.634 0 0 0-.537-.265zm-44.77.922a.637.637 0 0 0-.44.211l-2.065 2.307a.64.64 0 0 0 .047.903.632.632 0 0 0 .898-.047l2.066-2.307a.64.64 0 0 0-.506-1.067zm50.374.003a.641.641 0 0 0-.506 1.067l2.065 2.307a.633.633 0 0 0 .899.047.64.64 0 0 0 .047-.903l-2.065-2.307a.63.63 0 0 0-.44-.211zm-38.774 2.558a.633.633 0 0 0-.593.38l-2.99 6.738a.64.64 0 0 0 .322.845c.322.144.697 0 .84-.324l2.99-6.738a.64.64 0 0 0-.569-.901zm27.137.019a.64.64 0 0 0-.57.9l2.981 6.742a.634.634 0 0 0 .84.324.64.64 0 0 0 .323-.844l-2.981-6.742a.634.634 0 0 0-.593-.38zm-32.39 2.065a.632.632 0 0 0-.507.319l-1.543 2.687a.64.64 0 0 0 .233.874.633.633 0 0 0 .869-.234l1.543-2.688a.64.64 0 0 0-.595-.958zm37.684 0a.641.641 0 0 0-.595.958l1.543 2.688a.633.633 0 0 0 .869.234.64.64 0 0 0 .233-.874l-1.543-2.687a.633.633 0 0 0-.507-.319zm-25.775.096a.635.635 0 0 0-.626.507l-1.525 7.217a.639.639 0 0 0 .49.759.634.634 0 0 0 .754-.493l1.525-7.217a.638.638 0 0 0-.618-.773zm13.844.005a.639.639 0 0 0-.619.771l1.52 7.219a.635.635 0 1 0 1.244-.265l-1.52-7.218a.633.633 0 0 0-.625-.507zm-6.911.728a.636.636 0 0 0-.636.639v7.378a.637.637 0 1 0 1.272 0v-7.378a.636.636 0 0 0-.636-.639zm-11.678 2.384a.635.635 0 0 0-.55.44l-.954 2.952a.639.639 0 0 0 .408.806.635.635 0 0 0 .802-.411l.954-2.952a.639.639 0 0 0-.66-.835zm23.351.001a.639.639 0 0 0-.66.836l.954 2.951c.109.337.466.52.801.411a.639.639 0 0 0 .409-.806l-.954-2.952a.636.636 0 0 0-.55-.44zm-15.666 1.644a.637.637 0 0 0-.57.57l-.323 3.087a.635.635 0 1 0 1.265.133l.323-3.086a.638.638 0 0 0-.695-.704zm7.961.003a.637.637 0 0 0-.696.703l.32 3.087a.635.635 0 1 0 1.266-.133l-.321-3.086a.636.636 0 0 0-.569-.571z"/><g filter="url(#d)" opacity=".409"><path fill="#000" d="m179.816 725.104-34.806 20.333-22.006 34.835 32.193-23.977z"/></g><path fill="#ff5150" d="m154.988 755.942-9.976-10.505 35.39-23.938z"/><path fill="#f1f1f1" d="m154.988 755.942-9.976-10.505-25.414 34.443z"/><path fill="#000" d="m119.598 779.88 35.39-23.938 25.414-34.443z" opacity=".243"/></g><defs><radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="matrix(47.3433 0 0 47.6037 150.197 744.292)" gradientUnits="userSpaceOnUse"><stop stop-color="#06C2E7"/><stop offset=".25" stop-color="#0DB8EC"/><stop offset=".5" stop-color="#12AEF1"/><stop offset=".75" stop-color="#1F86F9"/><stop offset="1" stop-color="#107DDD"/></radialGradient><linearGradient id="b" x1="149.998" x2="149.998" y1="798.293" y2="703.086" gradientUnits="userSpaceOnUse"><stop stop-color="#BDBDBD"/><stop offset="1" stop-color="#fff"/></linearGradient><clipPath id="a"><path fill="#fff" d="M100 703h100v100H100z"/></clipPath><filter id="d" width="61.901" height="60.258" x="120.459" y="722.559" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_325_6635" stdDeviation="1.272"/></filter></defs></svg>

package/components/baseline-indicator/icons/browser-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 79.301 98"><g fill="#099949"><path fill-rule="evenodd" d="M30.3 6a42.82 42.82 0 0 0-26.616 9.226A59.25 59.25 0 0 0 0 10.489 48.787 48.787 0 0 1 30.3 0c27.063 0 49 21.938 49 49s-21.937 49-49 49A48.786 48.786 0 0 1 0 87.511a59.307 59.307 0 0 0 3.684-4.737A42.823 42.823 0 0 0 30.3 92c23.748 0 43-19.252 43-43S54.049 6 30.3 6Z" clip-rule="evenodd"/><path d="M33.78 58.149 53.3 38.827 48.426 34l-19.52 19.322-9.728-9.629L14.3 48.52 28.929 63l4.876-4.827Z"/></g></svg>

package/components/baseline-indicator/icons/browser-cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 79.301 98"><g fill="#666"><path fill-rule="evenodd" d="M30.3 6a42.823 42.823 0 0 0-26.616 9.226A59.307 59.307 0 0 0 0 10.489 48.786 48.786 0 0 1 30.3 0c27.063 0 49 21.938 49 49s-21.937 49-49 49A48.786 48.786 0 0 1 0 87.511a59.307 59.307 0 0 0 3.684-4.737A42.823 42.823 0 0 0 30.3 92c23.748 0 43-19.252 43-43S54.049 6 30.3 6Z" clip-rule="evenodd"/><path d="m38.633 48.5 9.667-9.667L43.467 34 33.8 43.667 24.134 34 19.3 38.834l9.666 9.666-9.666 9.666 4.833 4.833 9.666-9.666 9.666 9.666 4.834-4.833z"/></g></svg>

package/components/baseline-indicator/icons/chevron.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 5.5L8 10.5L13 5.5" stroke="#FBFBFE" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/baseline-indicator/icons/status/high-dark.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 62"><path d="m86.333 6.2-6.166 6.2 18.5 18.6-18.5 18.6-12.334-12.4-6.166 6.2 18.5 18.6L111 31 86.333 6.2ZM30.833 0 6.167 24.8l6.166 6.2 18.5-18.6 12.334 12.4 6.166-6.2L30.833 0Z" fill="#234822"/><path d="m80.167 0 6.166 6.2-55.5 55.8L0 31l6.167-6.2 24.666 24.8L80.167 0Z" fill="#24A446"/></svg>

package/components/baseline-indicator/icons/status/high.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 62"><path d="m86.333 6.2-6.166 6.2 18.5 18.6-18.5 18.6-12.334-12.4-6.166 6.2 18.5 18.6L111 31 86.333 6.2ZM30.833 0 6.167 24.8l6.166 6.2 18.5-18.6 12.334 12.4 6.166-6.2L30.833 0Z" fill="#B9D8BF"/><path d="m80.167 0 6.166 6.2-55.5 55.8L0 31l6.167-6.2 24.666 24.8L80.167 0Z" fill="#148936"/></svg>

package/components/baseline-indicator/icons/status/limited-dark.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 62"><path d="m30.833 0 18.5 18.6-6.166 6.2-18.5-18.6L30.833 0Z" fill="#F09418"/><path d="M86.333 6.2 111 31 86.333 55.8l-6.166-6.2 18.5-18.6-18.5-18.6 6.166-6.2Z" fill="#57452B"/><path d="m67.833 37.2-6.166 6.2 18.5 18.6 6.166-6.2-18.5-18.6Z" fill="#F09418"/><path d="m24.667 6.2 6.166 6.2-18.5 18.6 18.5 18.6-6.166 6.2L0 31 24.667 6.2Z" fill="#57452B"/><path d="m80.167 0 6.166 6.2-55.5 55.8-6.166-6.2L80.167 0Z" fill="#F09418"/></svg>

package/components/baseline-indicator/icons/status/limited.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 62"><path d="m30.833 0 18.5 18.6-6.166 6.2-18.5-18.6L30.833 0Z" fill="#D78000"/><path d="M86.333 6.2 111 31 86.333 55.8l-6.166-6.2 18.5-18.6-18.5-18.6 6.166-6.2Z" fill="#E5D0AC"/><path d="m67.833 37.2-6.166 6.2 18.5 18.6 6.166-6.2-18.5-18.6Z" fill="#D78000"/><path d="m24.667 6.2 6.166 6.2-18.5 18.6 18.5 18.6-6.166 6.2L0 31 24.667 6.2Z" fill="#E5D0AC"/><path d="m80.167 0 6.166 6.2-55.5 55.8-6.166-6.2L80.167 0Z" fill="#D78000"/></svg>

package/components/baseline-indicator/icons/status/low-dark.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 61"><path d="M30.833 0 37 6.1l-6.167 6.1-6.166-6.1L30.833 0Zm12.334 12.2 6.166 6.1-6.166 6.1L37 18.3l6.167-6.1Zm49.333 0 6.167 6.1-6.167 6.1-6.167-6.1 6.167-6.1Zm12.333 12.2L111 30.5l-6.167 6.1-6.166-6.1 6.166-6.1ZM92.5 36.6l6.167 6.1-6.167 6.1-6.167-6.1 6.167-6.1ZM80.167 48.8l6.166 6.1-6.166 6.1L74 54.9l6.167-6.1ZM67.833 36.6 74 42.7l-6.167 6.1-6.166-6.1 6.166-6.1ZM18.5 12.2l6.167 6.1-6.167 6.1-6.167-6.1 6.167-6.1Z" fill="#223F80"/><path d="m80.167 0 6.166 6.1-55.5 54.9L0 30.5l6.167-6.1 24.666 24.4L80.167 0Z" fill="#4185FF"/></svg>

package/components/baseline-indicator/icons/status/low.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 61"><path d="M30.833 0 37 6.1l-6.167 6.1-6.166-6.1L30.833 0Zm12.334 12.2 6.166 6.1-6.166 6.1L37 18.3l6.167-6.1Zm49.333 0 6.167 6.1-6.167 6.1-6.167-6.1 6.167-6.1Zm12.333 12.2L111 30.5l-6.167 6.1-6.166-6.1 6.166-6.1ZM92.5 36.6l6.167 6.1-6.167 6.1-6.167-6.1 6.167-6.1ZM80.167 48.8l6.166 6.1-6.166 6.1L74 54.9l6.167-6.1ZM67.833 36.6 74 42.7l-6.167 6.1-6.166-6.1 6.166-6.1ZM18.5 12.2l6.167 6.1-6.167 6.1-6.167-6.1 6.167-6.1Z" fill="#A9C1EA"/><path d="m80.167 0 6.166 6.1-55.5 54.9L0 30.5l6.167-6.1 24.666 24.4L80.167 0Z" fill="#1671F1"/></svg>

package/components/baseline-indicator/server.css

@@ -0,0 +1,263 @@
+/** Baseline indicator. */
+
+.baseline-indicator {
+  --baseline-bg: light-dark(#f1f3f4, #282a2c);
+  --baseline-engine-bg: light-dark(#e3e6e8, #1d1e1f);
+  --baseline-img: url("./icons/status/limited.svg");
+  --baseline-check: #1e8e3e;
+  --baseline-cross: #ea8600;
+  --feedback-link-icon: var(--icon-primary, light-dark(#696969, #ffffff));
+
+  padding-left: 3.8125rem;
+  margin: 1rem 0;
+
+  background: var(--baseline-bg);
+  border-radius: 0.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    --baseline-img: url("./icons/status/limited-dark.svg");
+  }
+
+  &.high {
+    --baseline-bg: light-dark(#e6f4ea, #0e2a10);
+    --baseline-engine-bg: light-dark(#ceead6, #031b05);
+    --baseline-img: url("./icons/status/high.svg");
+    --baseline-check: #099949;
+
+    @media (prefers-color-scheme: dark) {
+      --baseline-img: url("./icons/status/high-dark.svg");
+    }
+  }
+
+  &.low {
+    --baseline-bg: light-dark(#e8f0fe, #041e49);
+    --baseline-engine-bg: light-dark(#d2e3fc, #020d20);
+    --baseline-img: url("./icons/status/low.svg");
+    --baseline-check: #1a73e8;
+    --baseline-pill-bg: #3367d6;
+    --baseline-pill-color: #f1f3f4;
+
+    @media (prefers-color-scheme: dark) {
+      --baseline-img: url("./icons/status/low-dark.svg");
+    }
+  }
+
+  &[open] {
+    summary .icon-chevron {
+      transform: rotate(180deg);
+    }
+  }
+
+  summary {
+    --chevron-size: 0.6875rem;
+    --chevron-padding-left: 0.75rem;
+    --chevron-padding-right: 1.25rem;
+
+    position: relative;
+
+    display: flex;
+
+    flex-wrap: wrap;
+
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 1rem 0;
+    padding-right: calc(
+      var(--chevron-padding-left) + var(--chevron-size) +
+        var(--chevron-padding-right)
+    );
+
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      /* Remove arrow from older versions of Safari. */
+      display: none;
+    }
+
+    .indicator {
+      --width: 2.3125rem;
+
+      position: absolute;
+      top: 1rem;
+      left: calc(-0.5rem - var(--width));
+
+      display: block;
+
+      width: var(--width);
+      height: 2.25rem;
+
+      background-image: var(--baseline-img);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+
+    .status-title {
+      padding: 0.375rem 0;
+      margin: 0;
+
+      font-size: 1rem;
+      font-weight: 600;
+
+      line-height: 1.5;
+
+      letter-spacing: 0;
+
+      .not-bold {
+        font-weight: normal;
+      }
+    }
+
+    .pill {
+      padding: 0 0.25rem;
+      margin-right: auto;
+
+      font-size: 0.75rem;
+      font-weight: 600;
+
+      color: var(--baseline-pill-color);
+
+      text-transform: uppercase;
+
+      background: var(--baseline-pill-bg);
+      border-radius: 0.125rem;
+    }
+
+    .browsers {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      .engine {
+        display: flex;
+
+        flex-wrap: wrap;
+
+        gap: 0.5rem;
+
+        padding: 0.5rem 0.625rem;
+
+        background: var(--baseline-engine-bg);
+        border-radius: 2rem;
+
+        .browser {
+          display: flex;
+
+          &::before {
+            display: block;
+
+            width: 1.25rem;
+            height: 1.25rem;
+
+            content: "";
+
+            background-repeat: no-repeat;
+            background-size: contain;
+          }
+
+          &.chrome::before {
+            background-image: url("./icons/browser/chrome.svg");
+          }
+
+          &.edge::before {
+            background-image: url("./icons/browser/edge.svg");
+          }
+
+          &.firefox::before {
+            background-image: url("./icons/browser/firefox.svg");
+          }
+
+          &.safari::before {
+            background-image: url("./icons/browser/safari.svg");
+          }
+
+          &::after {
+            display: block;
+
+            width: 1rem;
+            height: 1.25rem;
+
+            content: "";
+
+            background-color: var(--baseline-cross);
+
+            mask-image: url("./icons/browser-cross.svg");
+            mask-repeat: no-repeat;
+            mask-size: contain;
+          }
+
+          &.supported::after {
+            background-color: var(--baseline-check);
+            mask-image: url("./icons/browser-check.svg");
+          }
+        }
+      }
+    }
+
+    .icon {
+      display: inline-block;
+
+      width: var(--chevron-size);
+      height: var(--chevron-size);
+
+      background-color: var(--color-text-primary);
+
+      mask-repeat: no-repeat;
+      mask-position: center;
+
+      &.icon-chevron {
+        position: absolute;
+        right: var(--chevron-padding-right);
+        mask-image: url("./icons/chevron.svg");
+      }
+    }
+  }
+
+  .extra {
+    padding-right: 1rem;
+    padding-bottom: 1.5rem;
+
+    p {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+
+    ul {
+      display: flex;
+
+      flex-wrap: wrap;
+
+      row-gap: 1rem;
+      column-gap: 1.5rem;
+
+      padding: 0;
+      margin: 0;
+
+      li {
+        margin: 0;
+        font-weight: 500;
+        list-style: none;
+
+        a.learn-more {
+          &,
+          &:active,
+          &:visited {
+            color: var(--text-link);
+            background: none;
+          }
+        }
+
+        a:not(.learn-more) {
+          &,
+          &:active,
+          &:visited {
+            color: var(--text-primary);
+            background: none;
+          }
+        }
+      }
+    }
+  }
+}