@profpowell/vb-design-system 0.1.0

package/src/web-components/color-palette/styles.css

@@ -0,0 +1,113 @@
+/* --- Progressive enhancement: no-JS fallback --- */
+color-palette:not(:defined) {
+  display: block;
+}
+
+color-palette {
+  display: block;
+}
+
+/* Palette container */
+color-palette .palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-xs, 0.5rem);
+}
+
+color-palette .palette.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+}
+
+color-palette .palette.list {
+  flex-direction: column;
+}
+
+color-palette .palette.list .swatch-wrap {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--size-s, 0.75rem);
+}
+
+color-palette .palette.list .color-box {
+  inline-size: 36px !important;
+  block-size: 36px !important;
+}
+
+/* Swatch wrapper — vertical stack of color box + name */
+color-palette .swatch-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-2xs, 0.25rem);
+}
+
+/* Color box — the clickable swatch */
+color-palette .color-box {
+  position: relative;
+  border: 1px solid oklch(0% 0 0 / 0.15);
+  border-radius: var(--radius-s, 0.25rem);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-family: var(--font-mono, monospace);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  overflow: hidden;
+}
+
+color-palette .color-box:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px oklch(0% 0 0 / 0.15);
+  z-index: 1;
+}
+
+color-palette .color-box:focus-visible {
+  outline: 2px solid var(--color-focus-ring, currentColor);
+  outline-offset: 2px;
+}
+
+/* Hex/value overlay — hidden by default, visible on hover */
+color-palette .color-value {
+  font-size: 0.625rem;
+  line-height: 1.2;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  text-align: center;
+  padding: 2px 4px;
+  word-break: break-all;
+}
+
+color-palette .color-box:hover .color-value,
+color-palette .color-box:focus-visible .color-value,
+color-palette .color-value.visible {
+  opacity: 1;
+}
+
+/* "Copied!" feedback overlay */
+color-palette .color-box.copied::after {
+  content: 'Copied!';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: oklch(0% 0 0 / 0.6);
+  color: white;
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 600;
+  font-family: var(--font-sans, system-ui);
+  border-radius: inherit;
+}
+
+/* Name label below the swatch */
+color-palette .color-name {
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-text-muted, #666);
+  text-align: center;
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/web-components/color-picker/_color-utils.js

@@ -0,0 +1,210 @@
+/**
+ * Color conversion utilities for color-picker.
+ * All functions are pure — no side effects or DOM access.
+ */
+
+/**
+ * HSL (h: 0-360, s: 0-100, l: 0-100) → RGB (r,g,b: 0-255)
+ */
+export function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
+  return {
+    r: Math.round(f(0) * 255),
+    g: Math.round(f(8) * 255),
+    b: Math.round(f(4) * 255),
+  };
+}
+
+/**
+ * RGB (r,g,b: 0-255) → HSL (h: 0-360, s: 0-100, l: 0-100)
+ */
+export function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+/**
+ * Hex string → RGB
+ */
+export function hexToRgb(hex) {
+  hex = hex.replace(/^#/, '');
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const n = parseInt(hex, 16);
+  return {
+    r: (n >> 16) & 255,
+    g: (n >> 8) & 255,
+    b: n & 255,
+  };
+}
+
+/**
+ * RGB → Hex string (with #)
+ */
+export function rgbToHex(r, g, b) {
+  return '#' + [r, g, b].map(v =>
+    Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')
+  ).join('');
+}
+
+/**
+ * Hex → HSL
+ */
+export function hexToHsl(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  return rgbToHsl(r, g, b);
+}
+
+/**
+ * HSL → Hex
+ */
+export function hslToHex(h, s, l) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  return rgbToHex(r, g, b);
+}
+
+/**
+ * Clamp a value between min and max
+ */
+export function clamp(val, min, max) {
+  return Math.max(min, Math.min(max, val));
+}
+
+// ── OkLCH conversions ─────────────────────────────────────────────────
+// Algorithm: Björn Ottosson — https://bottosson.github.io/posts/oklab/
+// Pipeline: sRGB ↔ linear sRGB ↔ OkLab ↔ OkLCH
+
+function srgbToLinear(c) {
+  c /= 255;
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function linearToSrgb(c) {
+  const v = c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  return Math.round(clamp(v, 0, 1) * 255);
+}
+
+/**
+ * RGB (0-255) → OkLCH (L: 0-1, C: 0+, H: 0-360)
+ */
+export function rgbToOklch(r, g, b) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+
+  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
+  const bLab = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
+
+  const C = Math.sqrt(a * a + bLab * bLab);
+  let H = Math.atan2(bLab, a) * 180 / Math.PI;
+  if (H < 0) H += 360;
+
+  // Achromatic colors collapse hue (atan2 noise on tiny chroma is meaningless).
+  if (C < 1e-4) H = 0;
+
+  return { L, C, H };
+}
+
+/**
+ * OkLCH → RGB (0-255). Out-of-gamut colors are clamped to sRGB.
+ */
+export function oklchToRgb(L, C, H) {
+  const rad = H * Math.PI / 180;
+  const a = C * Math.cos(rad);
+  const bLab = C * Math.sin(rad);
+
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * bLab;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * bLab;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * bLab;
+
+  const l = l_ ** 3;
+  const m = m_ ** 3;
+  const s = s_ ** 3;
+
+  const lr =  4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const lb = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
+
+  return { r: linearToSrgb(lr), g: linearToSrgb(lg), b: linearToSrgb(lb) };
+}
+
+export function hslToOklch(h, s, l) {
+  const rgb = hslToRgb(h, s, l);
+  return rgbToOklch(rgb.r, rgb.g, rgb.b);
+}
+
+export function oklchToHsl(L, C, H) {
+  const { r, g, b } = oklchToRgb(L, C, H);
+  return rgbToHsl(r, g, b);
+}
+
+// ── CSS color-string formatters ───────────────────────────────────────
+// Modern CSS Color 4 syntax (space-separated, no commas, % for percents).
+
+export function formatHex(h, s, l) {
+  return hslToHex(h, s, l);
+}
+
+export function formatRgb(h, s, l) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  return `rgb(${r} ${g} ${b})`;
+}
+
+export function formatHsl(h, s, l) {
+  return `hsl(${h}deg ${s}% ${l}%)`;
+}
+
+export function formatOklch(h, s, l) {
+  const { L, C, H } = hslToOklch(h, s, l);
+  return `oklch(${(L * 100).toFixed(1)}% ${C.toFixed(3)} ${H.toFixed(1)}deg)`;
+}
+
+/**
+ * Format the current HSL state as the requested CSS color string.
+ * @param {'hex'|'rgb'|'hsl'|'oklch'} format
+ */
+export function formatColor(format, h, s, l) {
+  switch (format) {
+    case 'rgb':   return formatRgb(h, s, l);
+    case 'hsl':   return formatHsl(h, s, l);
+    case 'oklch': return formatOklch(h, s, l);
+    case 'hex':
+    default:      return formatHex(h, s, l);
+  }
+}

