@openvoxproject/voxblocks 0.9.0

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

@@ -0,0 +1,64 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A horizontal secondary navigation bar. Children are plain links;
+ * mark the active one with `aria-current="page"`.
+ *
+ * @slot - `<a>` elements.
+ */
+@customElement('vox-subnav')
+export class VoxSubnav extends LitElement {
+  /** Accessible name distinguishing this nav from others on the page. */
+  @property() label = 'Secondary';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      gap: var(--vox-space-1);
+      overflow-x: auto;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    ::slotted(a) {
+      padding: var(--vox-space-2) var(--vox-space-4);
+      margin-bottom: -1px;
+      border-bottom: 2px solid transparent;
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      white-space: nowrap;
+      transition: color var(--vox-transition-fast);
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-text-1);
+    }
+
+    ::slotted(a[aria-current='page']) {
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+  `;
+
+  render() {
+    return html`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-subnav': VoxSubnav;
+  }
+}

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

@@ -0,0 +1,90 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { VoxFieldElement, checkableStyles } from '../../internal/field.js';
+
+/**
+ * A toggle switch for on/off settings.
+ *
+ * @slot - Switch label.
+ */
+@customElement('vox-switch')
+export class VoxSwitch extends VoxFieldElement {
+  @property({ type: Boolean, reflect: true }) checked = false;
+  @property() value = 'on';
+
+  static styles = [
+    checkableStyles,
+    css`
+      .track {
+        flex: none;
+        position: relative;
+        width: 36px;
+        height: 20px;
+        margin-top: 1px;
+        border-radius: var(--vox-radius-full);
+        background-color: var(--vox-color-border);
+        transition: background-color var(--vox-transition-fast);
+      }
+
+      .track::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: var(--vox-color-bg);
+        transition: transform var(--vox-transition-fast);
+      }
+
+      input:checked + .track {
+        background-color: var(--vox-color-brand-3);
+      }
+
+      input:checked + .track::after {
+        transform: translateX(16px);
+      }
+
+      input:focus-visible + .track {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+    `,
+  ];
+
+  formResetCallback() {
+    this.checked = false;
+  }
+
+  updated() {
+    this.internals.setFormValue(this.checked ? this.value : null);
+  }
+
+  private handleChange(event: Event) {
+    this.checked = (event.target as HTMLInputElement).checked;
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  render() {
+    return html`
+      <label class="check">
+        <input
+          type="checkbox"
+          role="switch"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="track" aria-hidden="true"></span>
+        <span class="text"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-switch': VoxSwitch;
+  }
+}

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

@@ -0,0 +1,201 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * Tabbed content:
+ *
+ * ```html
+ * <vox-tabs>
+ *   <vox-tab slot="tab" panel="deb" selected>Debian</vox-tab>
+ *   <vox-tab slot="tab" panel="rpm">RHEL</vox-tab>
+ *   <vox-tab-panel name="deb">...</vox-tab-panel>
+ *   <vox-tab-panel name="rpm">...</vox-tab-panel>
+ * </vox-tabs>
+ * ```
+ *
+ * @slot tab - `<vox-tab>` elements.
+ * @slot - `<vox-tab-panel>` elements.
+ * @fires vox-tab-change - When the selected tab changes; `detail.panel` names it.
+ */
+@customElement('vox-tabs')
+export class VoxTabs extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .tablist {
+      display: flex;
+      gap: var(--vox-space-1);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+  `;
+
+  private get tabs(): VoxTab[] {
+    return [...this.querySelectorAll<VoxTab>('vox-tab')];
+  }
+
+  private get panels(): VoxTabPanel[] {
+    return [...this.querySelectorAll<VoxTabPanel>('vox-tab-panel')];
+  }
+
+  private sync() {
+    const tabs = this.tabs;
+    if (tabs.length > 0 && !tabs.some((t) => t.selected)) {
+      tabs[0].selected = true;
+    }
+    const selected = tabs.find((t) => t.selected);
+    this.panels.forEach((panel) => {
+      panel.active = panel.name === selected?.panel;
+    });
+  }
+
+  private handleSelect(event: Event) {
+    const tab = event.target as VoxTab;
+    if (tab.tagName !== 'VOX-TAB') return;
+    this.tabs.forEach((t) => (t.selected = t === tab));
+    this.sync();
+    this.dispatchEvent(
+      new CustomEvent('vox-tab-change', {
+        detail: { panel: tab.panel },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    const deltas: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 };
+    const delta = deltas[event.key];
+    if (!delta) return;
+    event.preventDefault();
+    const tabs = this.tabs;
+    const index = tabs.findIndex((t) => t.selected);
+    const next = tabs[(index + delta + tabs.length) % tabs.length];
+    next.select();
+    next.focusTab();
+  }
+
+  render() {
+    return html`
+      <div
+        class="tablist"
+        role="tablist"
+        @vox-tab-select=${this.handleSelect}
+        @keydown=${this.handleKeydown}
+      >
+        <slot name="tab" @slotchange=${this.sync}></slot>
+      </div>
+      <slot @slotchange=${this.sync}></slot>
+    `;
+  }
+}
+
+/**
+ * A tab button; `panel` names the `<vox-tab-panel>` it controls.
+ *
+ * @slot - Tab label.
+ */
+@customElement('vox-tab')
+export class VoxTab extends LitElement {
+  @property() panel = '';
+  @property({ type: Boolean, reflect: true }) selected = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .tab {
+      padding: var(--vox-space-2) var(--vox-space-4);
+      margin-bottom: -1px;
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: var(--vox-color-text-2);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: color var(--vox-transition-fast);
+    }
+
+    .tab:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    .tab:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    :host([selected]) .tab {
+      color: var(--vox-color-brand-1);
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+  `;
+
+  select() {
+    this.dispatchEvent(
+      new CustomEvent('vox-tab-select', { bubbles: true, composed: true }),
+    );
+  }
+
+  focusTab() {
+    this.renderRoot.querySelector<HTMLElement>('.tab')?.focus();
+  }
+
+  render() {
+    return html`
+      <button
+        class="tab"
+        role="tab"
+        aria-selected=${this.selected ? 'true' : 'false'}
+        tabindex=${this.selected ? '0' : '-1'}
+        @click=${this.select}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+/**
+ * Content shown when the matching `<vox-tab>` is selected.
+ *
+ * @slot - Panel content.
+ */
+@customElement('vox-tab-panel')
+export class VoxTabPanel extends LitElement {
+  @property() name = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  static styles = css`
+    :host {
+      display: none;
+      font-family: var(--vox-font-family-base);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+      padding: var(--vox-space-4) 0;
+    }
+
+    :host([active]) {
+      display: block;
+    }
+  `;
+
+  render() {
+    return html`<div role="tabpanel"><slot></slot></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-tabs': VoxTabs;
+    'vox-tab': VoxTab;
+    'vox-tab-panel': VoxTabPanel;
+  }
+}

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

@@ -0,0 +1,75 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
+
+/**
+ * A multi-line text input with label and help note.
+ */
+@customElement('vox-textarea')
+export class VoxTextarea extends VoxFieldElement {
+  @property() value = '';
+  @property() placeholder?: string;
+  @property({ type: Number }) rows = 4;
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  static styles = [
+    fieldStyles,
+    css`
+      textarea.control {
+        resize: vertical;
+        min-height: 4em;
+      }
+    `,
+  ];
+
+  formResetCallback() {
+    this.value = '';
+  }
+
+  updated() {
+    this.internals.setFormValue(this.value);
+    const inner = this.renderRoot.querySelector('textarea');
+    if (inner) this.syncValidity(inner);
+  }
+
+  focus(options?: FocusOptions) {
+    this.renderRoot.querySelector('textarea')?.focus(options);
+  }
+
+  private handleInput(event: Event) {
+    this.value = (event.target as HTMLTextAreaElement).value;
+  }
+
+  private handleChange() {
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  render() {
+    return html`
+      <div class="field">
+        ${this.renderLabel('textarea')}
+        <textarea
+          id="textarea"
+          class="control"
+          rows=${this.rows}
+          .value=${live(this.value)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        ></textarea>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-textarea': VoxTextarea;
+  }
+}

package/src/components/theme-toggle/vox-theme-toggle.ts

@@ -0,0 +1,164 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+const STORAGE_KEY = 'vox-theme';
+const THEME_ATTR = 'data-vox-theme';
+
+/**
+ * A self-contained light/dark theme switch. Reads and writes
+ * `data-vox-theme` on `<html>` and persists the choice to
+ * `localStorage['vox-theme']` — the same convention VoxBlocks' own dark
+ * mode support already uses, so this is a drop-in control for it.
+ *
+ * A page still needs its own blocking inline script in `<head>` to apply
+ * the stored (or system) theme before first paint — a custom element
+ * can't upgrade in time to prevent that flash. See the docs page for the
+ * exact snippet.
+ *
+ * Fires `vox-theme-change` with `detail: { theme: 'light' | 'dark' }`.
+ */
+@customElement('vox-theme-toggle')
+export class VoxThemeToggle extends LitElement {
+  /** Accessible label while the page is in light mode. */
+  @property({ attribute: 'light-label' }) lightLabel = 'Switch to dark theme';
+
+  /** Accessible label while the page is in dark mode. */
+  @property({ attribute: 'dark-label' }) darkLabel = 'Switch to light theme';
+
+  @state() private dark = false;
+
+  private media = window.matchMedia('(prefers-color-scheme: dark)');
+  private observer?: MutationObserver;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-full);
+    }
+
+    .track {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      width: 44px;
+      height: 24px;
+      padding: 0 5px;
+      border-radius: var(--vox-radius-full);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-divider);
+    }
+
+    .track svg {
+      position: relative;
+      width: 13px;
+      height: 13px;
+      flex: none;
+      color: var(--vox-color-text-3);
+    }
+
+    .thumb {
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: var(--vox-color-bg-elv);
+      box-shadow: var(--vox-shadow-1);
+      transition: transform var(--vox-transition-base);
+    }
+
+    :host([dark]) .thumb {
+      transform: translateX(20px);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncFromDocument();
+    this.observer = new MutationObserver(() => this.syncFromDocument());
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [THEME_ATTR],
+    });
+    this.media.addEventListener('change', this.handleSystemChange);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    this.media.removeEventListener('change', this.handleSystemChange);
+  }
+
+  private handleSystemChange = (event: MediaQueryListEvent) => {
+    if (localStorage.getItem(STORAGE_KEY)) return;
+    document.documentElement.setAttribute(THEME_ATTR, event.matches ? 'dark' : 'light');
+  };
+
+  private syncFromDocument() {
+    const dark = document.documentElement.getAttribute(THEME_ATTR) === 'dark';
+    this.dark = dark;
+    this.toggleAttribute('dark', dark);
+  }
+
+  private handleClick() {
+    const next = this.dark ? 'light' : 'dark';
+    document.documentElement.setAttribute(THEME_ATTR, next);
+    localStorage.setItem(STORAGE_KEY, next);
+    this.dispatchEvent(
+      new CustomEvent('vox-theme-change', {
+        detail: { theme: next },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    const label = this.dark ? this.darkLabel : this.lightLabel;
+    return html`
+      <button
+        type="button"
+        role="switch"
+        aria-checked=${this.dark}
+        aria-label=${label}
+        title=${label}
+        @click=${this.handleClick}
+      >
+        <span class="track">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="4" />
+            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+          </svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
+          </svg>
+          <span class="thumb"></span>
+        </span>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-theme-toggle': VoxThemeToggle;
+  }
+}

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

@@ -0,0 +1,100 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A vertical timeline of dated events.
+ *
+ * @slot - `<vox-timeline-item>` elements.
+ */
+@customElement('vox-timeline')
+export class VoxTimeline extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+/**
+ * One event on a `<vox-timeline>`.
+ *
+ * @slot - Event description.
+ */
+@customElement('vox-timeline-item')
+export class VoxTimelineItem extends LitElement {
+  @property() heading = '';
+  @property() date = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .item {
+      position: relative;
+      padding: 0 0 var(--vox-space-6) var(--vox-space-6);
+      border-left: 2px solid var(--vox-color-divider);
+    }
+
+    :host(:last-child) .item {
+      border-left-color: transparent;
+      padding-bottom: 0;
+    }
+
+    .dot {
+      position: absolute;
+      top: 4px;
+      left: -7px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--vox-color-brand-3);
+      border: 2px solid var(--vox-color-bg);
+    }
+
+    .date {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-text-3);
+    }
+
+    .heading {
+      margin: var(--vox-space-1) 0 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="item">
+        <span class="dot" aria-hidden="true"></span>
+        ${this.date ? html`<div class="date">${this.date}</div>` : nothing}
+        <h3 class="heading">${this.heading}</h3>
+        <div class="body"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-timeline': VoxTimeline;
+    'vox-timeline-item': VoxTimelineItem;
+  }
+}