@conduction/docusaurus-preset 0.1.0

package/src/diagrams/README.md

@@ -0,0 +1,74 @@
+# @conduction/diagrams
+
+Brand-strict diagram primitives for Conduction and ConNext, as framework-agnostic web components.
+
+## Status
+
+Pre-release, scaffolded inside the `design-system` repo. The future home is tracked in [design-system#2](https://github.com/ConductionNL/design-system/issues/2).
+
+## Why
+
+Every Conduction diagram follows the same brand rules: pointy-top hexes, fixed palette, one orange accent per scene, no gradients on shapes. Third-party diagram libraries (Mermaid, D3-based, drawio, etc.) all force compromises against those rules. We render shapes ourselves with inline SVG inside web components, so every diagram on every surface looks the same.
+
+## Stack
+
+- **Vanilla `customElements`** for component registration. No framework, no build step required.
+- **Inline SVG + `clip-path`** for all shapes. No third-party shape library.
+- **CSS + Web Animations API** for animation. Motion One (MIT, ~3kb) added when we orchestrate sequences.
+- **Lit** added when reactive-prop complexity demands it (probably at `cn-platform`).
+
+## Components
+
+| Component | Status | Purpose |
+| --- | --- | --- |
+| `<cn-hex>` | Available | Pointy-top hex primitive. Label + icon, nine colours, four sizes, solid or outline, optional interactive state. |
+| `<cn-hex-prism>` | Available | 3D isometric prism. Six families, four sizes, slots for label / icon / kicker / pills, coming-state badge. |
+| `<cn-domain-tree>` | Available | Vertical apex-and-branches layout for one-to-many domain maps. Slot-driven; multi-trunk diagrams stack two trees. |
+| `<cn-platform>` | Available | Workspace-plus-orbiting-apps cluster. Six neighbours in a hex ring around a central apex (typically a cobalt cn-hex-prism representing the Nextcloud workspace). |
+| `<cn-pipeline>` | Available | Horizontal flow of stages with auto-inserted arrow connectors. Three arrow tones. |
+| `<cn-side-box>` | Available | Rectangle-feed-prism pattern. Header chip + icon-and-label rows. Three widths, optional compact + footer. |
+| `<cn-honeycomb-bg>` | Available | Honeycomb backdrop wrapper. Theme + accent + density attributes. Parallax in v2. |
+
+## Usage
+
+No build step needed. Drop the module into any HTML page:
+
+```html
+<script type="module" src="../diagrams/src/index.js"></script>
+
+<cn-hex color="cobalt" size="lg">Connect</cn-hex>
+
+<cn-hex color="orange" size="lg" interactive>
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M3 7l9-4 9 4-9 4-9-4z"/>
+    <path d="M3 12l9 4 9-4"/>
+  </svg>
+  Catalog
+</cn-hex>
+```
+
+## `<cn-hex>` API
+
+| Slot | Purpose |
+| --- | --- |
+| default | Label text. Optional. |
+| `icon` | Icon SVG or `<img>`. Optional. Sits above the label by default; left of it with `layout="horizontal"`. |
+
+| Attribute | Values | Default | Purpose |
+| --- | --- | --- | --- |
+| `color` | `cobalt`, `orange`, `mint`, `lavender`, `terracotta`, `forest`, `nextcloud`, `red` | `cobalt` | Brand colour. |
+| `size` | `sm`, `md`, `lg`, `xl`, or any CSS length | `md` (64px) | Width of the hex. Height = width × 1.155. |
+| `variant` | `solid`, `outline` | `solid` | Outline draws a stroke at the brand colour with a transparent body. |
+| `layout` | `vertical`, `horizontal` | `vertical` | Icon-above-label vs icon-left-of-label. |
+| `interactive` | boolean | absent | Adds hover scale, focus ring, click event, keyboard activation. |
+
+## Brand rules
+
+- Pointy-top only. No rotation. No flat-top hexes.
+- Solid colours only. No gradients, no rgba on shapes.
+- One orange accent per scene. KNVB orange for highlights, never primary fills.
+- Backgrounds are hex polygons, never radial-gradient circles.
+
+## Roadmap
+
+See the planned components above. Built in this order: `cn-hex` ✅ → `cn-hex-prism` → `cn-domain-tree` (first real consumer on the new identity/domains.html page) → `cn-platform` → `cn-pipeline` → `cn-side-box` → `cn-honeycomb-bg`.

package/src/diagrams/cn-domain-tree.js

@@ -0,0 +1,105 @@
+/**
+ * <cn-domain-tree> — vertical apex-and-branches layout for domain maps.
+ *
+ * Wraps an apex hex and a row of branch hexes with the kit's standard
+ * connector lines. Designed for the identity / Websites page, but
+ * useful anywhere a one-to-many "trunk → leaves" relationship needs
+ * to render. Multi-trunk diagrams stack two or more <cn-domain-tree>
+ * elements vertically.
+ *
+ * Slots
+ *   apex     — the trunk hex; required (typically <cn-hex size="xl">)
+ *   default  — branch hexes; rendered in a centered horizontal row
+ *   legend   — optional legend chips at the bottom
+ *
+ * Attributes
+ *   compact  — tighter vertical spacing (for sub-trunks)
+ *   tone     — cobalt | dim                (default: cobalt)
+ *              tone="dim" colours connectors gray instead of cobalt
+ *
+ * The component renders only structure and connectors; the apex and
+ * branch hexes are passed in as <cn-hex> (or anything you want) so
+ * full styling control stays with the caller.
+ */
+
+class CnDomainTree extends HTMLElement {
+  static get observedAttributes() { return ['compact', 'tone']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() { this.render(); }
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const compact = this.hasAttribute('compact');
+    const tone = this.getAttribute('tone') || 'cobalt';
+    const connectorColor = tone === 'dim'
+      ? 'var(--c-cobalt-100)'
+      : 'var(--c-cobalt-200)';
+
+    const gap = compact ? 'var(--space-3)' : 'var(--space-5)';
+    const connectorH = compact ? '20px' : '32px';
+    const padY = compact ? 'var(--space-5)' : 'var(--space-9)';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
+        }
+        .tree {
+          display: flex; flex-direction: column;
+          align-items: center;
+          gap: ${gap};
+          padding: ${padY} var(--space-7);
+          overflow-x: auto;
+        }
+        .connector {
+          width: 1px;
+          height: ${connectorH};
+          background: ${connectorColor};
+          flex-shrink: 0;
+        }
+        .branches {
+          display: flex;
+          gap: var(--space-7);
+          align-items: center;
+          justify-content: center;
+          flex-wrap: wrap;
+        }
+        .legend {
+          display: flex; gap: var(--space-6);
+          flex-wrap: wrap;
+          margin-top: var(--space-4);
+          padding-top: var(--space-5);
+          border-top: 1px solid var(--c-cobalt-100);
+          width: 100%;
+          justify-content: center;
+        }
+        .legend:empty { display: none; }
+
+        ::slotted([slot="legend"]) {
+          display: flex; align-items: center; gap: var(--space-2);
+          font-size: 13px;
+          color: var(--c-cobalt-700);
+        }
+      </style>
+
+      <div class="tree">
+        <slot name="apex"></slot>
+        <div class="connector"></div>
+        <div class="branches"><slot></slot></div>
+        <div class="legend"><slot name="legend"></slot></div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('cn-domain-tree')) {
+  customElements.define('cn-domain-tree', CnDomainTree);
+}
+
+export { CnDomainTree };

package/src/diagrams/cn-hex-prism.js

@@ -0,0 +1,163 @@
+/**
+ * <cn-hex-prism> — the 3D isometric prism primitive.
+ *
+ * The atomic unit for ConNext platform diagrams. A pointy-top hexagon
+ * extruded ~30° in isometric view, three faces tinted from one family
+ * palette: top = family-100 (lit), left = family-300, right = family-500,
+ * ink = family-700. Six families ship: cobalt (workspace only), coral,
+ * lavender, gold, mint, gray.
+ *
+ * Slots
+ *   default   — label text (the prism's name)
+ *   icon      — icon SVG / image, sits above the label on the top face
+ *   kicker    — small uppercase line under the label (e.g. "DATA · STABLE")
+ *   pills     — optional pill stack floating on the top face
+ *
+ * Attributes
+ *   family    cobalt | coral | lavender | gold | mint | gray   (default: coral)
+ *   size      sm | md | lg | xl  or any CSS length             (default: md = 144px)
+ *   state     coming                                             (optional)
+ *
+ * Geometry: SVG viewBox 240×252, paths inscribed for a pointy-top hex
+ * extruded by R*0.45 (depth vector). All three faces drawn as polygons,
+ * face edges drawn as 1.25-stroke polylines at 18% opacity for subtle
+ * faceting. The label-content layer sits in the upper portion so the
+ * text hits the top face only, not the side faces.
+ */
+
+const SIZES = { sm: 96, md: 144, lg: 192, xl: 240 };
+
+const FAMILIES = {
+  cobalt:   { top: 'var(--c-cobalt-100)',   left: 'var(--c-cobalt-400)',   right: 'var(--c-cobalt-700)',   ink: '#fff' },
+  coral:    { top: 'var(--c-coral-100)',    left: 'var(--c-coral-300)',    right: 'var(--c-coral-500)',    ink: 'var(--c-coral-700)' },
+  lavender: { top: 'var(--c-lavender-100)', left: 'var(--c-lavender-300)', right: 'var(--c-lavender-500)', ink: 'var(--c-lavender-700)' },
+  gold:     { top: 'var(--c-gold-100)',     left: 'var(--c-gold-300)',     right: 'var(--c-gold-500)',     ink: 'var(--c-gold-700)' },
+  mint:     { top: 'var(--c-mint-100)',     left: 'var(--c-mint-300)',     right: 'var(--c-mint-500)',     ink: 'var(--c-mint-700)' },
+  gray:     { top: 'var(--c-gray-100)',     left: 'var(--c-gray-300)',     right: 'var(--c-gray-500)',     ink: 'var(--c-gray-700)' },
+};
+
+class CnHexPrism extends HTMLElement {
+  static get observedAttributes() {
+    return ['family', 'size', 'state'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() { this.render(); }
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const familyKey = this.getAttribute('family') || 'coral';
+    const sizeAttr = this.getAttribute('size') || 'md';
+    const state = this.getAttribute('state');
+
+    const f = FAMILIES[familyKey] || FAMILIES.coral;
+    const sizePx = SIZES[sizeAttr] ? `${SIZES[sizeAttr]}px` : sizeAttr;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          --face-top:   ${f.top};
+          --face-left:  ${f.left};
+          --face-right: ${f.right};
+          --ink:        ${f.ink};
+
+          display: inline-block;
+          width: ${sizePx};
+          position: relative;
+          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
+          color: var(--ink);
+        }
+
+        svg.shape { display: block; width: 100%; height: auto; overflow: visible; }
+        svg.shape .face-top   { fill: var(--face-top); }
+        svg.shape .face-left  { fill: var(--face-left); }
+        svg.shape .face-right { fill: var(--face-right); }
+        svg.shape .face-edge  { stroke: var(--ink); stroke-width: 1.25; fill: none; opacity: 0.18; }
+
+        .content {
+          position: absolute;
+          inset: 0;
+          display: flex; flex-direction: column;
+          align-items: center; justify-content: center;
+          padding-bottom: 18%; /* push content onto top face only */
+          color: var(--ink);
+          text-align: center;
+          pointer-events: none;
+        }
+        ::slotted([slot="icon"]) {
+          width: 22%;
+          height: auto;
+          margin-bottom: 4%;
+          color: currentColor;
+          fill: currentColor;
+        }
+        .label {
+          font-size: calc(${sizePx} * 0.10);
+          font-weight: 700;
+          letter-spacing: -0.01em;
+          line-height: 1.15;
+        }
+        ::slotted([slot="kicker"]) {
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: calc(${sizePx} * 0.066);
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          margin-top: 2%;
+          opacity: 0.78;
+          color: currentColor;
+        }
+        ::slotted([slot="pills"]) {
+          display: flex; flex-direction: column;
+          gap: 4px; margin-top: 4%;
+          align-items: center;
+        }
+
+        ${state === 'coming' ? `
+          .badge {
+            position: absolute;
+            top: 12%; right: 6%;
+            background: var(--c-cobalt-700);
+            color: white;
+            font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+            font-size: calc(${sizePx} * 0.05);
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            padding: 3px 7px;
+            border-radius: 999px;
+            pointer-events: none;
+          }
+        ` : ''}
+      </style>
+
+      <svg class="shape" viewBox="0 0 240 252" aria-hidden="true">
+        <!-- left face -->
+        <polygon class="face-left"  points="120,84 60,118 60,212 120,246"/>
+        <!-- right face -->
+        <polygon class="face-right" points="120,84 180,118 180,212 120,246"/>
+        <!-- top face (drawn last so it sits on top of the side faces at the seam) -->
+        <polygon class="face-top"   points="120,6 180,40 180,118 120,152 60,118 60,40"/>
+        <!-- subtle face edges, point down + center vertical -->
+        <polyline class="face-edge" points="120,84 60,118 120,152 180,118 120,84"/>
+        <polyline class="face-edge" points="120,152 120,246"/>
+      </svg>
+      <div class="content">
+        <slot name="icon"></slot>
+        <span class="label"><slot></slot></span>
+        <slot name="kicker"></slot>
+        <slot name="pills"></slot>
+      </div>
+      ${state === 'coming' ? `<div class="badge">Coming</div>` : ''}
+    `;
+  }
+}
+
+if (!customElements.get('cn-hex-prism')) {
+  customElements.define('cn-hex-prism', CnHexPrism);
+}
+
+export { CnHexPrism };

package/src/diagrams/cn-hex.js

@@ -0,0 +1,181 @@
+/**
+ * <cn-hex> — the foundational pointy-top hex primitive.
+ *
+ * Brand rules baked in: pointy-top only, solid colours, fixed palette.
+ * No rotation, no gradients on the shape itself.
+ *
+ * Slots
+ *   default   — label text (or any inline content)
+ *   icon      — icon SVG / image, sits above the label by default
+ *
+ * Attributes
+ *   color       cobalt | orange | mint | lavender | terracotta | forest |
+ *               nextcloud | commonground | red
+ *               (default: cobalt)
+ *   size        sm | md | lg | xl  or any CSS length (default: md = 64px)
+ *   variant     solid | outline      (default: solid)
+ *   layout      vertical | horizontal (default: vertical, icon top + label below)
+ *   interactive boolean — hover scale + focus ring + click event
+ *
+ * Geometry: the hex is rendered as an SVG polygon inside a 100x115.47 viewBox
+ * (the natural 2/√3 height/width ratio of a regular pointy-top hex). The
+ * label-content layer sits in an inner safe-area hex inscribed in the outer
+ * shape, so labels and icons stay clear of the points.
+ *
+ * Ink colour: white on every brand fill except commonground (yellow), which
+ * gets cobalt-900 ink so the label hits AA contrast against the saturated
+ * yellow.
+ */
+
+const SIZES = { sm: 40, md: 64, lg: 96, xl: 128 };
+
+const COLORS = {
+  cobalt:       { fill: 'var(--c-blue-cobalt)',         ink: '#fff' },
+  orange:       { fill: 'var(--c-orange-knvb)',         ink: '#fff' },
+  mint:         { fill: 'var(--c-mint-500)',            ink: '#fff' },
+  lavender:     { fill: 'var(--c-lavender-500)',        ink: '#fff' },
+  terracotta:   { fill: 'var(--c-terracotta-500)',      ink: '#fff' },
+  forest:       { fill: 'var(--c-forest-500)',          ink: '#fff' },
+  nextcloud:    { fill: 'var(--c-nextcloud-blue)',      ink: '#fff' },
+  commonground: { fill: 'var(--c-commonground-yellow)', ink: 'var(--c-cobalt-900)' },
+  red:          { fill: 'var(--c-red-vermillion)',      ink: '#fff' },
+};
+
+class CnHex extends HTMLElement {
+  static get observedAttributes() {
+    return ['color', 'size', 'variant', 'layout', 'interactive'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    if (this.hasAttribute('interactive') && !this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+      this.setAttribute('role', 'button');
+      this.addEventListener('keydown', this._onKey);
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this._onKey);
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot) this.render();
+  }
+
+  _onKey = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.click();
+    }
+  };
+
+  render() {
+    const colorKey = this.getAttribute('color') || 'cobalt';
+    const sizeAttr = this.getAttribute('size') || 'md';
+    const variant = this.getAttribute('variant') || 'solid';
+    const layout = this.getAttribute('layout') || 'vertical';
+    const interactive = this.hasAttribute('interactive');
+
+    const brand = COLORS[colorKey] || COLORS.cobalt;
+    const sizePx = SIZES[sizeAttr] ? `${SIZES[sizeAttr]}px` : sizeAttr;
+
+    const isOutline = variant === 'outline';
+    const fill = isOutline ? 'transparent' : brand.fill;
+    const stroke = isOutline ? brand.fill : 'transparent';
+    const strokeW = isOutline ? 4 : 0;
+    const ink = isOutline ? brand.fill : brand.ink;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          --cn-hex-size: ${sizePx};
+          --cn-hex-ink: ${ink};
+
+          display: inline-flex;
+          width: var(--cn-hex-size);
+          height: calc(var(--cn-hex-size) * 1.1547);
+          color: var(--cn-hex-ink);
+          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
+          font-weight: 600;
+          font-size: calc(var(--cn-hex-size) * 0.16);
+          line-height: 1.15;
+          text-align: center;
+          position: relative;
+          outline: none;
+          transition: transform 160ms ease;
+        }
+
+        ${interactive ? `
+          :host { cursor: pointer; }
+          :host(:hover) svg.shape  { transform: scale(1.04); }
+          :host(:focus-visible) svg.shape polygon {
+            stroke: var(--c-orange-knvb, #F36C21);
+            stroke-width: 3;
+          }
+        ` : ''}
+
+        svg.shape {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          overflow: visible;
+          transition: transform 160ms ease;
+        }
+        svg.shape polygon {
+          fill: ${fill};
+          stroke: ${stroke};
+          stroke-width: ${strokeW};
+          stroke-linejoin: round;
+          transition: fill 160ms ease, stroke 160ms ease;
+        }
+
+        .content {
+          position: relative;
+          width: 100%; height: 100%;
+          display: flex;
+          flex-direction: ${layout === 'horizontal' ? 'row' : 'column'};
+          align-items: center;
+          justify-content: center;
+          gap: ${layout === 'horizontal' ? '6%' : '4%'};
+          padding: ${layout === 'horizontal' ? '0 20%' : '22% 16%'};
+          box-sizing: border-box;
+        }
+
+        ::slotted([slot="icon"]) {
+          width: ${layout === 'horizontal' ? '34%' : '42%'};
+          height: auto;
+          flex-shrink: 0;
+          color: currentColor;
+          fill: currentColor;
+        }
+
+        .label {
+          display: inline-block;
+          letter-spacing: -0.005em;
+          word-break: keep-all;
+        }
+      </style>
+
+      <svg class="shape" viewBox="0 0 100 115.47" preserveAspectRatio="none" aria-hidden="true">
+        <polygon points="50,2 98,28.87 98,86.6 50,113.47 2,86.6 2,28.87" />
+      </svg>
+      <div class="content">
+        <slot name="icon"></slot>
+        <span class="label"><slot></slot></span>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('cn-hex')) {
+  customElements.define('cn-hex', CnHex);
+}
+
+export { CnHex };

package/src/diagrams/cn-honeycomb-bg.js

@@ -0,0 +1,135 @@
+/**
+ * <cn-honeycomb-bg> — honeycomb backdrop wrapper.
+ *
+ * A reusable hex-pattern backdrop for any brand surface. Smaller
+ * hexes form a regular tessellation; one optional orange accent
+ * sits in a stable position. Always pointy-top, never flat-top,
+ * never rotated.
+ *
+ *   <cn-honeycomb-bg theme="cobalt">
+ *     <h2>Foreground content sits above the backdrop.</h2>
+ *   </cn-honeycomb-bg>
+ *
+ * v1 ships a static SVG-pattern fill. Parallax + depth tiers come
+ * later when we layer Motion One in.
+ *
+ * Attributes
+ *   theme    — cobalt | light          (default: cobalt)
+ *              cobalt = white hexes on cobalt-900 (default brand surface)
+ *              light  = cobalt hexes on white (low-contrast inverse)
+ *   accent   — boolean; renders one KNVB-orange hex accent in the field
+ *   density  — sm | md | lg            (default: md)
+ *              Hex tile size. Smaller = denser pattern.
+ */
+
+const DENSITIES = { sm: 24, md: 36, lg: 56 };
+
+class CnHoneycombBg extends HTMLElement {
+  static get observedAttributes() { return ['theme', 'accent', 'density']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() { this.render(); }
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const theme = this.getAttribute('theme') || 'cobalt';
+    const accent = this.hasAttribute('accent');
+    const densityKey = this.getAttribute('density') || 'md';
+    const r = DENSITIES[densityKey] || 36;
+    const w = r * Math.sqrt(3);
+    const h = r * 2;
+    const stepY = h * 0.75;
+
+    const isLight = theme === 'light';
+    const bgColor = isLight ? '#FFFFFF' : 'var(--c-cobalt-900)';
+    const hexColor = isLight ? 'var(--c-cobalt-100)' : 'rgba(255,255,255,0.06)';
+    const hexStroke = isLight ? 'var(--c-cobalt-200)' : 'rgba(255,255,255,0.1)';
+
+    /* Build a pattern with two hex rows for proper tessellation:
+       even rows offset by 0; odd rows offset by w/2. */
+    const patternW = w;
+    const patternH = stepY * 2;
+    const hexPath = (cx, cy) => {
+      const points = [];
+      for (let i = 0; i < 6; i++) {
+        const angle = (Math.PI / 3) * i + Math.PI / 6; /* pointy-top */
+        const x = cx + r * Math.cos(angle);
+        const y = cy + r * Math.sin(angle);
+        points.push(`${x.toFixed(2)},${y.toFixed(2)}`);
+      }
+      return points.join(' ');
+    };
+
+    /* Two staggered hex centres in one tile: top-row at y=stepY/2,
+       bottom-row at y=stepY/2+stepY, offset by w/2. */
+    const hexA = hexPath(0,         stepY / 2);
+    const hexB = hexPath(w / 2,     stepY / 2 + stepY);
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: relative;
+          background: ${bgColor};
+          color: ${isLight ? 'var(--c-cobalt-900)' : 'white'};
+          overflow: hidden;
+          border-radius: var(--radius-lg);
+        }
+
+        svg.bg {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 0;
+          pointer-events: none;
+        }
+
+        ${accent ? `
+          .accent {
+            position: absolute;
+            top: 22%;
+            right: 14%;
+            width: ${w * 1.2}px;
+            height: ${h * 1.2}px;
+            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+            background: var(--c-orange-knvb);
+            opacity: 0.85;
+            z-index: 0;
+            pointer-events: none;
+          }
+        ` : ''}
+
+        .content {
+          position: relative;
+          z-index: 1;
+          padding: var(--space-9) var(--space-7);
+        }
+      </style>
+
+      <svg class="bg" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="cn-honeycomb-pattern" width="${patternW}" height="${patternH}" patternUnits="userSpaceOnUse">
+            <polygon points="${hexA}" fill="${hexColor}" stroke="${hexStroke}" stroke-width="1"/>
+            <polygon points="${hexB}" fill="${hexColor}" stroke="${hexStroke}" stroke-width="1"/>
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#cn-honeycomb-pattern)"/>
+      </svg>
+
+      ${accent ? '<div class="accent"></div>' : ''}
+
+      <div class="content"><slot></slot></div>
+    `;
+  }
+}
+
+if (!customElements.get('cn-honeycomb-bg')) {
+  customElements.define('cn-honeycomb-bg', CnHoneycombBg);
+}
+
+export { CnHoneycombBg };