@openvoxproject/voxblocks 0.9.0

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

@@ -0,0 +1,165 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+export type ButtonVariant = 'brand' | 'alt' | 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+/**
+ * A button styled after the OpenVox docs action buttons.
+ * Renders an anchor when `href` is set, a real button otherwise.
+ *
+ * @slot - Button label.
+ */
+@customElement('vox-button')
+export class VoxButton extends LitElement {
+  @property() variant: ButtonVariant = 'brand';
+  @property() size: ButtonSize = 'md';
+  @property() href?: string;
+  @property() target?: string;
+  @property() type: 'button' | 'submit' | 'reset' = 'button';
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--vox-space-2);
+      border: 1px solid transparent;
+      border-radius: var(--vox-radius-full);
+      font-family: var(--vox-font-family-base);
+      font-weight: 600;
+      line-height: 1;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+      transition:
+        color var(--vox-transition-base),
+        background-color var(--vox-transition-base),
+        border-color var(--vox-transition-base);
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .sm {
+      font-size: 12px;
+      padding: 0 var(--vox-space-3);
+      height: 28px;
+    }
+
+    .md {
+      font-size: 14px;
+      padding: 0 20px;
+      height: 38px;
+    }
+
+    .lg {
+      font-size: 16px;
+      padding: 0 var(--vox-space-6);
+      height: 48px;
+    }
+
+    .brand {
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    .brand:hover:not(:disabled) {
+      background-color: var(--vox-color-brand-2);
+    }
+
+    .alt {
+      background-color: var(--vox-color-bg-soft);
+      color: var(--vox-color-text-1);
+      border-color: var(--vox-color-divider);
+    }
+
+    .alt:hover:not(:disabled) {
+      border-color: var(--vox-color-brand-1);
+      color: var(--vox-color-brand-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    .danger:hover:not(:disabled) {
+      background-color: var(--vox-color-danger-2);
+    }
+
+    .ghost {
+      background-color: transparent;
+      color: var(--vox-color-brand-1);
+    }
+
+    .ghost:hover:not(:disabled) {
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    /* Corner flattening when placed inside a <vox-input-group>. */
+    :host([data-vox-group]) .button {
+      height: 100%;
+      border-radius: 0;
+    }
+
+    :host([data-vox-group='start']) .button {
+      border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+    }
+
+    :host([data-vox-group='end']) .button {
+      border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+    }
+  `;
+
+  render() {
+    const classes = classMap({
+      button: true,
+      [this.variant]: true,
+      [this.size]: true,
+    });
+
+    if (this.href !== undefined && !this.disabled) {
+      return html`
+        <a
+          class=${classes}
+          href=${this.href}
+          target=${ifDefined(this.target)}
+          rel=${ifDefined(this.target === '_blank' ? 'noreferrer' : undefined)}
+        >
+          <slot></slot>
+        </a>
+      `;
+    }
+
+    return html`
+      <button class=${classes} type=${this.type} ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-button': VoxButton;
+  }
+}

package/src/components/calendar-tile/vox-calendar-tile.ts

@@ -0,0 +1,74 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A compact date tile for event listings. Give it an ISO date
+ * (`date="2026-09-18"`); month and day render localized.
+ */
+@customElement('vox-calendar-tile')
+export class VoxCalendarTile extends LitElement {
+  /** ISO date string, e.g. "2026-09-18". */
+  @property() date = '';
+
+  /** BCP 47 locale for month formatting; defaults to the page locale. */
+  @property() locale?: string;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .tile {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 56px;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      overflow: hidden;
+      background-color: var(--vox-color-bg-elv);
+    }
+
+    .month {
+      align-self: stretch;
+      padding: 2px var(--vox-space-2);
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      text-align: center;
+    }
+
+    .day {
+      padding: var(--vox-space-1) var(--vox-space-2);
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--vox-color-text-1);
+    }
+  `;
+
+  render() {
+    const parsed = new Date(`${this.date}T00:00:00`);
+    const valid = !Number.isNaN(parsed.getTime());
+    const month = valid
+      ? parsed.toLocaleString(this.locale, { month: 'short' })
+      : '—';
+    const day = valid ? parsed.getDate() : '–';
+
+    return html`
+      <time class="tile" datetime=${this.date}>
+        <span class="month">${month}</span>
+        <span class="day">${day}</span>
+      </time>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-calendar-tile': VoxCalendarTile;
+  }
+}

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

@@ -0,0 +1,97 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type CalloutVariant = 'info' | 'tip' | 'warning' | 'danger';
+
+const DEFAULT_HEADINGS: Record<CalloutVariant, string> = {
+  info: 'Info',
+  tip: 'Tip',
+  warning: 'Warning',
+  danger: 'Danger',
+};
+
+/**
+ * An admonition block matching the custom containers on the OpenVox docs
+ * (::: tip, ::: warning, ...).
+ *
+ * @slot - Callout body content.
+ */
+@customElement('vox-callout')
+export class VoxCallout extends LitElement {
+  @property() variant: CalloutVariant = 'info';
+
+  /** Heading text; defaults to the capitalized variant name. */
+  @property() heading?: string;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .callout {
+      border-radius: var(--vox-radius-md);
+      padding: var(--vox-space-4);
+      font-family: var(--vox-font-family-base);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-2);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .info {
+      background-color: var(--vox-color-bg-soft);
+    }
+    .info .heading {
+      color: var(--vox-color-text-1);
+    }
+
+    .tip {
+      background-color: var(--vox-color-tip-soft);
+    }
+    .tip .heading {
+      color: var(--vox-color-tip-1);
+    }
+
+    .warning {
+      background-color: var(--vox-color-warning-soft);
+    }
+    .warning .heading {
+      color: var(--vox-color-warning-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-soft);
+    }
+    .danger .heading {
+      color: var(--vox-color-danger-1);
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="callout ${this.variant}" role="note">
+        <p class="heading">${this.heading ?? DEFAULT_HEADINGS[this.variant]}</p>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-callout': VoxCallout;
+  }
+}

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