package/src/web-components/component-sampler/api.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "component-sampler",
+  "type": "web-component",
+  "description": "Themed UI element preview grid. Renders native HTML elements styled by the active VB theme.",
+  "htmlvalidate": {
+    "flow": true,
+    "permittedContent": ["@flow"]
+  },
+  "attributes": [
+    { "name": "components", "kind": "host-api", "purpose": "config", "type": "string",  "default": "button,input,select,checkbox,radio,badge,progress", "description": "Comma-separated component types to render" },
+    { "name": "label",      "kind": "host-api", "purpose": "config", "type": "string",  "description": "Optional heading label" },
+    { "name": "compact",    "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Reduced spacing variant" }
+  ]
+}

package/src/web-components/component-sampler/logic.js

@@ -0,0 +1,120 @@
+/**
+ * component-sampler: Themed UI element preview grid
+ *
+ * Renders a grid of native HTML elements (buttons, inputs, selects, etc.)
+ * styled by VB's cascade. Theme changes propagate automatically via CSS
+ * custom properties — no re-render needed.
+ *
+ * @attr {string} components - Comma-separated types to render
+ *   (default: "button,input,select,checkbox,radio,badge,progress")
+ * @attr {string} label - Optional heading
+ * @attr {boolean} compact - Reduced spacing
+ *
+ * @example
+ * <component-sampler></component-sampler>
+ * <component-sampler components="button,badge,progress" label="Key Components"></component-sampler>
+ */
+import { registerComponent } from '../../lib/bundle-registry.js';
+import { VBElement } from '../../lib/vb-element.js';
+
+const COMPONENT_RENDERERS = {
+  button: () => `
+    <layout-cluster data-layout-gap="s">
+      <button>Primary</button>
+      <button class="secondary">Secondary</button>
+      <button disabled>Disabled</button>
+    </layout-cluster>`,
+
+  input: () => `
+    <layout-stack data-layout-gap="xs">
+      <input type="text" placeholder="Text input" aria-label="Sample text input"/>
+      <input type="email" placeholder="email@example.com" aria-label="Sample email"/>
+      <input type="text" value="Read only" readonly aria-label="Read-only input"/>
+    </layout-stack>`,
+
+  select: () => `
+    <select aria-label="Sample select">
+      <option>Choose an option</option>
+      <option>Option A</option>
+      <option>Option B</option>
+      <option>Option C</option>
+    </select>`,
+
+  checkbox: () => `
+    <layout-stack data-layout-gap="xs">
+      <label><input type="checkbox" checked="checked"/> Checked option</label>
+      <label><input type="checkbox"/> Unchecked option</label>
+      <label><input type="checkbox" disabled/> Disabled option</label>
+    </layout-stack>`,
+
+  radio: () => `
+    <layout-stack data-layout-gap="xs">
+      <label><input type="radio" name="sampler-radio" checked="checked"/> Selected</label>
+      <label><input type="radio" name="sampler-radio"/> Unselected</label>
+      <label><input type="radio" name="sampler-radio" disabled/> Disabled</label>
+    </layout-stack>`,
+
+  badge: () => `
+    <layout-cluster data-layout-gap="xs">
+      <layout-badge>Default</layout-badge>
+      <layout-badge data-color="success">Success</layout-badge>
+      <layout-badge data-color="warning">Warning</layout-badge>
+      <layout-badge data-color="danger">Danger</layout-badge>
+      <layout-badge data-color="info">Info</layout-badge>
+    </layout-cluster>`,
+
+  progress: () => `
+    <layout-stack data-layout-gap="xs">
+      <progress value="33" max="100">33%</progress>
+      <progress value="66" max="100">66%</progress>
+      <progress value="100" max="100">100%</progress>
+    </layout-stack>`,
+
+  range: () => `
+    <input type="range" min="0" max="100" value="50" aria-label="Sample range"/>`,
+
+  textarea: () => `
+    <textarea rows="3" placeholder="Textarea sample" aria-label="Sample textarea" style="width:100%"></textarea>`,
+};
+
+class ComponentSampler extends VBElement {
+  static observedAttributes = ['components', 'label', 'compact'];
+
+  setup() { this.#render(); }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this.#render();
+  }
+
+  #render() {
+    const componentsAttr = this.getAttribute('components')
+      || 'button,input,select,checkbox,radio,badge,progress';
+    const label = this.getAttribute('label') || '';
+    const compact = this.hasAttribute('compact');
+    const components = componentsAttr.split(',').map(c => c.trim());
+
+    const gap = compact ? '0.75rem' : '1.25rem';
+    let html = '';
+
+    if (label) {
+      html += `<p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${label}</p>`;
+    }
+
+    html += `<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:${gap}">`;
+
+    for (const name of components) {
+      const renderer = COMPONENT_RENDERERS[name];
+      if (!renderer) continue;
+
+      html += `<article style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);background:var(--color-surface,#fff)">
+        <p style="font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#999);margin-block-end:var(--size-s,0.5rem);font-family:var(--font-sans,system-ui)">${name}</p>
+        ${renderer()}
+      </article>`;
+    }
+
+    html += '</section>';
+    this.innerHTML = html;
+  }
+}
+
+registerComponent('component-sampler', ComponentSampler);

