@openvoxproject/voxblocks 0.11.0 → 0.14.0

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

@@ -1,6 +1,5 @@
-import { html, css, nothing } from 'lit';
+import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
 import type { VoxRadio } from './vox-radio.js';
 
@@ -36,9 +35,8 @@ export class VoxRadioGroup extends VoxFieldElement {
 
   updated() {
     this.internals.setFormValue(this.value || null);
-    this.invalid = this.required && !this.value;
     this.internals.setValidity(
-      this.invalid ? { valueMissing: true } : {},
+      this.required && !this.value ? { valueMissing: true } : {},
       'Please select an option.',
       this,
     );
@@ -48,12 +46,10 @@ export class VoxRadioGroup extends VoxFieldElement {
   private syncRadios() {
     const radios = this.radios;
     const anyChecked = radios.some((r) => r.value === this.value && this.value !== '');
-    const firstEnabled = radios.find((r) => !r.disabled);
-    radios.forEach((radio) => {
+    radios.forEach((radio, index) => {
       radio.checked = this.value !== '' && radio.value === this.value;
-      // Roving tabindex: the checked radio is tabbable, else the first
-      // enabled one (a disabled radio can't receive focus at all).
-      const tabbable = anyChecked ? radio.checked : radio === firstEnabled;
+      // 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');
@@ -93,14 +89,7 @@ export class VoxRadioGroup extends VoxFieldElement {
 
   render() {
     return html`
-      <div
-        class="field"
-        role="radiogroup"
-        aria-label=${this.label || nothing}
-        aria-describedby=${ifDefined(this.noteId)}
-        aria-invalid=${this.invalid ? 'true' : 'false'}
-        aria-required=${this.required ? 'true' : 'false'}
-      >
+      <div class="field" role="radiogroup" aria-label=${this.label}>
         ${this.label
           ? html`<span class="label">
               ${this.label}${this.required

package/src/components/record-list/vox-record-list.ts

@@ -0,0 +1,263 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type RecordListItemSize = 'md' | 'sm';
+
+/**
+ * A list of linked records — search results, an admin index, anything
+ * that's a stack of "go to this thing" rows. A grid (heading, meta, end,
+ * plus a trailing filler column) is always defined here; regular
+ * `size="md"` items ignore the first three tracks and just render their own
+ * full-width flex row, while `size="sm"` items opt into them via `subgrid`
+ * so their columns line up into a real table across every row, sized to
+ * each column's widest cell like a native `<table>`. The filler column
+ * absorbs whatever width the three content columns don't use, so every
+ * item — table row or not — still spans the list's full width instead of
+ * shrinking to fit its content.
+ *
+ * @slot - `<vox-record-list-item>` elements.
+ */
+@customElement('vox-record-list')
+export class VoxRecordList extends LitElement {
+  static styles = css`
+    :host {
+      display: grid;
+      grid-template-columns: repeat(3, max-content) 1fr;
+      column-gap: var(--vox-space-4);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+/**
+ * One row in a `<vox-record-list>`: a heading link plus optional metadata
+ * — pass `<vox-datum>` elements (or anything else) into the default slot.
+ * Becomes fully navigable (heading and trailing arrow both link to `href`)
+ * when `href` is set; otherwise renders as a static row.
+ *
+ * At `size="sm"`, the arrow drops out and heading/meta/`end` become real
+ * table columns (via CSS `subgrid`, aligned against every other
+ * `size="sm"` row in the same `<vox-record-list>`) — suited to a dense
+ * activity/run log rather than an indexed record. `heading` and the meta
+ * column each link to `href` individually, since a single grid row can't
+ * itself be one native link the way a block row can.
+ *
+ * @slot - Metadata, e.g. `<vox-datum>` elements.
+ * @slot end - Trailing content after the meta, e.g. a `<vox-badge>` status.
+ */
+@customElement('vox-record-list-item')
+export class VoxRecordListItem extends LitElement {
+  @property() heading = '';
+  @property() href?: string;
+  @property({ reflect: true }) size: RecordListItemSize = 'md';
+
+  static styles = css`
+    :host {
+      display: block;
+      grid-column: 1 / -1;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-4);
+      padding: var(--vox-space-4) 0;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    :host(:last-child) .row {
+      border-bottom: none;
+    }
+
+    .main {
+      display: flex;
+      flex-direction: column;
+      gap: var(--vox-space-1);
+      min-width: 0;
+    }
+
+    .heading {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.4;
+    }
+
+    a.heading {
+      color: var(--vox-color-brand-1);
+      text-decoration: none;
+    }
+
+    a.heading:hover,
+    a.heading:focus-visible {
+      text-decoration: underline;
+    }
+
+    a.heading:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    span.heading {
+      color: var(--vox-color-text-1);
+    }
+
+    .meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--vox-space-4);
+    }
+
+    .meta:not(.has-meta) {
+      display: none;
+    }
+
+    .arrow {
+      display: flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: var(--vox-radius-full);
+      background-color: var(--vox-color-bg-soft);
+      color: var(--vox-color-brand-1);
+      text-decoration: none;
+      transition: background-color var(--vox-transition-fast);
+    }
+
+    .arrow:hover {
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    .arrow:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .arrow svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .end:not(.has-end) {
+      display: none;
+    }
+
+    /* Small size: heading, meta, and end each become their own subgrid
+       column, aligned against the same column in every other size="sm"
+       row in the parent <vox-record-list> — the arrow drops out since
+       there's no room for it at this density, and the whole "row" is
+       really 3 separate grid cells rather than one box, so heading and
+       the meta cell each link to href individually. */
+    :host([size='sm']) {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: 1 / -1;
+      align-items: baseline;
+      column-gap: var(--vox-space-4);
+      padding: var(--vox-space-2) 0;
+      border-bottom: 1px solid var(--vox-color-divider);
+      font-size: 13px;
+    }
+
+    :host([size='sm']:last-child) {
+      border-bottom: none;
+    }
+
+    :host([size='sm']) .meta {
+      flex-wrap: nowrap;
+      gap: var(--vox-space-2);
+    }
+
+    .cell {
+      color: var(--vox-color-text-2);
+      text-decoration: none;
+    }
+
+    a.cell:hover,
+    a.cell:focus-visible {
+      text-decoration: underline;
+    }
+
+    a.cell:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+  `;
+
+  private hasMeta = false;
+  private hasEnd = false;
+
+  private handleMetaSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasMeta = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  private handleEndSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasEnd = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    if (this.size === 'sm') {
+      const metaSlot = html`
+        <span class="meta ${this.hasMeta ? 'has-meta' : ''}">
+          <slot @slotchange=${this.handleMetaSlotChange}></slot>
+        </span>
+      `;
+
+      return html`
+        ${this.href
+          ? html`<a class="cell" href=${this.href}>${this.heading}</a>`
+          : html`<span class="cell">${this.heading}</span>`}
+        ${this.hasMeta && this.href
+          ? html`<a class="cell" href=${this.href}>${metaSlot}</a>`
+          : html`<span class="cell">${metaSlot}</span>`}
+        <span class="cell">
+          <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
+        </span>
+      `;
+    }
+
+    return html`
+      <div class="row">
+        <div class="main">
+          ${this.href
+            ? html`<a class="heading" href=${this.href}>${this.heading}</a>`
+            : html`<span class="heading">${this.heading}</span>`}
+          <div class="meta ${this.hasMeta ? 'has-meta' : ''}">
+            <slot @slotchange=${this.handleMetaSlotChange}></slot>
+          </div>
+        </div>
+        <span class="end ${this.hasEnd ? 'has-end' : ''}">
+          <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
+        </span>
+        ${this.href
+          ? html`
+              <a class="arrow" href=${this.href} aria-label="View ${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>
+              </a>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-record-list': VoxRecordList;
+    'vox-record-list-item': VoxRecordListItem;
+  }
+}

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

@@ -1,6 +1,5 @@
 import { html, css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
 
 /**
@@ -74,8 +73,6 @@ export class VoxSelect extends VoxFieldElement {
           class="control"
           ?required=${this.required}
           ?disabled=${this.disabled}
-          aria-describedby=${ifDefined(this.noteId)}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}

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

@@ -94,14 +94,12 @@ export class VoxSidenav extends LitElement {
     super.connectedCallback();
     document.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('keydown', this.handleKeydown);
-    this.addEventListener('focusout', this.handleFocusOut);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this.handleOutsideClick);
     this.removeEventListener('keydown', this.handleKeydown);
-    this.removeEventListener('focusout', this.handleFocusOut);
   }
 
   private handleOutsideClick = (event: MouseEvent) => {
@@ -110,14 +108,6 @@ export class VoxSidenav extends LitElement {
     }
   };
 
-  /** Close the mobile menu once focus tabs past its last item. */
-  private handleFocusOut = (event: FocusEvent) => {
-    const next = event.relatedTarget as Node | null;
-    if (this.mobileOpen && !(next && this.contains(next))) {
-      this.mobileOpen = false;
-    }
-  };
-
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.mobileOpen) {
       this.mobileOpen = false;
@@ -180,13 +170,9 @@ export class VoxSidenav extends LitElement {
  */
 @customElement('vox-sidenav-group')
 export class VoxSidenavGroup extends LitElement {
-  private static nextId = 0;
-
   @property() heading = '';
   @property({ type: Boolean, reflect: true }) open = false;
 
-  private readonly itemsId = `vox-sidenav-group-items-${VoxSidenavGroup.nextId++}`;
-
   static styles = css`
     :host {
       display: block;
@@ -254,7 +240,6 @@ export class VoxSidenavGroup extends LitElement {
       <button
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
-        aria-controls=${this.itemsId}
         @click=${this.toggle}
       >
         ${this.heading}
@@ -262,7 +247,7 @@ export class VoxSidenavGroup extends LitElement {
           <path d="m9 6 6 6-6 6" />
         </svg>
       </button>
-      <div id=${this.itemsId} class="items"><slot></slot></div>
+      <div class="items"><slot></slot></div>
     `;
   }
 }

package/src/components/step-indicator/vox-step-indicator.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 export type StepState = 'complete' | 'current' | 'upcoming';
@@ -122,15 +122,6 @@ export class VoxStep extends LitElement {
       font-weight: 600;
       color: var(--vox-color-text-1);
     }
-
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-    }
   `;
 
   render() {
@@ -147,12 +138,7 @@ export class VoxStep extends LitElement {
               </svg>`
             : this.number}
         </span>
-        <span class="label">
-          ${this.label}
-          ${this.state !== 'current'
-            ? html`<span class="visually-hidden"> (${this.state})</span>`
-            : nothing}
-        </span>
+        <span class="label">${this.label}</span>
       </div>
     `;
   }

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

@@ -65,18 +65,11 @@ export class VoxTabs extends LitElement {
   }
 
   private handleKeydown(event: KeyboardEvent) {
-    const tabs = this.tabs;
-    if (event.key === 'Home' || event.key === 'End') {
-      event.preventDefault();
-      const target = tabs[event.key === 'Home' ? 0 : tabs.length - 1];
-      target.select();
-      target.focusTab();
-      return;
-    }
     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();
@@ -157,11 +150,9 @@ export class VoxTab extends LitElement {
   render() {
     return html`
       <button
-        id="tab-${this.panel}"
         class="tab"
         role="tab"
         aria-selected=${this.selected ? 'true' : 'false'}
-        aria-controls="panel-${this.panel}"
         tabindex=${this.selected ? '0' : '-1'}
         @click=${this.select}
       >
@@ -194,25 +185,10 @@ export class VoxTabPanel extends LitElement {
     :host([active]) {
       display: block;
     }
-
-    div:focus-visible {
-      outline: 2px solid var(--vox-color-brand-1);
-      outline-offset: 2px;
-      border-radius: var(--vox-radius-sm);
-    }
   `;
 
   render() {
-    return html`
-      <div
-        id="panel-${this.name}"
-        role="tabpanel"
-        aria-labelledby="tab-${this.name}"
-        tabindex="0"
-      >
-        <slot></slot>
-      </div>
-    `;
+    return html`<div role="tabpanel"><slot></slot></div>`;
   }
 }
 

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

@@ -59,8 +59,6 @@ export class VoxTextarea extends VoxFieldElement {
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          aria-describedby=${ifDefined(this.noteId)}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>

package/src/index.ts

@@ -38,6 +38,7 @@ export { VoxToc, VoxTocItem } from './components/toc/vox-toc.js';
 export { VoxDialog } from './components/dialog/vox-dialog.js';
 export { VoxDisclosure } from './components/disclosure/vox-disclosure.js';
 export { VoxDropdown } from './components/dropdown/vox-dropdown.js';
+export { VoxMenu } from './components/menu/vox-menu.js';
 
 // Page content
 export { VoxAccordion, VoxAccordionItem } from './components/accordion/vox-accordion.js';
@@ -47,6 +48,7 @@ export { VoxCalendarTile } from './components/calendar-tile/vox-calendar-tile.js
 export { VoxCallout } from './components/callout/vox-callout.js';
 export { VoxCard } from './components/card/vox-card.js';
 export { VoxCtaBand } from './components/cta-band/vox-cta-band.js';
+export { VoxDatum } from './components/datum/vox-datum.js';
 export { VoxEmptyState } from './components/empty-state/vox-empty-state.js';
 export { VoxFooter, VoxFooterColumn } from './components/footer/vox-footer.js';
 export { VoxGrid } from './components/grid/vox-grid.js';
@@ -55,6 +57,7 @@ export { VoxLinkHub, VoxLinkHubItem } from './components/link-hub/vox-link-hub.j
 export { VoxLoader } from './components/loader/vox-loader.js';
 export { VoxPagination } from './components/pagination/vox-pagination.js';
 export { VoxQuote } from './components/quote/vox-quote.js';
+export { VoxRecordList, VoxRecordListItem } from './components/record-list/vox-record-list.js';
 export { VoxSponsor, VoxSponsorTier } from './components/sponsor/vox-sponsor.js';
 export { VoxStat } from './components/stat/vox-stat.js';
 export { VoxStepIndicator, VoxStep } from './components/step-indicator/vox-step-indicator.js';
@@ -69,3 +72,5 @@ export type { AlertVariant } from './components/alert/vox-alert.js';
 export type { AvatarSize } from './components/avatar/vox-avatar.js';
 export type { LoaderSize } from './components/loader/vox-loader.js';
 export type { StepState } from './components/step-indicator/vox-step-indicator.js';
+export type { MenuPlacement } from './components/menu/vox-menu.js';
+export type { RecordListItemSize } from './components/record-list/vox-record-list.js';

package/src/internal/field.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 /**
  * Shared base for form-associated VoxBlocks controls. Uses ElementInternals
@@ -10,9 +10,6 @@ export class VoxFieldElement extends LitElement {
 
   protected internals: ElementInternals;
 
-  /** Whether the control currently fails validation; drives `aria-invalid`. */
-  @state() protected invalid = false;
-
   @property() name = '';
   @property() label = '';
   @property() note = '';
@@ -49,7 +46,6 @@ export class VoxFieldElement extends LitElement {
     inner: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
   ) {
     this.internals.setValidity(inner.validity, inner.validationMessage, inner);
-    this.invalid = !inner.validity.valid;
   }
 
   protected renderLabel(forId: string) {
@@ -63,13 +59,8 @@ export class VoxFieldElement extends LitElement {
     `;
   }
 
-  /** `note`'s id when present, for `aria-describedby` on the native control. */
-  protected get noteId(): string | undefined {
-    return this.note ? 'note' : undefined;
-  }
-
   protected renderNote() {
-    return this.note ? html`<p class="note" id="note">${this.note}</p>` : nothing;
+    return this.note ? html`<p class="note">${this.note}</p>` : nothing;
   }
 }
 
@@ -128,15 +119,6 @@ export const fieldStyles = css`
     box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
   }
 
-  .control[aria-invalid='true'] {
-    border-color: var(--vox-color-danger-1);
-  }
-
-  .control[aria-invalid='true']:focus {
-    border-color: var(--vox-color-danger-1);
-    box-shadow: 0 0 0 3px var(--vox-color-danger-soft);
-  }
-
   /* Corner flattening when placed inside a <vox-input-group>. */
   :host([data-vox-group]) .control {
     border-radius: 0;

package/src/tokens/tokens.css

@@ -29,8 +29,8 @@
   --vox-color-warning-1: #915930;
   --vox-color-warning-soft: rgba(234, 179, 8, 0.14);
   --vox-color-danger-1: #b8272c;
-  --vox-color-danger-2: #c9333a;
-  --vox-color-danger-3: #d5393e;
+  --vox-color-danger-2: #d5393e;
+  --vox-color-danger-3: #e0575b;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.14);
 
   /* Surfaces */
@@ -42,12 +42,12 @@
   /* Text */
   --vox-color-text-1: #12262c;
   --vox-color-text-2: #4c6469;
-  --vox-color-text-3: #5c7377;
+  --vox-color-text-3: #86999c;
   --vox-color-text-inverse: #ffffff;
 
   /* Lines */
   --vox-color-divider: rgba(18, 38, 44, 0.12);
-  --vox-color-border: rgba(18, 38, 44, 0.55);
+  --vox-color-border: rgba(18, 38, 44, 0.28);
 
   /* Typography */
   --vox-font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system,
@@ -92,7 +92,7 @@
   --vox-color-warning-1: #f9b44e;
   --vox-color-warning-soft: rgba(234, 179, 8, 0.16);
   --vox-color-danger-1: #f66f81;
-  --vox-color-danger-2: #d13b52;
+  --vox-color-danger-2: #f14158;
   --vox-color-danger-3: #b62a3c;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.16);
 
@@ -103,11 +103,11 @@
 
   --vox-color-text-1: #dff3f0;
   --vox-color-text-2: #9fb8bb;
-  --vox-color-text-3: #88999c;
+  --vox-color-text-3: #5f7275;
   --vox-color-text-inverse: #ffffff;
 
   --vox-color-divider: rgba(159, 184, 187, 0.24);
-  --vox-color-border: rgba(159, 184, 187, 0.6);
+  --vox-color-border: rgba(159, 184, 187, 0.5);
 
   --vox-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.24);
   --vox-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.26), 0 1px 4px rgba(0, 0, 0, 0.26);