@rmdes/indiekit-frontend 1.0.0-beta.25

package/README.md

@@ -0,0 +1,10 @@
+# @indiekit/frontend
+
+Frontend components for Indiekit.
+
+## Installation
+
+`npm install @indiekit/frontend`
+
+> [!NOTE]
+> This package is installed alongside `@indiekit/indiekit`

package/assets/app-icon-any.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="#333" d="M0 0h512v512H0z"/>
+  <circle fill="#ccc" cx="156" cy="156" r="94"/>
+  <path fill="#ccc" d="M79.4 264h153.2c5.4 0 7.3.6 9.3 1.6 2 1 3.5 2.6 4.5 4.5 1 2 1.6 4 1.6 9.3v153.2c0 5.4-.6 7.3-1.6 9.3-1 2-2.6 3.5-4.5 4.5-2 1-4 1.6-9.3 1.6H79.4c-5.4 0-7.3-.6-9.3-1.6-2-1-3.5-2.6-4.5-4.5-1-2-1.6-4-1.6-9.3V279.4c0-5.4.6-7.3 1.6-9.3 1-2 2.6-3.5 4.5-4.5 2-1 4-1.6 9.3-1.6Zm191.1 0h162.1c5.4 0 7.3.6 9.3 1.6 2 1 3.5 2.6 4.5 4.5 1 2 1.6 4 1.6 9.3v162.1a6 6 0 0 1-10.2 4.3L266.2 274.2a6 6 0 0 1 4.3-10.2Zm3.2-16C379.3 248 448 174 448 73.7c0-6.5-3.2-9.7-9.7-9.7H276a12 12 0 0 0-12 12v162.3c0 6.5 3.2 9.7 9.7 9.7Z"/>
+</svg>

package/assets/app-icon-maskable.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="#333" d="M0 0h512v512H0z"/>
+  <circle fill="#ccc" cx="180" cy="180" r="72" />
+  <path fill="#ccc" d="M125.4 262h109.2c5.4 0 7.3.6 9.3 1.6 2 1 3.5 2.6 4.5 4.5 1 2 1.6 4 1.6 9.3v109.2c0 5.4-.6 7.3-1.6 9.3-1 2-2.6 3.5-4.5 4.5-2 1-4 1.6-9.3 1.6H125.4c-5.4 0-7.3-.6-9.3-1.6-2-1-3.5-2.6-4.5-4.5-1-2-1.6-4-1.6-9.3V277.4c0-5.4.6-7.3 1.6-9.3 1-2 2.6-3.5 4.5-4.5 2-1 4-1.6 9.3-1.6Zm145.1 0h116.1c5.4 0 7.3.6 9.3 1.6 2 1 3.5 2.6 4.5 4.5 1 2 1.6 4 1.6 9.3v116.1a6 6 0 0 1-10.2 4.3L266.2 272.2a6 6 0 0 1 4.3-10.2Zm-1.1-12c80.3 0 132.6-56.3 132.6-132.6 0-5-2.5-7.4-7.4-7.4H274a12 12 0 0 0-12 12v120.6c0 5 2.5 7.4 7.4 7.4Z"/>
+</svg>

package/assets/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path d="M30 34v28H2V34h28zm32 0v28L34 34h28zM17 1c7 0 14 7 14 16 0 7-7 14-14 14-9 0-16-7-16-14C1 8 8 1 17 1zm45 1c0 15-13 28-28 28V2h28z"/>
+</svg>

package/assets/not-found.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="icon" fill="#AAA" d="m14 17 12 12 6-6 12 12v1a8 8 0 0 1-8 8H12a8 8 0 0 1-8-8v-9l10-10Zm0 5-6 6v8a4 4 0 0 0 3.8 4H36a4 4 0 0 0 4-3.8V36l-8-8-6 6-12-12ZM32.3 4c1 0 2.1.4 2.9 1.2l7.6 7.6a4 4 0 0 1 1.2 2.9V32l-4-4V16h-8V8H12c-2 0-4 2-4 4v8l-4 4V12a8 8 0 0 1 8-8h20.3Z" opacity=".7"/>
+  </defs>
+  <rect fill="#000" width="100%" height="100%" opacity="0.075"/>
+  <use href="#icon" x="50%" y="50%" transform="translate(-24 -24)"/>
+</svg>

