@openvoxproject/voxblocks 0.9.0

package/src/components/link-hub/vox-link-hub.ts

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A grid of prominent links with descriptions, for hub/landing pages.
+ *
+ * @slot - `<vox-link-hub-item>` elements.
+ */
+@customElement('vox-link-hub')
+export class VoxLinkHub extends LitElement {
+  static styles = css`
+    :host {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
+      gap: var(--vox-space-4);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+/**
+ * One link in a `<vox-link-hub>`.
+ *
+ * @slot - Short description under the link title.
+ */
+@customElement('vox-link-hub-item')
+export class VoxLinkHubItem extends LitElement {
+  @property() href = '#';
+  @property() heading = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: block;
+      height: 100%;
+      box-sizing: border-box;
+      padding: var(--vox-space-4);
+      border-bottom: 2px solid var(--vox-color-divider);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a:hover,
+    a:focus-visible {
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .heading {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--vox-color-brand-1);
+    }
+
+    .heading svg {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    a:hover .heading svg {
+      transform: translateX(3px);
+    }
+
+    .body {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+
+  render() {
+    return html`
+      <a href=${this.href}>
+        <span class="heading">
+          ${this.heading}
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M5 12h14" />
+            <path d="m13 6 6 6-6 6" />
+          </svg>
+        </span>
+        <span class="body"><slot></slot></span>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-link-hub': VoxLinkHub;
+    'vox-link-hub-item': VoxLinkHubItem;
+  }
+}

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

@@ -0,0 +1,82 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type LoaderSize = 'sm' | 'md' | 'lg';
+
+/**
+ * A loading spinner. The `label` is announced to screen readers.
+ */
+@customElement('vox-loader')
+export class VoxLoader extends LitElement {
+  @property({ reflect: true }) size: LoaderSize = 'md';
+  @property() label = 'Loading';
+
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .spinner {
+      box-sizing: border-box;
+      border-radius: 50%;
+      border-style: solid;
+      border-color: var(--vox-color-brand-soft);
+      border-top-color: var(--vox-color-brand-3);
+      animation: spin 0.8s linear infinite;
+    }
+
+    :host([size='sm']) .spinner {
+      width: 16px;
+      height: 16px;
+      border-width: 2px;
+    }
+
+    :host([size='md']) .spinner {
+      width: 28px;
+      height: 28px;
+      border-width: 3px;
+    }
+
+    :host([size='lg']) .spinner {
+      width: 44px;
+      height: 44px;
+      border-width: 4px;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation-duration: 2.4s;
+      }
+    }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+  `;
+
+  render() {
+    return html`
+      <div role="status">
+        <div class="spinner"></div>
+        <span class="visually-hidden">${this.label}</span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-loader': VoxLoader;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * Page-number navigation. Children are plain links; mark the current
+ * page with `aria-current="page"`:
+ *
+ * ```html
+ * <vox-pagination>
+ *   <a href="?page=1">1</a>
+ *   <a href="?page=2" aria-current="page">2</a>
+ *   <a href="?page=3">3</a>
+ * </vox-pagination>
+ * ```
+ *
+ * @slot - `<a>` elements (including any prev/next links).
+ */
+@customElement('vox-pagination')
+export class VoxPagination extends LitElement {
+  @property() label = 'Pagination';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      gap: var(--vox-space-1);
+      flex-wrap: wrap;
+    }
+
+    ::slotted(a) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 34px;
+      height: 34px;
+      padding: 0 var(--vox-space-2);
+      border-radius: var(--vox-radius-md);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      transition:
+        color var(--vox-transition-fast),
+        background-color var(--vox-transition-fast);
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    ::slotted(a[aria-current='page']) {
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+      font-weight: 600;
+    }
+  `;
+
+  render() {
+    return html`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-pagination': VoxPagination;
+  }
+}

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