package/src/web-components/component-sampler/static.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Component Sampler (Static Fallback)</title>
+  <style>
+    /*
+      Minimal baseline styling for the no-JS fallback.
+      A production page would load the project stylesheet instead;
+      these rules exist only so the file is self-contained.
+    */
+    *, *::before, *::after { box-sizing: border-box; }
+
+    body {
+      font-family: system-ui, sans-serif;
+      line-height: 1.5;
+      max-inline-size: 40rem;
+      margin-inline: auto;
+      padding: 2rem 1rem;
+    }
+  </style>
+</head>
+<body>
+
+  <!--
+    Upgrade relationship
+    ====================
+    This static HTML IS the baseline that <component-sampler> enhances.
+
+    When JavaScript loads and the <component-sampler> custom element is
+    defined, the markup is progressively enhanced with additional
+    interactivity, ARIA attributes, and keyboard navigation.
+
+    Without JS the core content remains accessible and functional.
+  -->
+
+  <h1>Component Sampler</h1>
+
+  <noscript>
+    <p>This component works best with JavaScript enabled.</p>
+  </noscript>
+
+  <!-- TODO: Add meaningful static fallback markup for <component-sampler> -->
+
+</body>
+</html>

package/src/web-components/component-sampler/styles.css

@@ -0,0 +1,9 @@
+/* component-sampler: themed UI element preview grid */
+
+component-sampler:not(:defined) {
+  display: block;
+}
+
+component-sampler {
+  display: block;
+}

