@openvoxproject/voxblocks 0.9.0

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

@@ -0,0 +1,105 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A centered, full-width call-to-action panel: heading, supporting copy,
+ * and a row of buttons — the closing pitch at the bottom of a page.
+ *
+ * @slot - Supporting copy under the heading.
+ * @slot actions - Buttons or CTA links.
+ */
+@customElement('vox-cta-band')
+export class VoxCtaBand extends LitElement {
+  @property() heading = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .band {
+      text-align: center;
+      padding: var(--vox-space-8);
+      background-color: var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    .heading {
+      margin: 0;
+      font-family: var(--vox-font-family-display);
+      font-size: 28px;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 36rem;
+      margin: var(--vox-space-3) auto 0;
+      font-size: 16px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .body:not(.has-content) {
+      display: none;
+    }
+
+    .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);
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+
+  private hasBody = false;
+  private hasActions = false;
+
+  private handleBodySlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasBody = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  private handleActionsSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasActions = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <div class="band">
+        ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : nothing}
+        <div class="body ${this.hasBody ? 'has-content' : ''}">
+          <slot @slotchange=${this.handleBodySlotChange}></slot>
+        </div>
+        <div class="actions ${this.hasActions ? 'has-content' : ''}">
+          <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-cta-band': VoxCtaBand;
+  }
+}

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

