@moonarc/core 0.1.0

package/src/components/Dock.astro

@@ -0,0 +1,193 @@
+---
+/**
+ * Dock — a row of icons that swell under the pointer, the neighbours with
+ * them, zero JS.
+ *
+ * Every item's size is one custom property; :has() sets it on the hovered
+ * (or keyboard-focused) item, on the two beside it and the two beyond, in
+ * three steps from the `magnify` prop, and the width and height transition
+ * on the preset curve — so the tiles push each other apart the way a real
+ * dock does rather than scaling over one another. The row is a fixed
+ * height and the growth goes up. Labels are tooltips above the item, no
+ * popover needed. Touch gets a plain row of links.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Item {
+  href: string;
+  label: string;
+  /** Inline SVG (or any HTML) for the tile; default: the label's first letter. */
+  icon?: string;
+  /** Marks the current page (aria-current + a dot). */
+  current?: boolean;
+}
+
+interface Props extends HTMLAttributes<'nav'> {
+  items: Item[];
+  /** Tile size in px. */
+  size?: number;
+  /** Growth of the hovered tile, as a multiple of size; the neighbours get 60 % and 25 % of the growth. */
+  magnify?: number;
+  /** Pin to the bottom centre of the viewport. */
+  fixed?: boolean;
+  /** Accessible name of the nav. */
+  label?: string;
+}
+
+const { items, size = 44, magnify = 1.6, fixed = false, label = 'Dock', class: className, style, ...rest } = Astro.props;
+const inline = [`--ma-dock-size:${size}px`, `--ma-dock-magnify:${magnify}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+const glyph = (l: string) => `<b>${l.trim().charAt(0).toUpperCase()}</b>`;
+---
+
+<nav class:list={['ma-dock', className]} data-fixed={fixed ? '' : undefined} aria-label={label} style={inline} {...rest}>
+  <ul class="ma-dock__list">
+    {
+      items.map((it) => (
+        <li class="ma-dock__item">
+          <a href={it.href} class="ma-dock__link" aria-label={it.label} aria-current={it.current ? 'page' : undefined}>
+            <span class="ma-dock__icon" aria-hidden="true" set:html={it.icon ?? glyph(it.label)} />
+            <span class="ma-dock__label" aria-hidden="true">{it.label}</span>
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<style is:global>
+  @layer components {
+    :where(.ma-dock) {
+      /* the magnification the rules read; reduced motion sets it to 1 */
+      --ma-dock-m: var(--ma-dock-magnify, 1.6);
+      display: inline-flex;
+      padding: 0.375rem;
+      border: 1px solid var(--ma-edge);
+      border-radius: 1.25rem;
+      background: var(--ma-panel);
+      backdrop-filter: blur(16px);
+      box-shadow: 0 16px 40px -20px rgb(0 0 0 / 0.45);
+    }
+    :where(.ma-dock[data-fixed]) {
+      position: fixed;
+      bottom: 1rem;
+      left: 50%;
+      z-index: 40;
+      translate: -50% 0;
+    }
+    :where(.ma-dock__list) {
+      display: flex;
+      align-items: flex-end;
+      gap: 0.375rem;
+      height: var(--ma-dock-size, 44px);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    /* every tile's size is one number; the hover rules below set it */
+    :where(.ma-dock__item) {
+      --ma-dock-k: 1;
+      position: relative;
+      flex: none;
+      width: calc(var(--ma-dock-size, 44px) * var(--ma-dock-k));
+      height: calc(var(--ma-dock-size, 44px) * var(--ma-dock-k));
+      transition:
+        width var(--ma-duration) var(--ma-ease),
+        height var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-dock__link) {
+      position: relative;
+      display: grid;
+      place-items: center;
+      width: 100%;
+      height: 100%;
+      border: 1px solid var(--ma-edge);
+      border-radius: 28%;
+      background: color-mix(in srgb, var(--ma-ink) 6%, transparent);
+      color: inherit;
+      text-decoration: none;
+      transition: background-color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-dock__link:hover) {
+      background: color-mix(in srgb, var(--ma-ink) 11%, transparent);
+    }
+    :where(.ma-dock__link:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+    :where(.ma-dock__link[aria-current='page'])::after {
+      content: '';
+      position: absolute;
+      bottom: -0.35rem;
+      left: 50%;
+      width: 4px;
+      height: 4px;
+      border-radius: 999px;
+      background: currentColor;
+      translate: -50% 0;
+    }
+    :where(.ma-dock__icon) {
+      display: grid;
+      place-items: center;
+      width: 56%;
+      height: 56%;
+      font-weight: 600;
+      font-size: calc(var(--ma-dock-size, 44px) * 0.38 * var(--ma-dock-k));
+      line-height: 1;
+    }
+    :where(.ma-dock__icon svg) {
+      width: 100%;
+      height: 100%;
+    }
+    /* the label: a tooltip above, arriving from a few px below on the hover travel */
+    :where(.ma-dock__label) {
+      position: absolute;
+      bottom: calc(100% + 0.5rem);
+      left: 50%;
+      padding: 0.3em 0.65em;
+      border-radius: 0.375rem;
+      background: var(--ma-ink);
+      color: var(--ma-panel);
+      font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 1.2;
+      white-space: nowrap;
+      opacity: 0;
+      translate: -50% var(--ma-travel-hover, 4px);
+      pointer-events: none;
+      transition:
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        translate var(--ma-duration) var(--ma-ease);
+    }
+    @media (hover: hover) {
+      /* the hovered tile, its two neighbours, and the two beyond — three sizes from one number */
+      :where(.ma-dock__item:is(:hover, :has(:focus-visible))) {
+        --ma-dock-k: var(--ma-dock-m);
+      }
+      :where(.ma-dock__item:has(+ .ma-dock__item:is(:hover, :has(:focus-visible)))),
+      :where(.ma-dock__item:is(:hover, :has(:focus-visible)) + .ma-dock__item) {
+        --ma-dock-k: calc(1 + (var(--ma-dock-m) - 1) * 0.6);
+      }
+      :where(.ma-dock__item:has(+ .ma-dock__item + .ma-dock__item:is(:hover, :has(:focus-visible)))),
+      :where(.ma-dock__item:is(:hover, :has(:focus-visible)) + .ma-dock__item + .ma-dock__item) {
+        --ma-dock-k: calc(1 + (var(--ma-dock-m) - 1) * 0.25);
+      }
+      :where(.ma-dock__item:is(:hover, :has(:focus-visible)) .ma-dock__label) {
+        opacity: 1;
+        translate: -50% 0;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-dock) {
+        --ma-dock-m: 1;
+      }
+      :where(.ma-dock__item),
+      :where(.ma-dock__label) {
+        transition: none;
+        translate: -50% 0;
+      }
+      :where(.ma-dock__item) {
+        translate: none;
+      }
+    }
+  }
+</style>

package/src/components/Dock.meta.ts

@@ -0,0 +1,35 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Dock',
+  slug: 'dock',
+  title: 'Dock',
+  description: 'A macOS-style dock: the tile under the pointer swells, its neighbours swell less, and the row pushes apart to make room. Zero JavaScript: :has() sets one size number on the hovered tile and the four around it, and the tiles transition their size on the preset curve. Keyboard focus magnifies the same way; touch gets a plain row of links.',
+  summary: 'A macOS-style dock: the hovered icon grows, its neighbours grow less, and the row makes room for them.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['hover'],
+  support: { baseline: 'widely', needs: ['has'], fallback: 'without :has() the tiles keep their size and the labels stay hidden' },
+  readout: '<Dock magnify={1.6}>',
+  usage: `<Dock\n  items={[\n    { href: '/', label: 'Home', icon: homeSvg, current: true },\n    { href: '/work/', label: 'Work', icon: workSvg },\n    { href: '/writing/', label: 'Writing', icon: penSvg },\n    { href: 'mailto:hi@example.com', label: 'Email', icon: mailSvg },\n  ]}\n  fixed\n/>`,
+  props: [
+    { name: 'items', type: '{ href: string; label: string; icon?: string; current?: boolean }[]', description: 'The tiles; icon is inline SVG (or any HTML), default the first letter of the label.' },
+    { name: 'size', type: 'number', default: '44', description: 'Tile size in px.' },
+    { name: 'magnify', type: 'number', default: '1.6', description: 'Growth of the hovered tile as a multiple of size; the neighbours get 60 % and 25 % of the growth.' },
+    { name: 'fixed', type: 'boolean', default: 'false', description: 'Pin to the bottom centre of the viewport.' },
+    { name: 'label', type: 'string', default: "'Dock'", description: 'Accessible name of the nav.' },
+  ],
+  reducedMotion: 'No magnification (the size number stays 1) and the labels appear without travel.',
+  clientRouter: 'CSS-only; nothing to rebind. Mark the current page with the item\'s current flag on each page.',
+  craft: [
+    'The dock magnifies by neighbourhood, not by pointer distance: the hovered tile, ±1 and ±2, in three steps. A cursor-distance curve needs a script; this reads as a dock at a glance and costs nothing.',
+    'Width and height transition, a deliberate layout change: the point of a dock is that the tiles push each other apart. It is five small elements on a hover, on the preset curve, well inside a frame.',
+    'The row has a fixed height and the tiles align to its bottom, so growth goes up and the dock\'s own box never jumps.',
+    'Labels are aria-hidden tooltips; the link\'s aria-label carries the name, so a screen reader hears "Work, link" without a hover.',
+    'Everything hover-related sits under @media (hover: hover): on a phone the dock is a row of links, which is what a phone wants.',
+  ],
+  related: ['pill-nav', 'magnetic', 'progressive-blur'],
+  intents: ['macos dock', 'dock navigation', 'magnifying icons on hover', 'dock menu astro', 'floating dock bottom of page', 'icon bar that grows under the cursor'],
+  replaces: ['Dock (Magic UI)', 'Dock (React Bits)', 'FloatingDock (Aceternity)', 'Dock (Motion Primitives)'],
+  fixture: { props: { items: [{ href: '/', label: 'Fixture content for Dock' }, { href: '/two/', label: 'Two' }, { href: '/three/', label: 'Three' }] }, expect: 'Fixture content for Dock' },
+} satisfies ComponentMeta;

package/src/components/DotPattern.astro

@@ -0,0 +1,58 @@
+---
+/**
+ * DotPattern — a field of dots behind content, faded at the edges, with an
+ * optional slow pulse. Zero JS: one radial gradient tiled, and a mask.
+ * Fills its positioned parent.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Distance between dots in px. */
+  size?: number;
+  /** Dot radius in px. */
+  radius?: number;
+  /** Dot colour. */
+  color?: string;
+  /** Fade toward the edges. */
+  fade?: boolean;
+  /** Pulse period in seconds; 0 keeps it still. */
+  pulse?: number;
+}
+
+const { size = 20, radius = 1, color = 'var(--ma-glow)', fade = true, pulse = 0, class: className, style, ...rest } = Astro.props;
+const vars = [`--ma-dp-size:${size}px`, `--ma-dp-r:${radius}px`, `--ma-dp-color:${color}`, `--ma-dp-pulse:${pulse}s`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-dot-pattern', className]} aria-hidden="true" data-fade={fade ? '' : undefined} data-pulse={pulse > 0 ? '' : undefined} style={vars} {...rest}></div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-dot-pattern) {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background-image: radial-gradient(circle, var(--ma-dp-color, var(--ma-glow)) var(--ma-dp-r, 1px), transparent calc(var(--ma-dp-r, 1px) + 0.5px));
+      background-size: var(--ma-dp-size, 20px) var(--ma-dp-size, 20px);
+    }
+    :where(.ma-dot-pattern[data-fade]) {
+      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
+    }
+    :where(.ma-dot-pattern[data-pulse]) {
+      animation: ma-dot-pattern var(--ma-dp-pulse, 4s) var(--ma-ease-in-out) infinite alternate;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-dot-pattern) {
+        animation: none;
+      }
+    }
+  }
+
+  @keyframes ma-dot-pattern {
+    from {
+      opacity: 0.5;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+</style>

package/src/components/DotPattern.meta.ts

@@ -0,0 +1,32 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'DotPattern',
+  slug: 'dot-pattern',
+  title: 'Dot Pattern',
+  description: 'A field of dots behind content, faded toward the edges, with an optional slow pulse. One tiled radial gradient and a mask; pure CSS. Fills its positioned parent.',
+  summary: 'A dot pattern background that fades toward the edges, with an optional slow pulse.',
+  category: 'background',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: ['mask-image'] },
+  readout: '<DotPattern size={20}>',
+  usage: `<section class="relative">\n  <DotPattern pulse={5} />\n  <h2 class="relative">Above the dots</h2>\n</section>`,
+  props: [
+    { name: 'size', type: 'number', default: '20', description: 'Distance between dots in px.' },
+    { name: 'radius', type: 'number', default: '1', description: 'Dot radius in px.' },
+    { name: 'color', type: 'string', default: 'var(--ma-glow)', description: 'Dot colour; the token is theme-aware.' },
+    { name: 'fade', type: 'boolean', default: 'true', description: 'Radial mask toward the edges.' },
+    { name: 'pulse', type: 'number', default: '0', description: 'Seconds per pulse (opacity 0.5 ↔ 1); 0 keeps it still.' },
+  ],
+  reducedMotion: 'No pulse.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'The pulse is opacity on the whole layer (compositor only); the gradient itself never changes.',
+    'Dot edge is radius + 0.5 px so it stays crisp at any device pixel ratio.',
+  ],
+  related: ['grid-pattern', 'noise', 'cursor-grid'],
+  intents: ['dot pattern background', 'dotted background', 'dot grid', 'polka dot background css'],
+  replaces: ['DotPattern (Magic UI)', 'DotBackground (Aceternity)'],
+  fixture: { expect: 'class="ma-dot-pattern"' },
+} satisfies ComponentMeta;

package/src/components/DottedMap.astro

@@ -0,0 +1,153 @@
+---
+/**
+ * DottedMap — the world as a grid of dots, with markers that pulse. The
+ * land comes from a 1° bitmask (Natural Earth 110m, built once into
+ * lib/land.ts) and is drawn on the server as one <path>: every run of land
+ * cells in a row is a horizontal segment, and a dash pattern of zero-length
+ * dashes with round caps turns the segment into dots on the grid — so a
+ * 2° map is a few hundred segments, not five thousand circles. Markers are
+ * a dot and a ring scaling out on a delay from the stagger token; each
+ * carries a <title> and the labels are listed for readers. Zero script.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import { LAND, LAND_H, LAND_W } from '../lib/land';
+import { decode, maskAt, toMap, type Marker } from '../lib/geo';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Cities to mark: latitude, longitude and an optional label. */
+  markers?: Marker[];
+  /** Grid spacing: low 3°, medium 2°, high 1.5°. */
+  density?: 'low' | 'medium' | 'high';
+  /** Dot colour. */
+  color?: string;
+  /** Marker colour. */
+  accent?: string;
+  /** Pulse the markers. */
+  ping?: boolean;
+  /** Seconds per pulse. */
+  duration?: number;
+  /** Include Antarctica. */
+  antarctica?: boolean;
+  /** Accessible name; the marker labels are appended. */
+  label?: string;
+}
+
+const { markers = [], density = 'medium', color = 'color-mix(in srgb, var(--ma-ink) 32%, transparent)', accent = 'currentColor', ping = true, duration = 2.4, antarctica = false, label = 'World map', class: className, style, ...rest } = Astro.props;
+const step = density === 'low' ? 3 : density === 'high' ? 1.5 : 2;
+const mask = decode(LAND, LAND_W, LAND_H);
+const south = antarctica ? -90 : -58;
+const north = 84;
+// the drawing is 200 × 100 (2:1, equirectangular); one path, one `M x y h len` per run of land cells in a row
+const W = 200;
+const segs: string[] = [];
+let dots = 0;
+for (let lat = north - step / 2; lat > south; lat -= step) {
+  let run = 0;
+  let x0 = 0;
+  const y = Math.round(((90 - lat) / 180) * 100 * 100) / 100;
+  const cols = Math.round(360 / step);
+  for (let i = 0; i <= cols; i++) {
+    const lng = -180 + (i + 0.5) * step;
+    const land = i < cols && maskAt(mask, lat, lng);
+    if (land) {
+      if (run === 0) x0 = Math.round(((lng + 180) / 360) * W * 100) / 100;
+      run++;
+      dots++;
+    } else if (run) {
+      segs.push(`M${x0} ${y}h${Math.round((run - 1) * step * (W / 360) * 100) / 100}`);
+      run = 0;
+    }
+  }
+}
+const d = segs.join('');
+const pins = markers.map((m, i) => {
+  const [x, y] = toMap(m.lat, m.lng);
+  return { ...m, i, x: Math.round(x * W) / 100, y: Math.round(y * 100) / 100 };
+});
+const viewTop = ((90 - north) / 180) * 100;
+const viewH = ((north - south) / 180) * 100;
+const name = pins.length ? `${label}: ${pins.map((p) => p.label ?? `${p.lat}, ${p.lng}`).join(', ')}` : label;
+const inline = [`--ma-map-step:${(step * W) / 360}`, `--ma-map-color:${color}`, `--ma-map-accent:${accent}`, `--ma-map-dur:${duration}s`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-map', className]} data-ma-map data-dots={dots} data-path-bytes={d.length} style={inline} {...rest}>
+  <svg class="ma-map__svg" viewBox={`0 ${viewTop} ${W} ${viewH}`} preserveAspectRatio="xMidYMid meet" role="img" aria-label={name}>
+    <path class="ma-map__land" d={d} />
+    {pins.map((p) => (
+      <g class="ma-map__pin" transform={`translate(${p.x} ${p.y})`} style={`--ma-map-i:${p.i}`}>
+        {p.label && <title>{p.label}</title>}
+        {ping && <circle class="ma-map__ring" r="1" />}
+        <circle class="ma-map__dot" r="0.9" />
+      </g>
+    ))}
+  </svg>
+  {pins.some((p) => p.label) && (
+    <ul class="ma-map__list">
+      {pins.map((p) => p.label && <li>{p.label}</li>)}
+    </ul>
+  )}
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-map) {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      pointer-events: none;
+    }
+    :where(.ma-map__svg) {
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+    /* dots on the grid: zero-length dashes, one per step, round caps — the dot radius is 0.42 of the step, in map units */
+    :where(.ma-map__land) {
+      fill: none;
+      stroke: var(--ma-map-color);
+      stroke-width: calc(var(--ma-map-step, 1.11) * 0.84);
+      stroke-linecap: round;
+      stroke-dasharray: 0 var(--ma-map-step, 1.11);
+    }
+    :where(.ma-map__dot) {
+      fill: var(--ma-map-accent, currentColor);
+    }
+    :where(.ma-map__ring) {
+      fill: none;
+      stroke: var(--ma-map-accent, currentColor);
+      stroke-width: 0.35;
+      transform-box: fill-box;
+      transform-origin: center;
+      opacity: 0;
+      animation: ma-map-ping var(--ma-map-dur) var(--ma-ease-out) infinite;
+      animation-delay: calc(var(--ma-map-i, 0) * var(--ma-stagger-relaxed) * 3);
+    }
+    :where(.ma-map__list) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-map__ring) {
+        animation: none;
+        opacity: 0.5;
+        scale: 2;
+      }
+    }
+  }
+
+  @keyframes ma-map-ping {
+    0% {
+      opacity: 0.9;
+      scale: 1;
+    }
+    100% {
+      opacity: 0;
+      scale: 4;
+    }
+  }
+</style>

package/src/components/DottedMap.meta.ts

@@ -0,0 +1,38 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'DottedMap',
+  slug: 'dotted-map',
+  title: 'Dotted Map',
+  description: 'A world map drawn as a grid of dots, with markers that pulse. The land is a 1° bitmask from Natural Earth, drawn on the server as one <path>: each run of land cells in a row is a segment, and a dash pattern of zero-length dashes with round caps turns it into dots: a few hundred segments, not five thousand circles. Markers ping on a delay from the stagger token and carry a title. Zero JS.',
+  summary: 'A world map drawn in dots with pulsing location markers, rendered on the server as one SVG path.',
+  category: 'background',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<DottedMap markers={[…]} density="medium">',
+  usage: `<div class="relative aspect-[2/1]">\n  <DottedMap\n    markers={[\n      { lat: 40.7, lng: -74, label: 'New York' },\n      { lat: 51.5, lng: -0.1, label: 'London' },\n      { lat: 1.3, lng: 103.8, label: 'Singapore' },\n    ]}\n    accent="var(--action)"\n  />\n</div>`,
+  props: [
+    { name: 'markers', type: '{ lat, lng, label? }[]', default: '[]', description: 'Cities to mark; a label becomes a <title> and a line in the hidden list.' },
+    { name: 'density', type: "'low' | 'medium' | 'high'", default: "'medium'", description: 'Grid spacing: 3°, 2° or 1.5°. Denser is more HTML; the path size is on the card.' },
+    { name: 'color', type: 'string', default: 'ink at 32 %', description: 'Dot colour.' },
+    { name: 'accent', type: 'string', default: "'currentColor'", description: 'Marker colour.' },
+    { name: 'ping', type: 'boolean', default: 'true', description: 'Pulse the markers.' },
+    { name: 'duration', type: 'number', default: '2.4', description: 'Seconds per pulse.' },
+    { name: 'antarctica', type: 'boolean', default: 'false', description: 'Include Antarctica (the map is cut at 58° S otherwise).' },
+    { name: 'label', type: 'string', default: "'World map'", description: 'Accessible name; marker labels are appended.' },
+  ],
+  reducedMotion: 'The rings stand still around the markers at half strength.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'One path, dashed into dots: `M x y h len` per run of land with stroke-dasharray 0 step and round caps puts a dot on every grid point. The path is a few kilobytes where circles would be tens.',
+    'The land data is built once from Natural Earth 110m (public domain) into a 1° bitmask; the map reads it on the server and ships no data to the client.',
+    'The dot radius is 0.42 of the grid step in map units, so density changes both spacing and size together and the map never looks sparse or clogged.',
+    'Markers pulse with scale and opacity on the exit curve, each delayed by its index times the relaxed stagger, so five cities read as a sequence.',
+    'role="img" with the cities in the name, a <title> per marker and a visually hidden list: the map is decorative, the markers are content.',
+  ],
+  related: ['globe', 'dot-pattern', 'ripple'],
+  intents: ['dotted world map', 'world map with markers', 'dot map svg', 'map with pulsing locations', 'regions map astro'],
+  replaces: ['DottedMap (Magic UI)', 'WorldMap (Aceternity)', 'dotted-map (npm)'],
+  fixture: { props: { markers: [{ lat: 40.7, lng: -74, label: 'New York' }] }, expect: 'class="ma-map"' },
+} satisfies ComponentMeta;