@@ -0,0 +1,147 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A feature card in the style of the OpenVox docs landing page tiles.
+ * Becomes a single large link when `href` is set.
+ *
+ * @slot icon - Optional icon or emoji shown above the heading.
+ * @slot badge - Optional badge or label shown in the top-right corner.
+ * @slot - Card body text.
+ * @slot footer - Optional content pinned to the bottom of the card, e.g. stats.
+ */
+@customElement('vox-card')
+export class VoxCard extends LitElement {
+  @property() heading = '';
+  @property() href?: string;
+  @property() target?: string;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+      padding: var(--vox-space-6);
+      font-family: var(--vox-font-family-base);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    .badge {
+      position: absolute;
+      top: var(--vox-space-6);
+      right: var(--vox-space-6);
+    }
+
+    .badge:not(.has-badge) {
+      display: none;
+    }
+
+    a.card:hover,
+    a.card:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a.card:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      margin-bottom: var(--vox-space-4);
+      background-color: var(--vox-color-bg-elv);
+      border-radius: var(--vox-radius-md);
+      font-size: 24px;
+    }
+
+    .icon:not(.has-icon) {
+      display: none;
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.5;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      margin-top: var(--vox-space-2);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .footer {
+      margin-top: auto;
+      padding-top: var(--vox-space-4);
+    }
+
+    .footer:not(.has-footer) {
+      display: none;
+    }
+  `;
+
+  private hasIcon = false;
+  private hasBadge = false;
+  private hasFooter = false;
+
+  private handleIconSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  private handleBadgeSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasBadge = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  private handleFooterSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    const inner = html`
+      <div class="badge ${this.hasBadge ? 'has-badge' : ''}">
+        <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
+      </div>
+      <div class="icon ${this.hasIcon ? 'has-icon' : ''}">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+      </div>
+      <h3 class="heading">${this.heading}</h3>
+      <div class="body"><slot></slot></div>
+      <div class="footer ${this.hasFooter ? 'has-footer' : ''}">
+        <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+      </div>
+    `;
+
+    return this.href !== undefined
+      ? html`<a class="card" href=${this.href} target=${this.target ?? nothing}>${inner}</a>`
+      : html`<div class="card">${inner}</div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-card': VoxCard;
+  }
+}

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

@@ -0,0 +1,101 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { VoxFieldElement, checkableStyles } from '../../internal/field.js';
+
+/**
+ * A checkbox with a custom visual that follows the VoxBlocks theme.
+ *
+ * @slot - Checkbox label.
+ */
+@customElement('vox-checkbox')
+export class VoxCheckbox extends VoxFieldElement {
+  @property({ type: Boolean, reflect: true }) checked = false;
+  @property() value = 'on';
+
+  static styles = [
+    checkableStyles,
+    css`
+      .box {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        margin-top: 2px;
+        border: 1px solid var(--vox-color-border);
+        border-radius: var(--vox-radius-sm);
+        background-color: var(--vox-color-bg);
+        color: var(--vox-color-text-inverse);
+        transition:
+          background-color var(--vox-transition-fast),
+          border-color var(--vox-transition-fast);
+      }
+
+      .box svg {
+        width: 12px;
+        height: 12px;
+        opacity: 0;
+      }
+
+      input:checked + .box {
+        background-color: var(--vox-color-brand-3);
+        border-color: var(--vox-color-brand-3);
+      }
+
+      input:checked + .box svg {
+        opacity: 1;
+      }
+
+      input:focus-visible + .box {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+    `,
+  ];
+
+  formResetCallback() {
+    this.checked = false;
+  }
+
+  updated() {
+    this.internals.setFormValue(this.checked ? this.value : null);
+    this.internals.setValidity(
+      this.required && !this.checked
+        ? { valueMissing: true }
+        : {},
+      'Please check this box.',
+      this.renderRoot.querySelector('input') ?? undefined,
+    );
+  }
+
+  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"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="box" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m4 12 5 5L20 6" />
+          </svg>
+        </span>
+        <span class="text"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-checkbox': VoxCheckbox;
+  }
+}

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

@@ -0,0 +1,69 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A call-to-action link with a trailing arrow that nudges on hover.
+ *
+ * @slot - Link text.
+ */
+@customElement('vox-cta')
+export class VoxCta extends LitElement {
+  @property() href = '#';
+  @property() target?: string;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      color: var(--vox-color-brand-1);
+      font-size: 15px;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: var(--vox-color-brand-2);
+      text-decoration: underline;
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    a:hover svg {
+      transform: translateX(3px);
+    }
+  `;
+
+  render() {
+    return html`
+      <a href=${this.href} target=${this.target ?? ''}>
+        <slot></slot>
+        <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>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-cta': VoxCta;
+  }
+}