package/src/web-components/font-pairer/_font-data.js

@@ -0,0 +1,95 @@
+/**
+ * Curated font list and pairing suggestions for the font-pairer component.
+ * Each font includes metadata for categorization and pairing logic.
+ */
+
+/**
+ * @typedef {{ name: string, category: string, weights: string, style: string }} FontEntry
+ */
+
+/** @type {FontEntry[]} */
+export const FONTS = [
+  // Serif
+  { name: 'Playfair Display', category: 'serif', weights: '400;600;700;900', style: 'elegant' },
+  { name: 'Merriweather',     category: 'serif', weights: '300;400;700;900', style: 'readable' },
+  { name: 'Lora',             category: 'serif', weights: '400;500;600;700', style: 'elegant' },
+  { name: 'Source Serif 4',   category: 'serif', weights: '300;400;600;700', style: 'neutral' },
+  { name: 'Libre Baskerville',category: 'serif', weights: '400;700',         style: 'classic' },
+  { name: 'Crimson Text',     category: 'serif', weights: '400;600;700',     style: 'classic' },
+  { name: 'DM Serif Display', category: 'serif', weights: '400',             style: 'bold' },
+  { name: 'Cormorant Garamond', category: 'serif', weights: '300;400;500;600;700', style: 'elegant' },
+
+  // Sans-Serif
+  { name: 'Inter',            category: 'sans-serif', weights: '300;400;500;600;700', style: 'neutral' },
+  { name: 'Open Sans',        category: 'sans-serif', weights: '300;400;600;700',     style: 'friendly' },
+  { name: 'Roboto',           category: 'sans-serif', weights: '300;400;500;700',     style: 'neutral' },
+  { name: 'Lato',             category: 'sans-serif', weights: '300;400;700;900',     style: 'warm' },
+  { name: 'Nunito',           category: 'sans-serif', weights: '300;400;600;700',     style: 'friendly' },
+  { name: 'Work Sans',        category: 'sans-serif', weights: '300;400;500;600;700', style: 'geometric' },
+  { name: 'DM Sans',          category: 'sans-serif', weights: '400;500;700',         style: 'geometric' },
+  { name: 'Plus Jakarta Sans',category: 'sans-serif', weights: '300;400;500;600;700', style: 'modern' },
+  { name: 'Space Grotesk',    category: 'sans-serif', weights: '300;400;500;600;700', style: 'technical' },
+  { name: 'Manrope',          category: 'sans-serif', weights: '300;400;500;600;700', style: 'geometric' },
+  { name: 'IBM Plex Sans',    category: 'sans-serif', weights: '300;400;500;600',     style: 'technical' },
+  { name: 'Outfit',           category: 'sans-serif', weights: '300;400;500;600;700', style: 'modern' },
+
+  // Display
+  { name: 'Bebas Neue',       category: 'display', weights: '400',             style: 'bold' },
+  { name: 'Abril Fatface',    category: 'display', weights: '400',             style: 'elegant' },
+  { name: 'Oswald',           category: 'display', weights: '300;400;500;600;700', style: 'condensed' },
+  { name: 'Sora',             category: 'display', weights: '300;400;500;600;700', style: 'modern' },
+  { name: 'Fraunces',         category: 'display', weights: '300;400;500;600;700;900', style: 'elegant' },
+
+  // Monospace
+  { name: 'JetBrains Mono',   category: 'monospace', weights: '400;500;600;700', style: 'technical' },
+  { name: 'Fira Code',        category: 'monospace', weights: '300;400;500;600;700', style: 'technical' },
+  { name: 'IBM Plex Mono',    category: 'monospace', weights: '400;500;600',     style: 'technical' },
+  { name: 'Source Code Pro',  category: 'monospace', weights: '300;400;500;600;700', style: 'neutral' },
+];
+
+/** Curated pairings: [heading, body] */
+export const SUGGESTED_PAIRINGS = [
+  ['Playfair Display', 'Inter'],
+  ['DM Serif Display', 'DM Sans'],
+  ['Fraunces',         'Plus Jakarta Sans'],
+  ['Lora',             'Open Sans'],
+  ['Merriweather',     'Roboto'],
+  ['Oswald',           'Lato'],
+  ['Cormorant Garamond', 'Work Sans'],
+  ['Sora',             'Inter'],
+  ['Abril Fatface',    'Nunito'],
+  ['Source Serif 4',   'Source Code Pro'],
+  ['Space Grotesk',    'IBM Plex Sans'],
+  ['Outfit',           'Manrope'],
+];
+
+/**
+ * Build a Google Fonts URL for a font.
+ * @param {string} family
+ * @param {string} weights
+ * @returns {string}
+ */
+export function googleFontsUrl(family, weights = '400;700') {
+  const encoded = family.replace(/\s+/g, '+');
+  return `https://fonts.googleapis.com/css2?family=${encoded}:wght@${weights}&display=swap`;
+}
+
+/**
+ * Load a Google Font by injecting a <link> tag (deduplicates).
+ * @param {string} family
+ * @param {string} weights
+ * @returns {Promise<void>}
+ */
+export async function loadFont(family, weights = '400;700') {
+  const id = `gf-${family.replace(/\s+/g, '-').toLowerCase()}`;
+  if (document.getElementById(id)) {
+    await document.fonts.ready;
+    return;
+  }
+  const link = document.createElement('link');
+  link.id = id;
+  link.rel = 'stylesheet';
+  link.href = googleFontsUrl(family, weights);
+  document.head.appendChild(link);
+  await document.fonts.ready;
+}

package/src/web-components/font-pairer/api.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "font-pairer",
+  "type": "web-component",
+  "description": "Interactive font pairing tool with Google Fonts loading and CSS export",
+  "attributes": [
+    {
+      "name": "heading-font",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Google Fonts family name for headings"
+    },
+    {
+      "name": "body-font",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Google Fonts family name for body text"
+    },
+    {
+      "name": "sample",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Custom sample heading text"
+    },
+    {
+      "name": "show-export",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Show Copy CSS / Copy @import toolbar"
+    },
+    {
+      "name": "show-suggestions",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Show curated pairing suggestions"
+    }
+  ],
+  "events": [
+    {
+      "name": "font-pairer:change"
+    }
+  ],
+  "childAttributes": [],
+  "structure": [],
+  "htmlvalidate": {
+    "flow": true,
+    "permittedContent": [
+      "@flow"
+    ]
+  }
+}