@openvoxproject/voxblocks 0.9.0

package/src/components/file-input/vox-file-input.ts

@@ -0,0 +1,127 @@
+import { html, css } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
+
+/**
+ * A file picker: a themed button backed by a native file input,
+ * showing the selected file name(s).
+ */
+@customElement('vox-file-input')
+export class VoxFileInput extends VoxFieldElement {
+  @property() accept?: string;
+  @property({ type: Boolean }) multiple = false;
+
+  /** Label on the picker button. */
+  @property({ attribute: 'button-label' }) buttonLabel = 'Choose a file';
+
+  @state() private fileNames: string[] = [];
+
+  @query('input') private inputEl!: HTMLInputElement;
+
+  static styles = [
+    fieldStyles,
+    css`
+      input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+      }
+
+      .picker {
+        display: flex;
+        align-items: center;
+        gap: var(--vox-space-3);
+        flex-wrap: wrap;
+      }
+
+      .button {
+        display: inline-flex;
+        align-items: center;
+        padding: 0 var(--vox-space-4);
+        height: 34px;
+        background-color: var(--vox-color-bg-soft);
+        border: 1px dashed var(--vox-color-border);
+        border-radius: var(--vox-radius-md);
+        color: var(--vox-color-text-1);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          border-color var(--vox-transition-fast),
+          color var(--vox-transition-fast);
+      }
+
+      .button:hover {
+        border-color: var(--vox-color-brand-1);
+        color: var(--vox-color-brand-1);
+      }
+
+      input:focus-visible ~ .picker .button {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+
+      .names {
+        font-size: 13px;
+        color: var(--vox-color-text-2);
+      }
+    `,
+  ];
+
+  formResetCallback() {
+    this.fileNames = [];
+    if (this.inputEl) this.inputEl.value = '';
+    this.internals.setFormValue(null);
+  }
+
+  private handleChange() {
+    const files = [...(this.inputEl.files ?? [])];
+    this.fileNames = files.map((f) => f.name);
+
+    const data = new FormData();
+    for (const file of files) data.append(this.name, file);
+    this.internals.setFormValue(files.length > 0 ? data : null);
+
+    this.internals.setValidity(
+      this.required && files.length === 0 ? { valueMissing: true } : {},
+      'Please select a file.',
+      this.inputEl,
+    );
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  render() {
+    return html`
+      <div class="field">
+        ${this.renderLabel('file')}
+        <label>
+          <input
+            id="file"
+            type="file"
+            accept=${ifDefined(this.accept)}
+            ?multiple=${this.multiple}
+            ?disabled=${this.disabled}
+            @change=${this.handleChange}
+          />
+          <span class="picker">
+            <span class="button">${this.buttonLabel}</span>
+            <span class="names">
+              ${this.fileNames.length > 0
+                ? this.fileNames.join(', ')
+                : 'No file selected'}
+            </span>
+          </span>
+        </label>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-file-input': VoxFileInput;
+  }
+}

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

@@ -0,0 +1,109 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A site footer. The default slot holds link columns
+ * (`<vox-footer-column>`), the `bottom` slot holds copyright text.
+ *
+ * @slot - `<vox-footer-column>` elements.
+ * @slot bottom - Copyright / legal line.
+ */
+@customElement('vox-footer')
+export class VoxFooter extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+      background-color: var(--vox-color-bg-alt);
+      border-top: 1px solid var(--vox-color-divider);
+    }
+
+    .inner {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: var(--vox-space-8) var(--vox-space-6);
+    }
+
+    .columns {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: var(--vox-space-6);
+    }
+
+    .bottom {
+      margin-top: var(--vox-space-8);
+      padding-top: var(--vox-space-4);
+      border-top: 1px solid var(--vox-color-divider);
+      font-size: 13px;
+      color: var(--vox-color-text-3);
+    }
+  `;
+
+  render() {
+    return html`
+      <footer>
+        <div class="inner">
+          <div class="columns"><slot></slot></div>
+          <div class="bottom"><slot name="bottom"></slot></div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+/**
+ * One column of footer links.
+ *
+ * @slot - `<a>` elements.
+ */
+@customElement('vox-footer-column')
+export class VoxFooterColumn extends LitElement {
+  @property() heading = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-3);
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-text-1);
+    }
+
+    .links {
+      display: flex;
+      flex-direction: column;
+      gap: var(--vox-space-2);
+    }
+
+    ::slotted(a) {
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      text-decoration: none;
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+  `;
+
+  render() {
+    return html`
+      <h3 class="heading">${this.heading}</h3>
+      <div class="links"><slot></slot></div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-footer': VoxFooter;
+    'vox-footer-column': VoxFooterColumn;
+  }
+}

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

@@ -0,0 +1,54 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A responsive CSS grid container. By default columns auto-fit to the
+ * `min` track width; set `cols` for a fixed column count.
+ *
+ * @slot - Grid items.
+ */
+@customElement('vox-grid')
+export class VoxGrid extends LitElement {
+  /** Fixed number of columns; 0 means auto-fit. */
+  @property({ type: Number }) cols = 0;
+
+  /** Minimum column width used when auto-fitting. */
+  @property() min = '240px';
+
+  @property({ reflect: true }) gap: 'sm' | 'md' | 'lg' = 'md';
+
+  static styles = css`
+    :host {
+      display: grid;
+    }
+
+    :host([gap='sm']) {
+      gap: var(--vox-space-2);
+    }
+
+    :host([gap='md']) {
+      gap: var(--vox-space-4);
+    }
+
+    :host([gap='lg']) {
+      gap: var(--vox-space-6);
+    }
+  `;
+
+  updated() {
+    this.style.gridTemplateColumns =
+      this.cols > 0
+        ? `repeat(${this.cols}, minmax(0, 1fr))`
+        : `repeat(auto-fit, minmax(min(${this.min}, 100%), 1fr))`;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-grid': VoxGrid;
+  }
+}

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

@@ -0,0 +1,109 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A site header with brand, primary navigation, and an actions area.
+ * Nav entries are plain links; mark the current page with
+ * `aria-current="page"`.
+ *
+ * @slot logo - Brand mark shown before the site title.
+ * @slot - Navigation links.
+ * @slot actions - Right-aligned extras (buttons, theme toggle, ...).
+ */
+@customElement('vox-header')
+export class VoxHeader extends LitElement {
+  /** Site title shown next to the logo. */
+  @property({ attribute: 'site-title' }) siteTitle = '';
+
+  /** Where the brand links to. */
+  @property() href = '/';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+      background-color: var(--vox-color-bg);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-6);
+      flex-wrap: wrap;
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: var(--vox-space-3) var(--vox-space-6);
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      color: var(--vox-color-text-1);
+      font-size: 16px;
+      font-weight: 700;
+      text-decoration: none;
+    }
+
+    .brand ::slotted(img),
+    .brand ::slotted(svg) {
+      height: 28px;
+      width: auto;
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-4);
+      flex-wrap: wrap;
+      flex: 1 1 auto;
+    }
+
+    nav ::slotted(a) {
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      transition: color var(--vox-transition-fast);
+    }
+
+    nav ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+    }
+
+    nav ::slotted(a[aria-current='page']) {
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-3);
+    }
+  `;
+
+  render() {
+    return html`
+      <header class="header">
+        <a class="brand" href=${this.href}>
+          <slot name="logo"></slot>
+          ${this.siteTitle ? html`<span>${this.siteTitle}</span>` : nothing}
+        </a>
+        <nav aria-label="Main">
+          <slot></slot>
+        </nav>
+        <div class="actions">
+          <slot name="actions"></slot>
+        </div>
+      </header>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-header': VoxHeader;
+  }
+}

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

@@ -0,0 +1,100 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A page-title header section.
+ *
+ * @slot - Intro text under the heading.
+ * @slot actions - Buttons or CTA links.
+ */
+@customElement('vox-hero')
+export class VoxHero extends LitElement {
+  /** Small label displayed above the heading. */
+  @property() eyebrow = '';
+  @property() heading = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .hero {
+      padding: var(--vox-space-8) 0;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .eyebrow {
+      margin: 0 0 var(--vox-space-2);
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-brand-1);
+    }
+
+    .heading {
+      margin: 0;
+      font-family: var(--vox-font-family-display);
+      font-size: 36px;
+      font-weight: 600;
+      line-height: 1.25;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 44rem;
+      margin-top: var(--vox-space-3);
+      font-size: 17px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .body ::slotted(a) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+
+    .body ::slotted(a:hover) {
+      color: var(--vox-color-brand-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+
+  private hasActions = false;
+
+  private handleActionsSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasActions = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <header class="hero">
+        ${this.eyebrow ? html`<p class="eyebrow">${this.eyebrow}</p>` : nothing}
+        <h1 class="heading">${this.heading}</h1>
+        <div class="body"><slot></slot></div>
+        <div class="actions ${this.hasActions ? 'has-content' : ''}">
+          <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+        </div>
+      </header>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-hero': VoxHero;
+  }
+}

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

@@ -0,0 +1,72 @@
+import { html, nothing } 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 single-line text input with label and help note.
+ * Participates in native form submission via ElementInternals.
+ */
+@customElement('vox-input')
+export class VoxInput extends VoxFieldElement {
+  @property() type = 'text';
+  @property() value = '';
+  @property() placeholder?: string;
+  @property() autocomplete?: string;
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  static styles = fieldStyles;
+
+  formResetCallback() {
+    this.value = '';
+  }
+
+  updated() {
+    this.internals.setFormValue(this.value);
+    const inner = this.renderRoot.querySelector('input');
+    if (inner) this.syncValidity(inner);
+  }
+
+  focus(options?: FocusOptions) {
+    this.renderRoot.querySelector('input')?.focus(options);
+  }
+
+  private handleInput(event: Event) {
+    this.value = (event.target as HTMLInputElement).value;
+  }
+
+  private handleChange() {
+    // Native change events don't cross shadow boundaries; re-dispatch.
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  render() {
+    return html`
+      <div class="field">
+        ${this.renderLabel('input')}
+        <input
+          id="input"
+          class="control"
+          type=${this.type}
+          .value=${live(this.value)}
+          placeholder=${ifDefined(this.placeholder)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          aria-label=${this.label ? nothing : 'text input'}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-input': VoxInput;
+  }
+}

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

@@ -0,0 +1,85 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * Joins inputs, selects, buttons, and text segments into one attached row:
+ *
+ * ```html
+ * <vox-input-group>
+ *   <vox-input aria-label="Search modules"></vox-input>
+ *   <vox-button>Search</vox-button>
+ * </vox-input-group>
+ * ```
+ *
+ * The group marks each child with a `data-vox-group` position attribute
+ * (`start` / `middle` / `end`); VoxBlocks controls flatten their inner
+ * corners accordingly. Plain `<span>` children render as text addons.
+ */
+@customElement('vox-input-group')
+export class VoxInputGroup extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .group {
+      display: flex;
+      align-items: stretch;
+    }
+
+    ::slotted(*) {
+      flex: none;
+    }
+
+    ::slotted(vox-input),
+    ::slotted(vox-select) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    ::slotted(span) {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--vox-space-3);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-border);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    ::slotted(span[data-vox-group='start']) {
+      border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+      border-right: none;
+    }
+
+    ::slotted(span[data-vox-group='end']) {
+      border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+      border-left: none;
+    }
+  `;
+
+  private handleSlotChange(event: Event) {
+    const children = (event.target as HTMLSlotElement).assignedElements();
+    children.forEach((child, index) => {
+      const position =
+        index === 0 ? 'start' : index === children.length - 1 ? 'end' : 'middle';
+      child.setAttribute('data-vox-group', position);
+    });
+  }
+
+  render() {
+    return html`
+      <div class="group" role="group">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-input-group': VoxInputGroup;
+  }
+}