package/assets/offline.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="icon" fill="#AAA" d="M24 32a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-6.9-11.9 4.1 4.1a17 17 0 0 0-9.7 5.3L8 26a22 22 0 0 1 9-6Zm22.5 5.4L36 29l-.8-.8L26 19a22 22 0 0 1 13.5 6.4ZM8.2 11.2l3.7 3.7a24.7 24.7 0 0 0-8.4 6.6l-3.6-3.6c2.4-2.7 5.2-5 8.3-6.7ZM24 7a32 32 0 0 1 23.4 10.2l-3.5 3.6a27 27 0 0 0-24.5-8.4l-4.2-4.2A32 32 0 0 1 24 7ZM2 5l3-3 41 41-3 3L2 5Z" opacity=".7"/>
+  </defs>
+  <rect fill="#000" width="100%" height="100%" opacity="0.075"/>
+  <use href="#icon" x="50%" y="50%" transform="translate(-24 -24)"/>
+</svg>

package/assets/plug-in.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <path fill="#17181C" d="M0 0h96v96H0z"/>
+  <path fill="#FFF" d="M14 70V36a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v34a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4Zm12-48h12a2 2 0 0 1 2 2v5H24v-5c0-1.1.9-2 2-2Zm32 0h12a2 2 0 0 1 2 2v5H56v-5c0-1.1.9-2 2-2Z"/>
+</svg>

package/components/actions/macro.njk

