@openvoxproject/voxblocks 0.9.0

package/src/components/series-nav/vox-series-nav.ts

@@ -0,0 +1,94 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * Previous/next navigation between pages in a series, like the links at
+ * the bottom of a docs page.
+ */
+@customElement('vox-series-nav')
+export class VoxSeriesNav extends LitElement {
+  @property({ attribute: 'previous-href' }) previousHref?: string;
+  @property({ attribute: 'previous-label' }) previousLabel = '';
+  @property({ attribute: 'next-href' }) nextHref?: string;
+  @property({ attribute: 'next-label' }) nextLabel = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--vox-space-4);
+    }
+
+    a {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 0 1 48%;
+      padding: var(--vox-space-3) var(--vox-space-4);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a:hover,
+    a:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .next {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .direction {
+      font-size: 12px;
+      color: var(--vox-color-text-3);
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vox-color-brand-1);
+    }
+  `;
+
+  render() {
+    return html`
+      <nav aria-label="Series">
+        ${this.previousHref
+          ? html`
+              <a href=${this.previousHref} rel="prev">
+                <span class="direction">← Previous</span>
+                <span class="title">${this.previousLabel}</span>
+              </a>
+            `
+          : nothing}
+        ${this.nextHref
+          ? html`
+              <a class="next" href=${this.nextHref} rel="next">
+                <span class="direction">Next →</span>
+                <span class="title">${this.nextLabel}</span>
+              </a>
+            `
+          : nothing}
+      </nav>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-series-nav': VoxSeriesNav;
+  }
+}

package/src/components/sidenav/vox-sidenav.ts

@@ -0,0 +1,192 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A vertical section navigation, in the style of the OpenVox docs sidebar.
+ *
+ * ```html
+ * <vox-sidenav>
+ *   <vox-sidenav-item href="/" current>Overview</vox-sidenav-item>
+ *   <vox-sidenav-group heading="Installation" open>
+ *     <vox-sidenav-item href="/install/deb">Debian</vox-sidenav-item>
+ *   </vox-sidenav-group>
+ * </vox-sidenav>
+ * ```
+ *
+ * @slot - `<vox-sidenav-item>` and `<vox-sidenav-group>` elements.
+ */
+@customElement('vox-sidenav')
+export class VoxSidenav extends LitElement {
+  @property() label = 'Section';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+  `;
+
+  render() {
+    return html`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+}
+
+/**
+ * A collapsible group of sidenav items.
+ *
+ * @slot - `<vox-sidenav-item>` elements.
+ */
+@customElement('vox-sidenav-group')
+export class VoxSidenavGroup extends LitElement {
+  @property() heading = '';
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-2);
+      width: 100%;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    .chevron {
+      flex: none;
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(90deg);
+    }
+
+    .items {
+      display: none;
+      flex-direction: column;
+      gap: 2px;
+      padding-left: var(--vox-space-3);
+      border-left: 1px solid var(--vox-color-divider);
+      margin-left: var(--vox-space-3);
+    }
+
+    :host([open]) .items {
+      display: flex;
+    }
+  `;
+
+  private toggle() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        @click=${this.toggle}
+      >
+        ${this.heading}
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m9 6 6 6-6 6" />
+        </svg>
+      </button>
+      <div class="items"><slot></slot></div>
+    `;
+  }
+}
+
+/**
+ * One sidenav link. Set `current` on the active page's item.
+ *
+ * @slot - Link text.
+ */
+@customElement('vox-sidenav-item')
+export class VoxSidenavItem extends LitElement {
+  @property() href = '#';
+  @property({ type: Boolean, reflect: true }) current = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: block;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      text-decoration: none;
+      transition:
+        color var(--vox-transition-fast),
+        background-color var(--vox-transition-fast);
+    }
+
+    a:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    :host([current]) a {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+    }
+  `;
+
+  render() {
+    return html`
+      <a href=${this.href} aria-current=${this.current ? 'page' : 'false'}>
+        <slot></slot>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-sidenav': VoxSidenav;
+    'vox-sidenav-group': VoxSidenavGroup;
+    'vox-sidenav-item': VoxSidenavItem;
+  }
+}

package/src/components/sponsor/vox-sponsor.ts