@@ -0,0 +1,176 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+
+/**
+ * A modal dialog built on the native `<dialog>` element, which provides
+ * focus trapping and Escape-to-close for free.
+ *
+ * @slot - Dialog body.
+ * @slot footer - Action buttons.
+ * @fires vox-close - When the dialog closes.
+ */
+@customElement('vox-dialog')
+export class VoxDialog extends LitElement {
+  @property() heading = '';
+  @property({ type: Boolean }) open = false;
+
+  /** Close when the backdrop is clicked. */
+  @property({ type: Boolean, attribute: 'light-dismiss' }) lightDismiss = false;
+
+  @query('dialog') private dialogEl!: HTMLDialogElement;
+
+  static styles = css`
+    dialog {
+      box-sizing: border-box;
+      width: min(90vw, 480px);
+      padding: 0;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-lg);
+      background-color: var(--vox-color-bg-elv);
+      color: var(--vox-color-text-1);
+      font-family: var(--vox-font-family-base);
+      box-shadow: var(--vox-shadow-2);
+    }
+
+    dialog::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4) var(--vox-space-6);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      cursor: pointer;
+    }
+
+    .close:hover {
+      color: var(--vox-color-text-1);
+      background-color: var(--vox-color-bg-soft);
+    }
+
+    .close:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+    }
+
+    .close svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .body {
+      padding: var(--vox-space-6);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4) var(--vox-space-6);
+      border-top: 1px solid var(--vox-color-divider);
+    }
+
+    .footer:not(.has-content) {
+      display: none;
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+
+  private hasFooter = false;
+
+  show() {
+    this.open = true;
+  }
+
+  close() {
+    this.open = false;
+  }
+
+  updated() {
+    if (this.open && !this.dialogEl.open) {
+      this.dialogEl.showModal();
+    } else if (!this.open && this.dialogEl.open) {
+      this.dialogEl.close();
+    }
+  }
+
+  private handleNativeClose() {
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent('vox-close', { bubbles: true, composed: true }),
+    );
+  }
+
+  private handleClick(event: MouseEvent) {
+    // A click on the backdrop targets the <dialog> element itself.
+    if (this.lightDismiss && event.target === this.dialogEl) {
+      this.close();
+    }
+  }
+
+  private handleFooterSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <dialog
+        aria-label=${this.heading || nothing}
+        @close=${this.handleNativeClose}
+        @click=${this.handleClick}
+      >
+        <div class="header">
+          <h2 class="heading">${this.heading}</h2>
+          <button class="close" aria-label="Close dialog" @click=${this.close}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="body"><slot></slot></div>
+        <div class="footer ${this.hasFooter ? 'has-content' : ''}">
+          <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-dialog': VoxDialog;
+  }
+}

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

@@ -0,0 +1,98 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A single show/hide toggle for supplementary content.
+ *
+ * @slot - Hidden content.
+ * @fires vox-toggle - When the content is shown or hidden.
+ */
+@customElement('vox-disclosure')
+export class VoxDisclosure extends LitElement {
+  @property() summary = 'Show details';
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      padding: 0;
+      background: none;
+      border: none;
+      color: var(--vox-color-brand-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-2);
+      text-decoration: underline;
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    .chevron {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(90deg);
+    }
+
+    .panel {
+      margin-top: var(--vox-space-3);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .panel[hidden] {
+      display: none;
+    }
+  `;
+
+  toggle() {
+    this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent('vox-toggle', { bubbles: true, composed: true }),
+    );
+  }
+
+  render() {
+    return html`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        @click=${this.toggle}
+      >
+        <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>
+        ${this.summary}
+      </button>
+      <div class="panel" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-disclosure': VoxDisclosure;
+  }
+}

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

@@ -0,0 +1,186 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A menu button. Menu entries are light-DOM `<a>` or `<button>` children:
+ *
+ * ```html
+ * <vox-dropdown label="Resources">
+ *   <a href="/docs">Documentation</a>
+ *   <button type="button">Copy install command</button>
+ * </vox-dropdown>
+ * ```
+ *
+ * @slot - Menu entries (`<a>`, `<button>`, `<hr>` for separators).
+ */
+@customElement('vox-dropdown')
+export class VoxDropdown extends LitElement {
+  @property() label = 'Menu';
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  static styles = css`
+    :host {
+      position: relative;
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      padding: 0 var(--vox-space-4);
+      height: 38px;
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition:
+        border-color var(--vox-transition-fast),
+        color var(--vox-transition-fast);
+    }
+
+    .trigger:hover {
+      border-color: var(--vox-color-brand-1);
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .chevron {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 10;
+      min-width: max(100%, 180px);
+      display: none;
+      flex-direction: column;
+      padding: var(--vox-space-2);
+      background-color: var(--vox-color-bg-elv);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      box-shadow: var(--vox-shadow-2);
+    }
+
+    :host([open]) .menu {
+      display: flex;
+    }
+
+    ::slotted(a),
+    ::slotted(button) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      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;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    ::slotted(a:hover),
+    ::slotted(button:hover),
+    ::slotted(a:focus-visible),
+    ::slotted(button:focus-visible) {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      outline: none;
+    }
+
+    ::slotted(hr) {
+      width: 100%;
+      margin: var(--vox-space-1) 0;
+      border: none;
+      border-top: 1px solid var(--vox-color-divider);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.handleOutsideClick);
+    this.addEventListener('keydown', this.handleKeydown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.handleOutsideClick);
+    this.removeEventListener('keydown', this.handleKeydown);
+  }
+
+  private handleOutsideClick = (event: MouseEvent) => {
+    if (this.open && !event.composedPath().includes(this)) {
+      this.open = false;
+    }
+  };
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.open) {
+      this.open = false;
+      this.renderRoot.querySelector<HTMLElement>('.trigger')?.focus();
+      return;
+    }
+
+    if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && this.open) {
+      event.preventDefault();
+      const items = [...this.querySelectorAll<HTMLElement>('a, button')];
+      if (items.length === 0) return;
+      const active = document.activeElement as HTMLElement;
+      const index = items.indexOf(active);
+      const delta = event.key === 'ArrowDown' ? 1 : -1;
+      const next = items[(Math.max(index, 0) + delta + items.length) % items.length];
+      next.focus();
+    }
+  };
+
+  private toggle() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-haspopup="true"
+        @click=${this.toggle}
+      >
+        ${this.label}
+        <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="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      <div class="menu">
+        <slot @click=${() => (this.open = false)}></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-dropdown': VoxDropdown;
+  }
+}

package/src/components/empty-state/vox-empty-state.ts

@@ -0,0 +1,76 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A placeholder for views with nothing to show yet.
+ *
+ * @slot icon - Icon or emoji above the heading.
+ * @slot - Explanatory text.
+ * @slot actions - Buttons or links suggesting a next step.
+ */
+@customElement('vox-empty-state')
+export class VoxEmptyState extends LitElement {
+  @property() heading = '';
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: var(--vox-space-8);
+      border: 1px dashed var(--vox-color-border);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    .icon {
+      font-size: 32px;
+      margin-bottom: var(--vox-space-3);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 32rem;
+      margin-top: var(--vox-space-2);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-top: var(--vox-space-4);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="empty">
+        <div class="icon"><slot name="icon"></slot></div>
+        <h3 class="heading">${this.heading}</h3>
+        <div class="body"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-empty-state': VoxEmptyState;
+  }
+}