@@ -0,0 +1,82 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A pull quote with optional attribution.
+ *
+ * @slot - Quote text.
+ */
+@customElement('vox-quote')
+export class VoxQuote extends LitElement {
+  @property() attribution = '';
+
+  /** Additional context under the attribution, e.g. a role or company. */
+  @property() detail = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    blockquote {
+      margin: 0;
+      padding-left: var(--vox-space-6);
+      border-left: 4px solid var(--vox-color-brand-3);
+    }
+
+    .text {
+      font-family: var(--vox-font-family-display);
+      font-style: italic;
+      font-size: 20px;
+      line-height: 1.6;
+      color: var(--vox-color-text-1);
+    }
+
+    .text::before {
+      content: '“';
+    }
+
+    .text::after {
+      content: '”';
+    }
+
+    footer {
+      margin-top: var(--vox-space-3);
+      font-size: 14px;
+    }
+
+    .attribution {
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .detail {
+      color: var(--vox-color-text-2);
+    }
+  `;
+
+  render() {
+    return html`
+      <blockquote>
+        <div class="text"><slot></slot></div>
+        ${this.attribution
+          ? html`
+              <footer>
+                <span class="attribution">${this.attribution}</span>
+                ${this.detail
+                  ? html`<span class="detail"> — ${this.detail}</span>`
+                  : nothing}
+              </footer>
+            `
+          : nothing}
+      </blockquote>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-quote': VoxQuote;
+  }
+}

package/src/components/radio/vox-radio-group.ts