@@ -0,0 +1,3 @@
+{% macro actions(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/actions/styles.css

@@ -0,0 +1,19 @@
+.actions {
+  --anchor-decoration-color: transparent;
+  --icon-margin: var(--space-2xs);
+  display: flex;
+  flex-wrap: wrap;
+  font: var(--font-body);
+  gap: var(--space-2xs) var(--space-l);
+}
+
+.actions__link {
+  margin: calc(var(--space-s) * -1);
+  padding: var(--space-s);
+  white-space: nowrap;
+}
+
+.actions__link--warning {
+  --anchor-color: var(--color-error);
+  --anchor-color-hover: var(--color-error-variant);
+}

package/components/actions/template.njk

@@ -0,0 +1,19 @@
+{% macro _actionLink(action) %}
+  <a class="{{ classes("actions__link", action) }}" href="{{ action.href }}"{{ attributes(action.attributes) }}>
+    {{- icon(action.icon) if action.icon -}}
+    {{- action.text | safe -}}
+  </a>
+{% endmacro %}
+{%- if opts.items.length === 1 %}
+<div class="{{ classes("actions", opts) }}">
+  {{ _actionLink(opts.items[0]) | trim }}
+</div>
+{%- else %}
+<ul class="{{ classes("actions", opts) }}" role="list">
+  {% for item in opts.items %}{% if item.text %}
+  <li class="actions__list-item">
+    {{ _actionLink(item) | trim }}
+  </li>
+  {% endif %}{% endfor %}
+</ul>
+{%- endif %}

package/components/add-another/index.js

@@ -0,0 +1,170 @@
+const focusableSelector = `button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]`;
+
+export const AddAnotherComponent = class extends HTMLElement {
+  connectedCallback() {
+    this.$addButtonTemplate = this.querySelector("#add-button");
+    this.$deleteButtonTemplate = this.querySelector("#delete-button");
+    this.$$fields = this.querySelectorAll(".field");
+    this.$list = this.querySelector(".add-another__list");
+
+    this.updateItems();
+    this.createAddButton();
+  }
+
+  /**
+   * Add item to list
+   * @param {Event} event - Add button event
+   */
+  add(event) {
+    event.preventDefault();
+    const $newItem = this.createItem();
+    this.$list.append($newItem);
+    this.updateItems();
+    $newItem.querySelector(focusableSelector).focus();
+  }
+
+  /**
+   * Delete item from list
+   * @param {Event} event - Delete button event
+   */
+  delete(event) {
+    event.preventDefault();
+    event.target.closest("li").remove();
+    this.updateItems();
+    this.focusHeading();
+  }
+
+  /**
+   * Get heading
+   * @returns {HTMLLegendElement} - Group legend
+   */
+  getHeading() {
+    return this.querySelector("legend");
+  }
+
+  /**
+   * Focus heading
+   */
+  focusHeading() {
+    const $heading = this.getHeading();
+
+    $heading.setAttribute("tabindex", "-1");
+    $heading.focus();
+  }
+
+  /**
+   * Create add button
+   */
+  createAddButton() {
+    let $addButton = this.$addButtonTemplate.content.cloneNode(true);
+
+    this.append($addButton);
+
+    $addButton = this.querySelector(".add-another__add");
+    $addButton.addEventListener("click", (event) => this.add(event));
+  }
+
+  /**
+   * Get delete button
+   * @param {HTMLElement} element - Containing element
+   * @returns {HTMLButtonElement} - Delete button
+   */
+  getDeleteButton(element) {
+    return element.querySelector(".add-another__delete");
+  }
+
+  /**
+   * Create delete button
+   * @param {HTMLElement} element - Containing element
+   */
+  createDeleteButton(element) {
+    const $deleteButton =
+      this.$deleteButtonTemplate.content.firstElementChild.cloneNode(true);
+
+    element.append($deleteButton);
+  }
+
+  /**
+   * Update delete button
+   * @param {HTMLElement} element - Containing element
+   */
+  updateDeleteButton(element) {
+    const $deleteButton = this.getDeleteButton(element);
+    $deleteButton.setAttribute("aria-labelledby", `delete-title ${element.id}`);
+    $deleteButton.addEventListener("click", (event) => this.delete(event));
+  }
+
+  /**
+   * Create new item by cloning first item in list and updating its attributes
+   * @returns {HTMLLIElement} - List item containing form field(s)
+   */
+  createItem() {
+    const $$items = this.querySelectorAll(".add-another__list-item");
+    const $item = $$items[0].cloneNode(true);
+    const uid = Date.now().toString();
+
+    const $$fields = $item.querySelectorAll(".field--error");
+    for (const $field of $$fields) {
+      $field.classList.remove("field--error");
+    }
+
+    const $$errorMessages = $item.querySelectorAll(".error-message");
+    for (const $errorMessage of $$errorMessages) {
+      $errorMessage.remove();
+    }
+
+    const $$inputs = $item.querySelectorAll("input, select, textarea");
+    for (const $input of $$inputs) {
+      $input.id = $input.id.replace("-0", `-${uid}`);
+      $input.name = $input.name.replace("[0]", `[${uid}]`);
+      $input.value = "";
+      $input.classList.remove(
+        "input--error",
+        "select--error",
+        "textarea--error",
+      );
+    }
+
+    const $$labels = $item.querySelectorAll("label");
+    for (const $label of $$labels) {
+      const forAttribute = $label.getAttribute("for");
+      $label.setAttribute("for", forAttribute.replace("-0", `-${uid}`));
+    }
+
+    $item.id = `${this.id}-${uid}`;
+
+    return $item;
+  }
+
+  /**
+   * Update all items
+   * - Update ID’s to use for labelling remove button
+   * - Update ARIA label to reference item’s position in list
+   * - Add remove buttons (or remove if only one item remaining in list)
+   */
+  updateItems() {
+    const $$items = this.querySelectorAll(".add-another__list-item");
+
+    for (const [index, $item] of $$items.entries()) {
+      $item.id = $item.id || `${this.id}-${index}`;
+      $item.setAttribute("aria-label", `Item ${index + 1}`);
+
+      // If no delete button, add one (if more than 1 item in list)
+      // Used when initializing
+      if (!this.getDeleteButton($item) && $$items.length > 1) {
+        this.createDeleteButton($item);
+      }
+
+      // If has delete button
+      if (this.getDeleteButton($item)) {
+        if ($$items.length === 1) {
+          // If only 1 item in list, remove button
+          this.getDeleteButton($item).remove();
+        } else {
+          // Else update button attributes
+          this.updateDeleteButton($item);
+        }
+      }
+    }
+  }
+};

package/components/add-another/macro.njk

@@ -0,0 +1,3 @@
+{% macro addAnother(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/add-another/styles.css

@@ -0,0 +1,63 @@
+add-another {
+  --counter-size: 1.66667em;
+  display: block;
+}
+
+.add-another__list {
+  counter-reset: items;
+}
+
+.add-another__list-item {
+  --label-font: var(--font-fieldset-label);
+  margin-block-end: var(--space-m);
+  padding-block: var(--space-xs);
+  padding-inline-start: calc(var(--counter-size) + var(--space-s));
+  position: relative;
+
+  & .fieldset--group {
+    margin-block-start: 0;
+  }
+
+  &::before {
+    align-items: center;
+    background-color: var(--color-offset);
+    block-size: var(--counter-size);
+    border-radius: var(--border-radius-small);
+    color: var(--color-on-offset);
+    content: counter(items);
+    counter-increment: items;
+    display: flex;
+    font: var(--font-label);
+    inline-size: var(--counter-size);
+    inset: 0;
+    justify-content: center;
+    position: absolute;
+  }
+
+  &:not([hidden]) {
+    display: flex;
+  }
+
+  & > :first-child {
+    flex: 1;
+  }
+}
+
+.add-another__add.button {
+  display: flex;
+  inline-size: calc(100% - var(--counter-size) - var(--space-s));
+  margin-block-start: 0;
+  margin-inline-start: calc(var(--counter-size) + var(--space-s));
+}
+
+.add-another__delete.button {
+  --button-padding: 0;
+  --icon-size: 0.875em;
+
+  block-size: var(--counter-size);
+  display: flex;
+  inline-size: var(--counter-size);
+  inset-block-start: var(--counter-size);
+  inset-inline-start: 0;
+  position: absolute;
+}

package/components/add-another/template.njk

@@ -0,0 +1,39 @@
+{% from "../button/macro.njk" import button with context %}
+{% from "../field/macro.njk" import field with context %}
+{% from "../fieldset/macro.njk" import fieldset with context %}
+{% set id = opts.id or opts.name | slugify({ decamelize: true }) %}
+{# `fieldset` is false by default #}
+{%- set hasFieldset = true if opts.fieldset else false %}
+{# Capture the HTML so we can optionally nest it within a fieldset #}
+{%- set innerHtml %}{{ caller() if caller }}{% endset %}
+{% call field({
+  element: "add-another",
+  classes: opts.field.classes,
+  attributes: {
+    id: id
+  }
+}) %}
+{% if opts.fieldset %}
+  {% call fieldset({
+    describedBy: describedBy,
+    classes: opts.fieldset.classes,
+    attributes: opts.fieldset.attributes,
+    legend: opts.fieldset.legend
+  }) %}{{ innerHtml | trim | safe }}{% endcall %}
+{% else %}
+  {{ innerHtml | trim | safe }}
+{% endif %}
+  <template id="add-button">
+    {{ button({
+      classes: "add-another__add button--secondary",
+      text: __("addAnother.add", opts.name)
+    }) | indent(4) }}
+  </template>
+  <template id="delete-button">
+    {{ button({
+      classes: "add-another__delete button--warning",
+      icon: "delete",
+      iconText: __("addAnother.delete")
+    }) | indent(4) }}
+  </template>
+{% endcall %}

package/components/app/styles.css

@@ -0,0 +1,45 @@
+.app {
+  background-color: var(--color-offset);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family-sans);
+  justify-content: space-between;
+}
+
+.app--minimalui {
+  --container-max-inline-size: 36rem;
+
+  & .header,
+  & .footer {
+    border: 0;
+  }
+
+  & .header__container,
+  & .footer__container {
+    align-items: center;
+    inline-size: auto;
+  }
+
+  & .main {
+    @media (width > 36rem) {
+      border-radius: var(--border-radius-large);
+      flex: 0;
+      margin: auto;
+      overflow: hidden;
+    }
+  }
+
+  & .main__container {
+    padding-block: var(--space-l);
+  }
+
+  & .notification {
+    border-start-end-radius: var(--border-radius-large);
+    border-start-start-radius: var(--border-radius-large);
+  }
+
+  & .notification + .main__container {
+    border-start-end-radius: 0;
+    border-start-start-radius: 0;
+  }
+}

package/components/authorize/macro.njk

@@ -0,0 +1,3 @@
+{% macro authorize(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/authorize/styles.css

@@ -0,0 +1,23 @@
+.authorize {
+  --authorize-client-icon-size: 4rem;
+  line-height: var(--line-height-tight);
+
+  &:has(.authorize__client-icon) {
+    min-block-size: var(--authorize-client-icon-size);
+  }
+
+  & a {
+    font-weight: 600;
+  }
+}
+
+.authorize__client-icon {
+  background-color: var(--color-neutral90); /* Ignore color-scheme */
+  block-size: var(--authorize-client-icon-size);
+  border-radius: var(--border-radius-small);
+  box-shadow: inset 0 0 0 1px var(--color-shadow);
+  float: inline-start;
+  inline-size: var(--authorize-client-icon-size);
+  margin-inline-end: var(--space-s);
+  padding: var(--space-2xs);
+}

package/components/authorize/template.njk

@@ -0,0 +1,14 @@
+{% set clientLink = opts.client.name | friendlyUrl | linkTo(opts.client.url) %}
+{% set meLink = opts.me | friendlyUrl | replace("/", "/<wbr>") | linkTo(opts.me) %}
+<p class="{{ classes("authorize", opts) }} s-flow"
+  {{- attributes(opts.attributes) }}>
+  {% if opts.client.logo %}
+  <a class="authorize__client" href="{{ opts.client.url }}">
+    <img class="authorize__client-icon" src="{{ opts.client.logo }}" alt="" height="64" width="64">
+  </a>
+  {% endif %}
+  {{ __(opts.key, {
+    client: "__client__",
+    me: "__me__"
+  }) | replace("__client__", clientLink) | replace("__me__", meLink) | markdown("inline") | safe }}
+</p>

package/components/avatar/macro.njk

@@ -0,0 +1,3 @@
+{% macro avatar(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/avatar/styles.css

@@ -0,0 +1,23 @@
+.avatar {
+  background:
+    radial-gradient(
+        circle,
+        var(--color-offset-variant-darker) 50%,
+        transparent 50%
+      )
+      50% 20%/75% 75% no-repeat,
+    radial-gradient(
+        circle,
+        var(--color-offset-variant-darker) 50%,
+        transparent 50%
+      )
+      50% -50%/100% 160% no-repeat,
+    var(--color-offset);
+  block-size: var(--avatar-size, 3rem);
+  border-radius: var(--border-radius-small);
+  inline-size: var(--avatar-size, 3rem);
+  max-inline-size: none;
+  object-fit: cover;
+  outline: var(--border-width-thin) solid var(--color-shadow);
+  outline-offset: calc(var(--border-width-thin) * -1);
+}

package/components/avatar/template.njk

@@ -0,0 +1 @@
+<img class="{{ classes("avatar", opts) }}" src="{{ opts.src }}" alt="{{ opts.alt }}">

package/components/back-link/macro.njk

@@ -0,0 +1,3 @@
+{% macro backLink(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/back-link/styles.css

@@ -0,0 +1,46 @@
+.back-link {
+  --anchor-decoration-color: transparent;
+  --back-link-padding: var(--space-s);
+  --back-link-chevron-rotation: -45deg;
+  --back-link-chevron-size: 0.5em;
+  --back-link-chevron-thickness: var(--text-thickness);
+
+  display: inline-block;
+  font: var(--font-caption);
+  margin-inline: calc(var(--back-link-padding) * -1);
+  padding: var(--back-link-padding);
+  padding-block-start: var(--back-link-padding);
+  padding-inline-start: calc(var(--back-link-padding) * 2);
+  position: relative;
+
+  &::before {
+    block-size: var(--back-link-chevron-size);
+    border: 0 solid currentcolor;
+    border-block-start-width: var(--back-link-chevron-thickness);
+    border-inline-start-width: var(--back-link-chevron-thickness);
+    content: "";
+    display: block;
+    inline-size: var(--back-link-chevron-size);
+    inset-block-start: calc(
+      var(--back-link-padding) + var(--back-link-chevron-size)
+    );
+    inset-inline-start: var(--back-link-padding);
+    position: absolute;
+    transform: rotate(var(--back-link-chevron-rotation));
+  }
+
+  &:focus-visible::before,
+  &:hover::before {
+    --back-link-chevron-thickness: calc(var(--text-thickness) * 2);
+  }
+
+  &::after {
+    content: "";
+    inset: 0;
+    position: absolute;
+  }
+}
+
+:root[dir="rtl"] .back-link {
+  --back-link-chevron-rotation: 45deg;
+}

package/components/back-link/template.njk

@@ -0,0 +1,5 @@
+<div class="-!-container">
+  <a class="{{ classes("back-link", opts) }}" href="{{ opts.href }}">
+    {{- opts.text | default(__("backLink.text")) | safe -}}
+  </a>
+</div>

package/components/badge/macro.njk

@@ -0,0 +1,3 @@
+{% macro badge(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/badge/styles.css

@@ -0,0 +1,85 @@
+.badge {
+  /*
+   * 1. When a user customises their colours, often the background is removed.
+   * Adding an outline ensures that badge still keeps it’s meaning.
+   *
+   * @link https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+   *
+   * 2. Adjust baseline to visually center text within pill shape.
+   */
+  --icon-margin: var(--space-xs);
+  align-items: center;
+  background-color: var(--color-primary);
+  border-radius: var(--space-l);
+  color: var(--color-on-primary);
+  display: inline flow-root;
+  font: var(--font-caption);
+  font-weight: 500;
+  outline: var(--border-width-thick) solid transparent; /* 1 */
+  outline-offset: calc(var(--border-width-thick) * -1); /* 1 */
+  padding-block-end: calc(var(--space-2xs) - 0.0625rem); /* 2 */
+  padding-block-start: calc(var(--space-2xs) + 0.0625rem); /* 2 */
+  padding-inline: var(--space-m);
+  white-space: nowrap;
+
+  & + .badge {
+    margin-inline-start: var(--space-2xs);
+  }
+
+  & .icon {
+    inset-block-start: -0.125em;
+  }
+}
+
+.badge--small {
+  font-size: 0.75rem;
+  padding-block-end: calc(var(--space-2xs) / 2 - 0.0625rem);
+  padding-block-start: calc(var(--space-2xs) / 2 + 0.0625rem);
+  padding-inline: var(--space-s);
+}
+
+.badge--green {
+  background: var(--color-green50);
+  color: var(--color-green10);
+}
+
+.badge--purple {
+  background: var(--color-purple45);
+  color: var(--color-neutral99);
+}
+
+.badge--red {
+  background: var(--color-red45);
+  color: var(--color-neutral99);
+}
+
+.badge--yellow {
+  background: var(--color-yellow50);
+  color: var(--color-neutral10);
+}
+
+.badge--offset {
+  background: var(--color-offset);
+  box-shadow: inset 0 0 0 1px var(--color-shadow);
+  color: var(--color-on-offset);
+}
+
+.badge--offset-green {
+  background: var(--color-green90);
+  color: var(--color-green10);
+}
+
+.badge--offset-purple {
+  background: var(--color-purple90);
+  color: var(--color-purple10);
+}
+
+.badge--offset-red {
+  background: var(--color-red90);
+  color: var(--color-red10);
+}
+
+.badge--offset-yellow {
+  background: var(--color-yellow90);
+  color: var(--color-yellow10);
+}

package/components/badge/template.njk

@@ -0,0 +1,7 @@
+<strong class="{{ classes("badge", opts) }}
+  {{- " badge--" + opts.size if opts.size }}
+  {{- " badge--" + opts.color if opts.color }}"
+  {{- attributes(opts.attributes) }}>
+  {{- icon(opts.icon) if opts.icon -}}
+  {{- opts.text | safe -}}
+</strong>

package/components/bookmarklet/macro.njk

@@ -0,0 +1,3 @@
+{% macro bookmarklet(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}