@openvoxproject/voxblocks 0.11.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openvoxproject/voxblocks",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "description": "Web components for OpenVox community web sites and apps",
   "type": "module",
   "license": "Apache-2.0",

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

@@ -48,13 +48,9 @@ export class VoxAccordion extends LitElement {
  */
 @customElement('vox-accordion-item')
 export class VoxAccordionItem extends LitElement {
-  private static nextId = 0;
-
   @property() heading = '';
   @property({ type: Boolean, reflect: true }) open = false;
 
-  private readonly panelId = `vox-accordion-panel-${VoxAccordionItem.nextId++}`;
-
   static styles = css`
     :host {
       display: block;
@@ -131,7 +127,6 @@ export class VoxAccordionItem extends LitElement {
         <button
           class="trigger"
           aria-expanded=${this.open ? 'true' : 'false'}
-          aria-controls=${this.panelId}
           @click=${this.toggle}
         >
           ${this.heading}
@@ -140,7 +135,7 @@ export class VoxAccordionItem extends LitElement {
           </svg>
         </button>
       </h3>
-      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
+      <div class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;

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

@@ -154,12 +154,8 @@ export class VoxAlert extends LitElement {
   }
 
   render() {
-    const isUrgent = this.variant === 'danger' || this.variant === 'warning';
     return html`
-      <div
-        class="alert ${this.variant}"
-        role=${isUrgent ? 'alert' : 'status'}
-      >
+      <div class="alert ${this.variant}" role="alert">
         <svg
           class="icon"
           viewBox="0 0 48 48"

package/src/components/avatar/vox-avatar.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 AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -63,15 +63,8 @@ export class VoxAvatar extends LitElement {
   `;
 
   render() {
-    // Without `alt`, fall back to letting AT read the initials as plain text
-    // rather than hiding them behind an empty aria-label via role="img".
-    const labelled = !this.src && this.alt;
     return html`
-      <span
-        class="avatar"
-        role=${labelled ? 'img' : nothing}
-        aria-label=${labelled ? this.alt : nothing}
-      >
+      <span class="avatar" role=${this.src ? 'presentation' : 'img'} aria-label=${this.alt}>
         ${this.src
           ? html`<img src=${this.src} alt=${this.alt} />`
           : this.initials}

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

@@ -129,7 +129,7 @@ export class VoxCard extends LitElement {
       <div class="badge ${this.hasBadge ? 'has-badge' : ''}">
         <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
       </div>
-      <div class="icon ${this.hasIcon ? 'has-icon' : ''}" aria-hidden="true">
+      <div class="icon ${this.hasIcon ? 'has-icon' : ''}">
         <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
       </div>
       <h3 class="heading">${this.heading}</h3>

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

@@ -60,9 +60,10 @@ export class VoxCheckbox extends VoxFieldElement {
 
   updated() {
     this.internals.setFormValue(this.checked ? this.value : null);
-    this.invalid = this.required && !this.checked;
     this.internals.setValidity(
-      this.invalid ? { valueMissing: true } : {},
+      this.required && !this.checked
+        ? { valueMissing: true }
+        : {},
       'Please check this box.',
       this.renderRoot.querySelector('input') ?? undefined,
     );
@@ -80,8 +81,6 @@ export class VoxCheckbox extends VoxFieldElement {
           type="checkbox"
           .checked=${this.checked}
           ?disabled=${this.disabled}
-          ?required=${this.required}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
           @change=${this.handleChange}
         />
         <span class="box" aria-hidden="true">

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

@@ -0,0 +1,76 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A small labeled value with an optional icon — an owner, a date, a
+ * target host, anything that's "icon + value" — for use inside record
+ * rows, cards, or wherever a compact data point is needed.
+ *
+ * `name` isn't shown visually (the icon, if any, carries that meaning for
+ * sighted users); it's exposed to assistive tech as a spoken label, e.g.
+ * "User: J. Smith".
+ *
+ * @slot icon - Optional icon before the value, e.g. `<vox-icon size="sm">`.
+ * @slot - The value.
+ */
+@customElement('vox-datum')
+export class VoxDatum extends LitElement {
+  @property() name = '';
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-1);
+      font-family: var(--vox-font-family-base);
+      font-size: 13px;
+      color: var(--vox-color-text-2);
+    }
+
+    .icon {
+      display: flex;
+      flex: none;
+      color: var(--vox-color-text-3);
+    }
+
+    .icon:not(.has-icon) {
+      display: none;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `;
+
+  private hasIcon = false;
+
+  private handleIconSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <span class="icon ${this.hasIcon ? 'has-icon' : ''}">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+      </span>
+      ${this.name ? html`<span class="sr-only">${this.name}: </span>` : nothing}
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-datum': VoxDatum;
+  }
+}

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

@@ -148,12 +148,12 @@ export class VoxDialog extends LitElement {
   render() {
     return html`
       <dialog
-        aria-labelledby=${this.heading ? 'heading' : nothing}
+        aria-label=${this.heading || nothing}
         @close=${this.handleNativeClose}
         @click=${this.handleClick}
       >
         <div class="header">
-          <h2 class="heading" id="heading">${this.heading}</h2>
+          <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" />

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

@@ -9,13 +9,9 @@ import { customElement, property } from 'lit/decorators.js';
  */
 @customElement('vox-disclosure')
 export class VoxDisclosure extends LitElement {
-  private static nextId = 0;
-
   @property() summary = 'Show details';
   @property({ type: Boolean, reflect: true }) open = false;
 
-  private readonly panelId = `vox-disclosure-panel-${VoxDisclosure.nextId++}`;
-
   static styles = css`
     :host {
       display: block;
@@ -81,7 +77,6 @@ export class VoxDisclosure extends LitElement {
       <button
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
-        aria-controls=${this.panelId}
         @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">
@@ -89,7 +84,7 @@ export class VoxDisclosure extends LitElement {
         </svg>
         ${this.summary}
       </button>
-      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
+      <div class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;

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

@@ -22,6 +22,12 @@ export class VoxDropdown extends LitElement {
     :host {
       position: relative;
       display: inline-block;
+      /* Without this, a flex/grid container's default stretch alignment
+         grows the host to fill the cross axis while the trigger button
+         inside stays content-sized — and since the menu's "top: 100%" is
+         measured against the host's own box, it then opens far below the
+         trigger instead of right under it. */
+      align-self: flex-start;
       font-family: var(--vox-font-family-base);
     }
 
@@ -122,14 +128,12 @@ export class VoxDropdown 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) => {
@@ -138,20 +142,6 @@ export class VoxDropdown extends LitElement {
     }
   };
 
-  /** Close when focus leaves the component entirely (e.g. Tab past the last item). */
-  private handleFocusOut = (event: FocusEvent) => {
-    const next = event.relatedTarget as Node | null;
-    if (this.open && !(next && this.contains(next))) {
-      this.open = false;
-    }
-  };
-
-  private focusItem(index: number) {
-    const items = [...this.querySelectorAll<HTMLElement>('a, button')];
-    if (items.length === 0) return;
-    items[(index + items.length) % items.length].focus();
-  }
-
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.open) {
       this.open = false;
@@ -159,27 +149,20 @@ export class VoxDropdown extends LitElement {
       return;
     }
 
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && this.open) {
       event.preventDefault();
-      const delta = event.key === 'ArrowDown' ? 1 : -1;
-      if (!this.open) {
-        this.open = true;
-        this.updateComplete.then(() =>
-          this.focusItem(event.key === 'ArrowDown' ? 0 : -1),
-        );
-        return;
-      }
       const items = [...this.querySelectorAll<HTMLElement>('a, button')];
-      const index = items.indexOf(document.activeElement as HTMLElement);
-      this.focusItem(Math.max(index, 0) + delta);
+      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;
-    if (this.open) {
-      this.updateComplete.then(() => this.focusItem(0));
-    }
   }
 
   render() {
@@ -188,7 +171,6 @@ export class VoxDropdown extends LitElement {
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-haspopup="true"
-        aria-controls="menu"
         @click=${this.toggle}
       >
         ${this.label}
@@ -196,7 +178,7 @@ export class VoxDropdown extends LitElement {
           <path d="m6 9 6 6 6-6" />
         </svg>
       </button>
-      <div id="menu" class="menu">
+      <div class="menu">
         <slot @click=${() => (this.open = false)}></slot>
       </div>
     `;

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

@@ -60,7 +60,7 @@ export class VoxEmptyState extends LitElement {
   render() {
     return html`
       <div class="empty">
-        <div class="icon" aria-hidden="true"><slot name="icon"></slot></div>
+        <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>

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

@@ -84,9 +84,8 @@ export class VoxFileInput extends VoxFieldElement {
     for (const file of files) data.append(this.name, file);
     this.internals.setFormValue(files.length > 0 ? data : null);
 
-    this.invalid = this.required && files.length === 0;
     this.internals.setValidity(
-      this.invalid ? { valueMissing: true } : {},
+      this.required && files.length === 0 ? { valueMissing: true } : {},
       'Please select a file.',
       this.inputEl,
     );
@@ -104,8 +103,6 @@ export class VoxFileInput extends VoxFieldElement {
             accept=${ifDefined(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
-            aria-describedby=${ifDefined(this.noteId)}
-            aria-invalid=${this.invalid ? 'true' : 'false'}
             @change=${this.handleChange}
           />
           <span class="picker">

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

@@ -157,14 +157,12 @@ export class VoxHeader 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) => {
@@ -173,14 +171,6 @@ export class VoxHeader 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;

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

@@ -56,8 +56,6 @@ export class VoxInput extends VoxFieldElement {
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
           aria-label=${this.label ? nothing : 'text input'}
-          aria-describedby=${ifDefined(this.noteId)}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />

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

@@ -106,7 +106,7 @@ export class VoxLinkHubItem extends LitElement {
     return html`
       <a href=${this.href}>
         <span class="heading">
-          <span class="icon ${this.hasIcon ? 'has-icon' : ''}" aria-hidden="true">
+          <span class="icon ${this.hasIcon ? 'has-icon' : ''}">
             <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
           </span>
           ${this.heading}

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

@@ -0,0 +1,203 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type MenuPlacement = 'bottom-start' | 'bottom-end';
+
+/**
+ * An overlay menu anchored to an arbitrary trigger — an avatar, an icon
+ * button, anything — unlike `<vox-dropdown>`, which owns a fixed
+ * label+chevron trigger of its own.
+ *
+ * ```html
+ * <vox-menu label="Account menu">
+ *   <vox-avatar slot="trigger" initials="UN"></vox-avatar>
+ *   <a href="/profile">Profile</a>
+ *   <a href="/settings">Settings</a>
+ *   <hr />
+ *   <button type="button">Log out</button>
+ * </vox-menu>
+ * ```
+ *
+ * @slot trigger - Content shown inside the trigger button, e.g. a `<vox-avatar>`.
+ * @slot - Menu entries (`<a>`, `<button>`, `<hr>` for separators).
+ * @fires vox-close - When the menu closes (Escape, outside click, or an entry click).
+ */
+@customElement('vox-menu')
+export class VoxMenu extends LitElement {
+  /**
+   * Accessible name for the trigger button. Set this when the `trigger`
+   * slot has no visible text of its own (e.g. an avatar-only trigger);
+   * leave unset when it does, so that text stays the accessible name.
+   */
+  @property() label?: string;
+  @property({ reflect: true }) placement: MenuPlacement = 'bottom-end';
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  static styles = css`
+    :host {
+      position: relative;
+      display: inline-block;
+      /* Without this, a flex/grid container's default stretch alignment
+         grows the host to fill the cross axis (e.g. a tall sibling, or a
+         container given a min-height for layout purposes) while the
+         trigger button inside stays content-sized — and since the menu's
+         "top: 100%" is measured against the host's own box, it then opens
+         far below the trigger instead of right under it. */
+      align-self: flex-start;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      background: none;
+      border: none;
+      padding: 0;
+      border-radius: var(--vox-radius-md);
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      z-index: 10;
+      min-width: 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([placement='bottom-start']) .menu {
+      left: 0;
+    }
+
+    :host([placement='bottom-end']) .menu {
+      right: 0;
+    }
+
+    :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.close();
+    }
+  };
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.open) {
+      this.close();
+      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')].filter(
+        (el) => el.slot !== 'trigger',
+      );
+      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() {
+    if (this.open) {
+      this.close();
+    } else {
+      this.open = true;
+    }
+  }
+
+  private close() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('vox-close', { bubbles: true, composed: true }));
+  }
+
+  render() {
+    return html`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-haspopup="true"
+        aria-label=${this.label ?? nothing}
+        @click=${this.toggle}
+      >
+        <slot name="trigger"></slot>
+      </button>
+      <div class="menu" role="menu">
+        <slot @click=${() => this.close()}></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vox-menu': VoxMenu;
+  }
+}

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

@@ -2,20 +2,18 @@ import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 /**
- * Page-number navigation. Children are plain links, with the current
- * page as a non-interactive `<span aria-current="page">` — like
- * `<vox-breadcrumbs>`, it shouldn't be a link to itself:
+ * Page-number navigation. Children are plain links; mark the current
+ * page with `aria-current="page"`:
  *
  * ```html
  * <vox-pagination>
  *   <a href="?page=1">1</a>
- *   <span aria-current="page">2</span>
+ *   <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) and the
- * current-page `<span>`.
+ * @slot - `<a>` elements (including any prev/next links).
  */
 @customElement('vox-pagination')
 export class VoxPagination extends LitElement {
@@ -33,8 +31,7 @@ export class VoxPagination extends LitElement {
       flex-wrap: wrap;
     }
 
-    ::slotted(a),
-    ::slotted(span) {
+    ::slotted(a) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -56,7 +53,7 @@ export class VoxPagination extends LitElement {
       background-color: var(--vox-color-brand-soft);
     }
 
-    ::slotted([aria-current='page']) {
+    ::slotted(a[aria-current='page']) {
       background-color: var(--vox-color-brand-3);
       color: var(--vox-color-text-inverse);
       font-weight: 600;