@openvoxproject/voxblocks 0.12.0 → 0.14.0

package/package.json

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

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/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);
     }
 

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/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/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';
@@ -46,8 +47,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';
@@ -56,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';
@@ -65,9 +67,10 @@ 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,15 +33,6 @@
   --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;
@@ -105,14 +96,6 @@
   --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/code-block/languages.d.ts

@@ -1,28 +0,0 @@
-/**
- * A small, dependency-free syntax tokenizer. It trades completeness for
- * being self-contained (no Prism/highlight.js/Shiki) and covers the
- * languages that actually show up in OpenVox docs: shell, Puppet
- * manifests, Hiera/YAML data, JSON, Ruby, plus the web basics.
- *
- * Each language is an ordered list of rules; the first rule whose regex
- * matches at the current position wins, so more specific rules (e.g. "a
- * quoted key before a colon") must be listed before the general-purpose
- * ones they'd otherwise be shadowed by.
- */
-export type TokenType = 'plain' | 'comment' | 'keyword' | 'string' | 'number' | 'function' | 'property' | 'tag';
-export interface Token {
-    type: TokenType;
-    text: string;
-}
-type TypeResolver = (matchText: string, code: string, matchEnd: number) => TokenType;
-interface Rule {
-    re: RegExp;
-    type: TokenType | TypeResolver;
-}
-/** Runs `rules` over `code`, falling back to a single plain-text token for anything unmatched. */
-export declare function tokenize(code: string, rules: Rule[]): Token[];
-export declare const LANGUAGE_LABELS: Record<string, string>;
-export type CodeBlockLanguage = 'plaintext' | 'bash' | 'sh' | 'shell' | 'zsh' | 'yaml' | 'yml' | 'json' | 'javascript' | 'js' | 'typescript' | 'ts' | 'css' | 'html' | 'xml' | 'ruby' | 'rb' | 'puppet' | 'pp';
-/** Tokenizes `code` for `language`; unrecognized languages render as plain, unhighlighted text. */
-export declare function highlight(code: string, language: string): Token[];
-export {};

package/dist/types/components/code-block/vox-code-block.d.ts

@@ -1,34 +0,0 @@
-import { LitElement } from 'lit';
-export type { CodeBlockLanguage } from './languages.js';
-/**
- * A syntax-highlighted code block with a copy button, no external
- * highlighter required. Covers shell, Puppet, YAML, JSON, Ruby, JS/TS,
- * CSS, and HTML; unrecognized languages render as plain text.
- *
- * @slot - The code, as plain text (escape `<` and `&` as you would in
- * any HTML source, e.g. inside a `<code>` child).
- */
-export declare class VoxCodeBlock extends LitElement {
-    language: string;
-    /** Shown in the header instead of/alongside the language label. */
-    filename: string;
-    lineNumbers: boolean;
-    noCopy: boolean;
-    /** Hides the whole header bar (filename, language label, and copy button) — for dense contexts like a table cell. */
-    noHeader: boolean;
-    /** Drops the outer border — for dropping into a surface (e.g. a table cell) that already has its own edge. */
-    noBorder: boolean;
-    private _code;
-    private _copied;
-    private _copyResetTimer?;
-    static styles: import("lit").CSSResult;
-    disconnectedCallback(): void;
-    private _handleSlotChange;
-    private _copy;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'vox-code-block': VoxCodeBlock;
-    }
-}