@openvoxproject/voxblocks 0.9.0 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openvoxproject/voxblocks",
-  "version": "0.9.0",
-  "description": "Web components for Vox Pupuli OpenVox community web sites and apps",
+  "version": "0.10.0",
+  "description": "Web components for OpenVox community web sites and apps",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -35,9 +35,11 @@
   "scripts": {
     "prepare": "npm run build",
     "build": "vite build && vite build --config vite.cdn.config.ts && tsc -p tsconfig.build.json",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
+    "docs:dev": "rm -rf docs/assets docs/_data/manifest.json && concurrently -n vite,jekyll -c blue,magenta \"npm:docs:assets:watch\" \"npm:docs:jekyll:wait\"",
+    "docs:assets:watch": "vite build --config docs/vite.config.js --watch",
+    "docs:jekyll:wait": "wait-on docs/_data/manifest.json && npm run docs:jekyll",
+    "docs:jekyll": "BUNDLE_GEMFILE=docs/Gemfile bundle exec jekyll serve --livereload --source docs --destination docs/_site",
+    "docs:build": "vite build --config docs/vite.config.js && BUNDLE_GEMFILE=docs/Gemfile bundle exec jekyll build --source docs --destination docs/_site --config docs/_config.yml,docs/_config_production.yml",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -47,10 +49,11 @@
   "devDependencies": {
     "@storybook/web-components": "^10.5.5",
     "@storybook/web-components-vite": "^10.5.5",
+    "concurrently": "^9.1.0",
     "storybook": "^10.5.5",
     "typescript": "^5.6.0",
     "vite": "^6.0.0",
-    "vitepress": "^1.5.0"
+    "wait-on": "^9.1.0"
   },
   "allowScripts": {
     "esbuild@0.25.12": true,

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

@@ -1,10 +1,19 @@
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ICON_PATHS, type IconName } from '../icon/icon-paths.js';
 
 export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
 
+const VARIANT_ICON: Record<AlertVariant, IconName> = {
+  info: 'info',
+  success: 'check-circle',
+  warning: 'warning',
+  danger: 'x-circle',
+};
+
 /**
- * A page-level notification message, optionally dismissible.
+ * A page-level notification message, optionally dismissible. Shows an
+ * icon matching `variant` automatically — no icon slot to fill in.
  * For static advisory text inside prose, see `<vox-callout>`.
  *
  * @slot - Alert message.
@@ -43,6 +52,13 @@ export class VoxAlert extends LitElement {
       flex: 1 1 auto;
     }
 
+    .icon {
+      flex: none;
+      width: 20px;
+      height: 20px;
+      margin-top: 1px;
+    }
+
     .heading {
       margin: 0 0 var(--vox-space-1);
       font-size: 14px;
@@ -56,6 +72,9 @@ export class VoxAlert extends LitElement {
     .info .heading {
       color: var(--vox-color-brand-1);
     }
+    .info .icon {
+      color: var(--vox-color-brand-1);
+    }
 
     .success {
       background-color: var(--vox-color-tip-soft);
@@ -64,6 +83,9 @@ export class VoxAlert extends LitElement {
     .success .heading {
       color: var(--vox-color-tip-1);
     }
+    .success .icon {
+      color: var(--vox-color-tip-1);
+    }
 
     .warning {
       background-color: var(--vox-color-warning-soft);
@@ -72,6 +94,9 @@ export class VoxAlert extends LitElement {
     .warning .heading {
       color: var(--vox-color-warning-1);
     }
+    .warning .icon {
+      color: var(--vox-color-warning-1);
+    }
 
     .danger {
       background-color: var(--vox-color-danger-soft);
@@ -80,6 +105,9 @@ export class VoxAlert extends LitElement {
     .danger .heading {
       color: var(--vox-color-danger-1);
     }
+    .danger .icon {
+      color: var(--vox-color-danger-1);
+    }
 
     .close {
       flex: none;
@@ -128,6 +156,18 @@ export class VoxAlert extends LitElement {
   render() {
     return html`
       <div class="alert ${this.variant}" role="alert">
+        <svg
+          class="icon"
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          ${ICON_PATHS[VARIANT_ICON[this.variant]]}
+        </svg>
         <div class="body">
           ${this.heading
             ? html`<p class="heading">${this.heading}</p>`

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ICON_PATHS, type IconName } from '../icon/icon-paths.js';
 
 export type CalloutVariant = 'info' | 'tip' | 'warning' | 'danger';
 
@@ -10,9 +11,17 @@ const DEFAULT_HEADINGS: Record<CalloutVariant, string> = {
   danger: 'Danger',
 };
 
+const VARIANT_ICON: Record<CalloutVariant, IconName> = {
+  info: 'info',
+  tip: 'check-circle',
+  warning: 'warning',
+  danger: 'x-circle',
+};
+
 /**
  * An admonition block matching the custom containers on the OpenVox docs
- * (::: tip, ::: warning, ...).
+ * (::: tip, ::: warning, ...). Shows an icon matching `variant`
+ * automatically — no icon slot to fill in.
  *
  * @slot - Callout body content.
  */
@@ -29,6 +38,9 @@ export class VoxCallout extends LitElement {
     }
 
     .callout {
+      display: flex;
+      gap: var(--vox-space-3);
+      align-items: flex-start;
       border-radius: var(--vox-radius-md);
       padding: var(--vox-space-4);
       font-family: var(--vox-font-family-base);
@@ -37,6 +49,18 @@ export class VoxCallout extends LitElement {
       color: var(--vox-color-text-2);
     }
 
+    .icon {
+      flex: none;
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+    }
+
+    .content {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
     .heading {
       margin: 0 0 var(--vox-space-2);
       font-size: 14px;
@@ -49,6 +73,9 @@ export class VoxCallout extends LitElement {
     .info .heading {
       color: var(--vox-color-text-1);
     }
+    .info .icon {
+      color: var(--vox-color-text-1);
+    }
 
     .tip {
       background-color: var(--vox-color-tip-soft);
@@ -56,6 +83,9 @@ export class VoxCallout extends LitElement {
     .tip .heading {
       color: var(--vox-color-tip-1);
     }
+    .tip .icon {
+      color: var(--vox-color-tip-1);
+    }
 
     .warning {
       background-color: var(--vox-color-warning-soft);
@@ -63,6 +93,9 @@ export class VoxCallout extends LitElement {
     .warning .heading {
       color: var(--vox-color-warning-1);
     }
+    .warning .icon {
+      color: var(--vox-color-warning-1);
+    }
 
     .danger {
       background-color: var(--vox-color-danger-soft);
@@ -70,6 +103,9 @@ export class VoxCallout extends LitElement {
     .danger .heading {
       color: var(--vox-color-danger-1);
     }
+    .danger .icon {
+      color: var(--vox-color-danger-1);
+    }
 
     ::slotted(p:first-child) {
       margin-top: 0;
@@ -83,8 +119,22 @@ export class VoxCallout extends LitElement {
   render() {
     return html`
       <div class="callout ${this.variant}" role="note">
-        <p class="heading">${this.heading ?? DEFAULT_HEADINGS[this.variant]}</p>
-        <slot></slot>
+        <svg
+          class="icon"
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          ${ICON_PATHS[VARIANT_ICON[this.variant]]}
+        </svg>
+        <div class="content">
+          <p class="heading">${this.heading ?? DEFAULT_HEADINGS[this.variant]}</p>
+          <slot></slot>
+        </div>
       </div>
     `;
   }

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

@@ -32,6 +32,11 @@ export class VoxCard extends LitElement {
       border-radius: var(--vox-radius-lg);
       padding: var(--vox-space-6);
       font-family: var(--vox-font-family-base);
+      /* Slotted content (e.g. an icon using stroke="currentColor")
+         inherits from this element's position in the flat tree — when
+         rendered as an <a>, that means the browser's default link color
+         without this, since nothing else in .card sets one. */
+      color: var(--vox-color-text-1);
       text-decoration: none;
       transition: border-color var(--vox-transition-base);
     }

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

@@ -1,10 +1,12 @@
 import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ICON_PATHS } from '../icon/icon-paths.js';
 
 /**
  * A site header with brand, primary navigation, and an actions area.
  * Nav entries are plain links; mark the current page with
- * `aria-current="page"`.
+ * `aria-current="page"`. Below 768px, nav and actions collapse behind a
+ * menu button.
  *
  * @slot logo - Brand mark shown before the site title.
  * @slot - Navigation links.
@@ -18,6 +20,8 @@ export class VoxHeader extends LitElement {
   /** Where the brand links to. */
   @property() href = '/';
 
+  @state() private mobileOpen = false;
+
   static styles = css`
     :host {
       display: block;
@@ -52,6 +56,39 @@ export class VoxHeader extends LitElement {
       width: auto;
     }
 
+    .menu-toggle {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      margin-left: auto;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      cursor: pointer;
+    }
+
+    .menu-toggle:hover {
+      color: var(--vox-color-brand-1);
+    }
+
+    .menu-toggle:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .menu-icon {
+      width: 22px;
+      height: 22px;
+    }
+
+    .nav-wrap {
+      display: contents;
+    }
+
     nav {
       display: flex;
       align-items: center;
@@ -82,8 +119,73 @@ export class VoxHeader extends LitElement {
       align-items: center;
       gap: var(--vox-space-3);
     }
+
+    @media (max-width: 768px) {
+      .menu-toggle {
+        display: inline-flex;
+      }
+
+      .nav-wrap {
+        display: none;
+        width: 100%;
+      }
+
+      .nav-wrap.open {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--vox-space-4);
+        margin-top: var(--vox-space-3);
+        padding-top: var(--vox-space-4);
+        border-top: 1px solid var(--vox-color-divider);
+      }
+
+      nav {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--vox-space-3);
+      }
+
+      .actions {
+        flex-direction: column;
+        align-items: stretch;
+      }
+    }
   `;
 
+  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.mobileOpen && !event.composedPath().includes(this)) {
+      this.mobileOpen = false;
+    }
+  };
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.mobileOpen) {
+      this.mobileOpen = false;
+      this.renderRoot.querySelector<HTMLElement>('.menu-toggle')?.focus();
+    }
+  };
+
+  private toggleMobileMenu = () => {
+    this.mobileOpen = !this.mobileOpen;
+  };
+
+  private closeMobileMenu = () => {
+    this.mobileOpen = false;
+  };
+
   render() {
     return html`
       <header class="header">
@@ -91,11 +193,34 @@ export class VoxHeader extends LitElement {
           <slot name="logo"></slot>
           ${this.siteTitle ? html`<span>${this.siteTitle}</span>` : nothing}
         </a>
-        <nav aria-label="Main">
-          <slot></slot>
-        </nav>
-        <div class="actions">
-          <slot name="actions"></slot>
+        <button
+          type="button"
+          class="menu-toggle"
+          aria-expanded=${this.mobileOpen ? 'true' : 'false'}
+          aria-controls="nav-wrap"
+          aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}
+          @click=${this.toggleMobileMenu}
+        >
+          <svg
+            class="menu-icon"
+            viewBox="0 0 48 48"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            ${this.mobileOpen ? ICON_PATHS.close : ICON_PATHS.menu}
+          </svg>
+        </button>
+        <div id="nav-wrap" class="nav-wrap${this.mobileOpen ? ' open' : ''}">
+          <nav aria-label="Main">
+            <slot @click=${this.closeMobileMenu}></slot>
+          </nav>
+          <div class="actions">
+            <slot name="actions"></slot>
+          </div>
         </div>
       </header>
     `;