@@ -0,0 +1,117 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
+import type { VoxRadio } from './vox-radio.js';
+
+/**
+ * Groups `<vox-radio>` options: manages selection, arrow-key navigation,
+ * and submits the selected value with the surrounding form.
+ *
+ * @slot - `<vox-radio>` elements.
+ */
+@customElement('vox-radio-group')
+export class VoxRadioGroup extends VoxFieldElement {
+  @property() value = '';
+
+  static styles = [
+    fieldStyles,
+    css`
+      .options {
+        display: flex;
+        flex-direction: column;
+        gap: var(--vox-space-2);
+        margin-top: var(--vox-space-1);
+      }
+    `,
+  ];
+
+  private get radios(): VoxRadio[] {
+    return [...this.querySelectorAll<VoxRadio>('vox-radio')];
+  }
+
+  formResetCallback() {
+    this.value = '';
+  }
+
+  updated() {
+    this.internals.setFormValue(this.value || null);
+    this.internals.setValidity(
+      this.required && !this.value ? { valueMissing: true } : {},
+      'Please select an option.',
+      this,
+    );
+    this.syncRadios();
+  }
+
+  private syncRadios() {
+    const radios = this.radios;
+    const anyChecked = radios.some((r) => r.value === this.value && this.value !== '');
+    radios.forEach((radio, index) => {
+      radio.checked = this.value !== '' && radio.value === this.value;
+      // Roving tabindex: the checked radio is tabbable, else the first one.
+      const tabbable = anyChecked ? radio.checked : index === 0;
+      radio.shadowRoot
+        ?.querySelector('.radio')
+        ?.setAttribute('tabindex', tabbable ? '0' : '-1');
+    });
+  }
+
+  private handleSelect(event: Event) {
+    const radio = event.target as VoxRadio;
+    if (!(radio instanceof HTMLElement) || radio.tagName !== 'VOX-RADIO') return;
+    event.stopPropagation();
+    if (this.value !== radio.value) {
+      this.value = radio.value;
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    const keys: Record<string, number> = {
+      ArrowDown: 1,
+      ArrowRight: 1,
+      ArrowUp: -1,
+      ArrowLeft: -1,
+    };
+    const delta = keys[event.key];
+    if (!delta) return;
+    event.preventDefault();
+
+    const radios = this.radios.filter((r) => !r.disabled);
+    if (radios.length === 0) return;
+    const currentIndex = radios.findIndex((r) => r.checked);
+    const nextIndex =
+      (Math.max(currentIndex, 0) + delta + radios.length) % radios.length;
+    const next = radios[nextIndex];
+    next.select();
+    next.shadowRoot?.querySelector<HTMLElement>('.radio')?.focus();
+  }
+
+  render() {
+    return html`
+      <div class="field" role="radiogroup" aria-label=${this.label}>
+        ${this.label
+          ? html`<span class="label">
+              ${this.label}${this.required
+                ? html`<span class="required-mark" aria-hidden="true"> *</span>`
+                : ''}
+            </span>`
+          : ''}
+        <div
+          class="options"
+          @vox-radio-select=${this.handleSelect}
+          @keydown=${this.handleKeydown}
+        >
+          <slot @slotchange=${this.syncRadios}></slot>
+        </div>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-radio-group': VoxRadioGroup;
+  }
+}

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

@@ -0,0 +1,102 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A single radio option. Must be placed inside a `<vox-radio-group>`,
+ * which handles selection state, keyboard navigation, and form value.
+ *
+ * @slot - Radio label.
+ */
+@customElement('vox-radio')
+export class VoxRadio extends LitElement {
+  @property() value = '';
+  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .radio {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--vox-space-2);
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--vox-color-text-1);
+    }
+
+    .radio:focus {
+      outline: none;
+    }
+
+    .circle {
+      flex: none;
+      box-sizing: border-box;
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+      border: 1px solid var(--vox-color-border);
+      border-radius: 50%;
+      background-color: var(--vox-color-bg);
+      transition:
+        border-color var(--vox-transition-fast),
+        box-shadow var(--vox-transition-fast);
+    }
+
+    :host([checked]) .circle {
+      border-color: var(--vox-color-brand-3);
+      border-width: 5px;
+    }
+
+    .radio:focus-visible .circle {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+  `;
+
+  select() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('vox-radio-select', { bubbles: true, composed: true }),
+    );
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.select();
+    }
+  }
+
+  render() {
+    return html`
+      <span
+        class="radio"
+        role="radio"
+        aria-checked=${this.checked ? 'true' : 'false'}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.checked ? '0' : '-1'}
+        @click=${this.select}
+        @keydown=${this.handleKeydown}
+      >
+        <span class="circle" aria-hidden="true"></span>
+        <span class="text"><slot></slot></span>
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-radio': VoxRadio;
+  }
+}

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

@@ -0,0 +1,89 @@
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
+
+/**
+ * A select input. Options are provided as light-DOM `<option>` /
+ * `<optgroup>` children and mirrored into the shadow select:
+ *
+ * ```html
+ * <vox-select label="Distribution">
+ *   <option value="deb">Debian</option>
+ *   <option value="rpm">RHEL</option>
+ * </vox-select>
+ * ```
+ */
+@customElement('vox-select')
+export class VoxSelect extends VoxFieldElement {
+  @property() value = '';
+
+  @query('select') private selectEl!: HTMLSelectElement;
+
+  static styles = [
+    fieldStyles,
+    css`
+      select.control {
+        appearance: none;
+        padding-right: var(--vox-space-8);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right var(--vox-space-3) center;
+        cursor: pointer;
+      }
+    `,
+  ];
+
+  formResetCallback() {
+    this.value = '';
+    this.syncOptions();
+  }
+
+  updated() {
+    this.internals.setFormValue(this.value);
+    if (this.selectEl) this.syncValidity(this.selectEl);
+  }
+
+  private syncOptions() {
+    if (!this.selectEl) return;
+    const slot = this.renderRoot.querySelector('slot');
+    if (!slot) return;
+    this.selectEl.replaceChildren(
+      ...slot
+        .assignedElements()
+        .filter((el) => el instanceof HTMLOptionElement || el instanceof HTMLOptGroupElement)
+        .map((el) => el.cloneNode(true)),
+    );
+    if (this.value) {
+      this.selectEl.value = this.value;
+    }
+    this.value = this.selectEl.value;
+  }
+
+  private handleChange() {
+    this.value = this.selectEl.value;
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  render() {
+    return html`
+      <div class="field">
+        ${this.renderLabel('select')}
+        <select
+          id="select"
+          class="control"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        ></select>
+        ${this.renderNote()}
+      </div>
+      <div hidden><slot @slotchange=${this.syncOptions}></slot></div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-select': VoxSelect;
+  }
+}