@openvoxproject/voxblocks 0.14.0 → 0.15.0

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

@@ -1,5 +1,6 @@
-import { html, css } from 'lit';
+import { html, css, nothing } 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';
 
 /**
@@ -12,11 +13,23 @@ import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
  *   <option value="rpm">RHEL</option>
  * </vox-select>
  * ```
+ *
+ * Add `multiple` for a list that accepts more than one selection; read the
+ * result from `values` rather than `value`.
  */
 @customElement('vox-select')
 export class VoxSelect extends VoxFieldElement {
   @property() value = '';
 
+  /** Accept more than one selection, rendering as a scrolling list box. */
+  @property({ type: Boolean, reflect: true }) multiple = false;
+
+  /** Rows shown when `multiple` is set. */
+  @property({ type: Number }) size?: number;
+
+  /** Selected values. Only meaningful when `multiple` is set. */
+  @property({ type: Array }) values: string[] = [];
+
   @query('select') private selectEl!: HTMLSelectElement;
 
   static styles = [
@@ -30,19 +43,48 @@ export class VoxSelect extends VoxFieldElement {
         background-position: right var(--vox-space-3) center;
         cursor: pointer;
       }
+
+      /* A list box has no collapsed affordance, so drop the chevron. */
+      :host([multiple]) select.control {
+        appearance: none;
+        padding-right: var(--vox-space-3);
+        background-image: none;
+        cursor: default;
+      }
+
+      :host([multiple]) select.control option {
+        padding: var(--vox-space-1) var(--vox-space-2);
+      }
     `,
   ];
 
   formResetCallback() {
     this.value = '';
+    this.values = [];
     this.syncOptions();
   }
 
   updated() {
-    this.internals.setFormValue(this.value);
+    this.internals.setFormValue(this.multiple ? this.formData() : this.value);
     if (this.selectEl) this.syncValidity(this.selectEl);
   }
 
+  focus(options?: FocusOptions) {
+    this.selectEl?.focus(options);
+  }
+
+  /**
+   * A multi-select submits one entry per selection, which only FormData can
+   * express. Without a `name` there is nothing to key them on, so submit
+   * nothing — matching a native select with no name.
+   */
+  private formData(): FormData | null {
+    if (!this.name) return null;
+    const data = new FormData();
+    for (const value of this.values) data.append(this.name, value);
+    return data;
+  }
+
   private syncOptions() {
     if (!this.selectEl) return;
     const slot = this.renderRoot.querySelector('slot');
@@ -53,14 +95,34 @@ export class VoxSelect extends VoxFieldElement {
         .filter((el) => el instanceof HTMLOptionElement || el instanceof HTMLOptGroupElement)
         .map((el) => el.cloneNode(true)),
     );
+
+    if (this.multiple) {
+      const wanted = new Set(this.values);
+      for (const option of this.selectEl.options) {
+        option.selected = wanted.has(option.value);
+      }
+      this.values = this.selected();
+      return;
+    }
+
     if (this.value) {
       this.selectEl.value = this.value;
     }
     this.value = this.selectEl.value;
   }
 
+  private selected(): string[] {
+    return [...this.selectEl.selectedOptions].map((option) => option.value);
+  }
+
   private handleChange() {
-    this.value = this.selectEl.value;
+    if (this.multiple) {
+      this.values = this.selected();
+      // Keep `value` meaningful as the first selection, as the native API does.
+      this.value = this.values[0] ?? '';
+    } else {
+      this.value = this.selectEl.value;
+    }
     this.dispatchEvent(new Event('change', { bubbles: true }));
   }
 
@@ -71,8 +133,11 @@ export class VoxSelect extends VoxFieldElement {
         <select
           id="select"
           class="control"
+          ?multiple=${this.multiple}
+          size=${ifDefined(this.multiple ? (this.size ?? 4) : undefined)}
           ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-label=${this.label ? nothing : 'options'}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}

package/src/index.ts

@@ -12,11 +12,13 @@ export { VoxIcon } from './components/icon/vox-icon.js';
 
 // Forms
 export { VoxCheckbox } from './components/checkbox/vox-checkbox.js';
+export { VoxCombobox } from './components/combobox/vox-combobox.js';
 export { VoxFileInput } from './components/file-input/vox-file-input.js';
 export { VoxInput } from './components/input/vox-input.js';
 export { VoxInputGroup } from './components/input-group/vox-input-group.js';
 export { VoxRadio } from './components/radio/vox-radio.js';
 export { VoxRadioGroup } from './components/radio/vox-radio-group.js';
+export { VoxRange } from './components/range/vox-range.js';
 export { VoxSelect } from './components/select/vox-select.js';
 export { VoxSwitch } from './components/switch/vox-switch.js';
 export { VoxTextarea } from './components/textarea/vox-textarea.js';
@@ -38,7 +40,6 @@ 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,8 +48,8 @@ export { VoxBadge } from './components/badge/vox-badge.js';
 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 { VoxCodeBlock } from './components/code-block/vox-code-block.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';
@@ -57,7 +58,6 @@ 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';
@@ -67,10 +67,9 @@ export { VoxTimeline, VoxTimelineItem } from './components/timeline/vox-timeline
 export type { IconName, IconSize } from './components/icon/vox-icon.js';
 export type { ButtonVariant, ButtonSize } from './components/button/vox-button.js';
 export type { CalloutVariant } from './components/callout/vox-callout.js';
+export type { CodeBlockLanguage } from './components/code-block/vox-code-block.js';
 export type { BadgeVariant } from './components/badge/vox-badge.js';
 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/tokens/tokens.css

@@ -33,6 +33,15 @@
   --vox-color-danger-3: #e0575b;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.14);
 
+  /* Code syntax highlighting — one palette hue per token role */
+  --vox-code-comment: var(--vox-palette-gray-700);
+  --vox-code-keyword: var(--vox-palette-purple-700);
+  --vox-code-string: var(--vox-palette-green-800);
+  --vox-code-number: var(--vox-palette-gold-800);
+  --vox-code-function: var(--vox-palette-blue-700);
+  --vox-code-property: var(--vox-palette-teal-800);
+  --vox-code-tag: var(--vox-palette-red-700);
+
   /* Surfaces */
   --vox-color-bg: #f5faf9;
   --vox-color-bg-alt: #e8f1ef;
@@ -96,6 +105,14 @@
   --vox-color-danger-3: #b62a3c;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.16);
 
+  --vox-code-comment: var(--vox-palette-gray-400);
+  --vox-code-keyword: var(--vox-palette-purple-300);
+  --vox-code-string: var(--vox-palette-green-400);
+  --vox-code-number: var(--vox-palette-gold-400);
+  --vox-code-function: var(--vox-palette-blue-300);
+  --vox-code-property: var(--vox-palette-teal-400);
+  --vox-code-tag: var(--vox-palette-red-300);
+
   --vox-color-bg: #0d1417;
   --vox-color-bg-alt: #131b1f;
   --vox-color-bg-soft: #131b1f;

package/dist/types/components/datum/vox-datum.d.ts

@@ -1,25 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * 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.
- */
-export declare class VoxDatum extends LitElement {
-    name: string;
-    static styles: import("lit").CSSResult;
-    private hasIcon;
-    private handleIconSlotChange;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'vox-datum': VoxDatum;
-    }
-}

package/dist/types/components/menu/vox-menu.d.ts

@@ -1,44 +0,0 @@
-import { LitElement } from 'lit';
-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).
- */
-export declare 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.
-     */
-    label?: string;
-    placement: MenuPlacement;
-    open: boolean;
-    static styles: import("lit").CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private handleOutsideClick;
-    private handleKeydown;
-    private toggle;
-    private close;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'vox-menu': VoxMenu;
-    }
-}

package/dist/types/components/record-list/vox-record-list.d.ts

@@ -1,53 +0,0 @@
-import { LitElement } from 'lit';
-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.
- */
-export declare class VoxRecordList extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
-}
-/**
- * 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.
- */
-export declare class VoxRecordListItem extends LitElement {
-    heading: string;
-    href?: string;
-    size: RecordListItemSize;
-    static styles: import("lit").CSSResult;
-    private hasMeta;
-    private hasEnd;
-    private handleMetaSlotChange;
-    private handleEndSlotChange;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'vox-record-list': VoxRecordList;
-        'vox-record-list-item': VoxRecordListItem;
-    }
-}

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

@@ -1,76 +0,0 @@
-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/menu/vox-menu.ts

@@ -1,203 +0,0 @@
-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;
-  }
-}