@@ -0,0 +1,187 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A group of sponsors under a shared tier, for sponsorship/funding pages.
+ *
+ * @slot description - Optional text under the heading, e.g. what the tier means.
+ * @slot - `<vox-sponsor>` elements.
+ */
+@customElement('vox-sponsor-tier')
+export class VoxSponsorTier extends LitElement {
+  @property() heading = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 22px;
+      font-weight: 700;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .description {
+      margin: var(--vox-space-2) 0 0;
+      font-size: 15px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .description:not(.has-content) {
+      display: none;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+      gap: var(--vox-space-4);
+      margin-top: var(--vox-space-6);
+    }
+  `;
+
+  private hasDescription = false;
+
+  private handleDescriptionSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasDescription = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <h2 class="heading">${this.heading}</h2>
+      <div class="description ${this.hasDescription ? 'has-content' : ''}">
+        <slot
+          name="description"
+          @slotchange=${this.handleDescriptionSlotChange}
+        ></slot>
+      </div>
+      <div class="grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+/**
+ * One sponsor card in a `<vox-sponsor-tier>`, linking to the sponsor's site.
+ *
+ * @slot - Optional description, e.g. contribution type and amount.
+ */
+@customElement('vox-sponsor')
+export class VoxSponsor extends LitElement {
+  @property() name = '';
+  @property() href?: string;
+  @property() logo?: string;
+  @property() target?: string;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .sponsor {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+      font-family: var(--vox-font-family-base);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a.sponsor:hover,
+    a.sponsor:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a.sponsor:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 64px;
+      background-color: var(--vox-color-bg-elv);
+      border-radius: var(--vox-radius-md);
+    }
+
+    .logo:not(.has-logo) {
+      display: none;
+    }
+
+    .logo img {
+      max-width: 80%;
+      max-height: 40px;
+      object-fit: contain;
+    }
+
+    .name {
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .body:not(.has-content) {
+      display: none;
+    }
+  `;
+
+  private hasBody = false;
+
+  private handleBodySlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasBody = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    const inner = html`
+      <div class="logo ${this.logo ? 'has-logo' : ''}">
+        ${this.logo
+          ? html`<img src=${this.logo} alt=${this.name} />`
+          : nothing}
+      </div>
+      <span class="name">${this.name}</span>
+      <div class="body ${this.hasBody ? 'has-content' : ''}">
+        <slot @slotchange=${this.handleBodySlotChange}></slot>
+      </div>
+    `;
+
+    return this.href !== undefined
+      ? html`<a
+          class="sponsor"
+          href=${this.href}
+          target=${this.target ?? nothing}
+          >${inner}</a
+        >`
+      : html`<div class="sponsor">${inner}</div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-sponsor-tier': VoxSponsorTier;
+    'vox-sponsor': VoxSponsor;
+  }
+}

package/src/components/stat/vox-stat.ts

@@ -0,0 +1,55 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A large statistic with a label, e.g. module counts or contributors.
+ *
+ * @slot - Optional supporting description.
+ */
+@customElement('vox-stat')
+export class VoxStat extends LitElement {
+  @property() value = '';
+  @property() label = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .value {
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 1.1;
+      color: var(--vox-color-brand-1);
+    }
+
+    .label {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .description {
+      margin-top: var(--vox-space-1);
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="value">${this.value}</div>
+      <div class="label">${this.label}</div>
+      <div class="description"><slot></slot></div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-stat': VoxStat;
+  }
+}

package/src/components/step-indicator/vox-step-indicator.ts

@@ -0,0 +1,152 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type StepState = 'complete' | 'current' | 'upcoming';
+
+/**
+ * Shows progress through a multi-step process.
+ *
+ * @slot - `<vox-step>` elements.
+ */
+@customElement('vox-step-indicator')
+export class VoxStepIndicator extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .steps {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    ::slotted(vox-step) {
+      flex: 1 1 0;
+    }
+  `;
+
+  private numberSteps() {
+    this.querySelectorAll('vox-step').forEach((step, index) => {
+      (step as VoxStep).number = index + 1;
+    });
+  }
+
+  render() {
+    return html`
+      <div class="steps" role="list" aria-label="Progress">
+        <slot @slotchange=${this.numberSteps}></slot>
+      </div>
+    `;
+  }
+}
+
+/**
+ * One step in a `<vox-step-indicator>`.
+ */
+@customElement('vox-step')
+export class VoxStep extends LitElement {
+  @property() label = '';
+  @property({ reflect: true }) state: StepState = 'upcoming';
+  @property({ type: Number }) number = 1;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .step {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--vox-space-2);
+      padding: 0 var(--vox-space-2);
+    }
+
+    /* Connector line to the previous step. */
+    :host(:not(:first-child)) .step::before {
+      content: '';
+      position: absolute;
+      top: 14px;
+      right: 50%;
+      width: 100%;
+      height: 2px;
+      background-color: var(--vox-color-divider);
+      z-index: 0;
+    }
+
+    :host([state='complete']) .step::before {
+      background-color: var(--vox-color-brand-3);
+    }
+
+    .marker {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid var(--vox-color-divider);
+      background-color: var(--vox-color-bg);
+      color: var(--vox-color-text-2);
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    :host([state='complete']) .marker {
+      background-color: var(--vox-color-brand-3);
+      border-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    :host([state='current']) .marker {
+      border-color: var(--vox-color-brand-3);
+      color: var(--vox-color-brand-1);
+    }
+
+    .marker svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .label {
+      font-size: 13px;
+      color: var(--vox-color-text-2);
+    }
+
+    :host([state='current']) .label {
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+  `;
+
+  render() {
+    return html`
+      <div
+        class="step"
+        role="listitem"
+        aria-current=${this.state === 'current' ? 'step' : 'false'}
+      >
+        <span class="marker">
+          ${this.state === 'complete'
+            ? html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="m4 12 5 5L20 6" />
+              </svg>`
+            : this.number}
+        </span>
+        <span class="label">${this.label}</span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-step-indicator': VoxStepIndicator;
+    'vox-step': VoxStep;
+  }
+}