@roadlittledawn/docs-design-system-react 0.4.0 → 0.5.0

package/dist/components/Popover.stories.js

@@ -0,0 +1,183 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "./Popover";
+var meta = {
+    title: "Components/Popover",
+    component: Popover,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "\nA hover/tap-activated popover for enriching inline content in documentation.\nBuilt on the native [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) for reliable top-layer rendering \u2014 no z-index wars, no overflow clipping.\n\nCommon use cases include glossary term definitions and Wikipedia-style content previews.\n\n## Content modes\n\nThe `Popover` supports three mutually exclusive content modes, checked in this order:\n\n1. **`content`** \u2014 arbitrary `ReactNode`; you control everything\n2. **`glossary`** \u2014 structured `{ term, title, definition }` template\n3. **`preview`** \u2014 structured `{ title, excerpt, imageUrl, href }` template\n\n## When to Use\n\n- Inline term definitions that would interrupt reading flow if expanded in-place\n- Link previews that let users get context without navigating away\n- Any contextual content that benefits from being on-demand rather than always visible\n\n## When Not to Use\n\n- For critical information users must read \u2014 use a `Callout` instead\n- As a primary navigation mechanism\n- For content that needs persistent visibility\n\n## Mobile behavior\n\nOn screens \u2264 640 px the popover renders as a bottom sheet instead of a floating panel.\nHover events don't apply; the popover toggles on tap.\n\n## Accessibility\n\n- Trigger has `tabIndex={0}` and shows the popover on focus (keyboard accessible)\n- Popover panel has `role=\"tooltip\"` and is linked via `aria-describedby`\n- The native Popover API handles Escape-key dismissal automatically\n- Light-dismiss (click outside) is provided by `popover=\"auto\"`\n        ",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * The glossary template renders a structured definition popover.
+ * The `definition` field accepts `ReactNode` — pre-render any markdown
+ * using your preferred renderer before passing it in.
+ */
+export var GlossaryDefinition = {
+    args: {
+        glossary: {
+            term: "observability",
+            title: "Observability",
+            definition: (_jsxs(_Fragment, { children: ["The ability to understand the internal state of a system by examining its external outputs \u2014 primarily", " ", _jsx("a", { href: "https://example.com/metrics", children: "metrics" }), ", logs, and traces."] })),
+        },
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover\n  glossary={{\n    term: \"observability\",\n    title: \"Observability\",\n    definition: (\n      <>\n        The ability to understand the internal state of a system by examining\n        its external outputs \u2014 primarily{\" \"}\n        <a href=\"https://example.com/metrics\">metrics</a>, logs, and traces.\n      </>\n    ),\n  }}\n>\n  observability\n</Popover>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", color: "var(--dds-tabs-panel-text)" }, children: ["Modern software reliability depends on", " ", _jsx(Popover, __assign({}, args, { children: "observability" })), " to diagnose production issues quickly."] })); },
+};
+/**
+ * The preview template renders a Wikipedia-style content preview with an
+ * optional featured image, excerpt, and "Read more" link.
+ */
+export var ContentPreview = {
+    args: {
+        preview: {
+            title: "New Relic",
+            excerpt: "New Relic is an observability platform that helps engineers plan, build, deploy, and run software. Over 17,000 customers use New Relic to improve uptime, performance, and operational efficiency.",
+            imageUrl: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=640&q=80",
+            href: "https://newrelic.com",
+            linkText: "Read more",
+        },
+        size: "lg",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover\n  size=\"lg\"\n  preview={{\n    title: \"New Relic\",\n    excerpt: \"New Relic is an observability platform that helps engineers plan, build, deploy, and run software.\",\n    imageUrl: \"/images/newrelic.jpg\",\n    href: \"https://newrelic.com\",\n    linkText: \"Read more\",\n  }}\n>\n  New Relic\n</Popover>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", color: "var(--dds-tabs-panel-text)" }, children: ["The monitoring data is sent to ", _jsx(Popover, __assign({}, args, { children: "New Relic" })), " ", "where you can build dashboards and alerts."] })); },
+};
+/**
+ * Pass any React element as the `content` prop when the built-in templates
+ * don't fit your use case.
+ */
+export var CustomContent = {
+    args: {
+        content: (_jsxs("div", { style: { padding: "1rem" }, children: [_jsx("strong", { style: { display: "block", marginBottom: "0.5rem" }, children: "API Rate Limits" }), _jsxs("table", { style: { fontSize: "0.8125rem", borderCollapse: "collapse", width: "100%" }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: "left", paddingBottom: "0.25rem", borderBottom: "1px solid #e5e7eb" }, children: "Plan" }), _jsx("th", { style: { textAlign: "right", paddingBottom: "0.25rem", borderBottom: "1px solid #e5e7eb" }, children: "Req/min" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "Free" }), _jsx("td", { style: { textAlign: "right" }, children: "60" })] }), _jsxs("tr", { children: [_jsx("td", { children: "Pro" }), _jsx("td", { style: { textAlign: "right" }, children: "1,000" })] }), _jsxs("tr", { children: [_jsx("td", { children: "Enterprise" }), _jsx("td", { style: { textAlign: "right" }, children: "Unlimited" })] })] })] })] })),
+        size: "md",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover\n  content={\n    <div style={{ padding: \"1rem\" }}>\n      <strong>API Rate Limits</strong>\n      {/* custom table or any JSX */}\n    </div>\n  }\n>\n  rate limits\n</Popover>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", color: "var(--dds-tabs-panel-text)" }, children: ["Each API key is subject to ", _jsx(Popover, __assign({}, args, { children: "rate limits" })), " based on your subscription plan."] })); },
+};
+/**
+ * Size variants — sm (240px), md (320px), lg (480px).
+ */
+export var Sizes = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover size=\"sm\" glossary={{ term: \"sm\", title: \"Small (240px)\", definition: \"A compact popover for brief definitions.\" }}>\n  small\n</Popover>\n\n<Popover size=\"md\" glossary={{ term: \"md\", title: \"Medium (320px)\", definition: \"The default size, suitable for most glossary and preview use cases.\" }}>\n  medium\n</Popover>\n\n<Popover size=\"lg\" glossary={{ term: \"lg\", title: \"Large (480px)\", definition: \"A wider panel for rich content previews with images or tables.\" }}>\n  large\n</Popover>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("div", { style: {
+            fontFamily: "sans-serif",
+            fontSize: "1rem",
+            display: "flex",
+            gap: "2rem",
+            alignItems: "center",
+            color: "var(--dds-tabs-panel-text)",
+        }, children: [_jsx(Popover, { size: "sm", glossary: {
+                    term: "sm",
+                    title: "Small (240px)",
+                    definition: "A compact popover for brief definitions.",
+                }, children: "small" }), _jsx(Popover, { size: "md", glossary: {
+                    term: "md",
+                    title: "Medium (320px)",
+                    definition: "The default size, suitable for most glossary and preview use cases.",
+                }, children: "medium" }), _jsx(Popover, { size: "lg", glossary: {
+                    term: "lg",
+                    title: "Large (480px)",
+                    definition: "A wider panel for rich content previews with images or tables.",
+                }, children: "large" })] })); },
+};
+/**
+ * Placement variants control which side of the trigger the popover appears on.
+ * "auto" (default) detects available viewport space.
+ */
+export var Placement = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover placement=\"top\" glossary={...}>shows above</Popover>\n<Popover placement=\"bottom\" glossary={...}>shows below</Popover>\n<Popover placement=\"top-start\" glossary={...}>top-start</Popover>\n<Popover placement=\"bottom-end\" glossary={...}>bottom-end</Popover>",
+            },
+        },
+    },
+    render: function () { return (_jsx("div", { style: {
+            fontFamily: "sans-serif",
+            fontSize: "1rem",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "2rem",
+            justifyContent: "center",
+            padding: "6rem 2rem",
+            color: "var(--dds-tabs-panel-text)",
+        }, children: [
+            "top",
+            "top-start",
+            "top-end",
+            "bottom",
+            "bottom-start",
+            "bottom-end",
+        ].map(function (p) { return (_jsx(Popover, { placement: p, glossary: {
+                term: p,
+                title: "placement=\"".concat(p, "\""),
+                definition: "The popover opens ".concat(p.replace("-", " "), " relative to its trigger."),
+            }, children: p }, p)); }) })); },
+};
+/**
+ * Multiple popovers in a paragraph — only one can be open at a time
+ * (native Popover API `popover="auto"` behaviour).
+ */
+export var InlineParagraph = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<p>\n  <Popover glossary={{ term: \"apm\", title: \"APM\", definition: \"Application Performance Monitoring...\" }}>APM</Popover>\n  {\" \"}data flows into{\" \"}\n  <Popover preview={{ title: \"New Relic\", excerpt: \"...\", href: \"https://newrelic.com\" }}>New Relic</Popover>\n  {\" \"}where you can configure{\" \"}\n  <Popover glossary={{ term: \"alert\", title: \"Alert\", definition: \"A notification triggered when a signal crosses a threshold.\" }}>alerts</Popover>.\n</p>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", maxWidth: "480px", lineHeight: 1.7, color: "var(--dds-tabs-panel-text)", margin: 0 }, children: [_jsx(Popover, { glossary: {
+                    term: "apm",
+                    title: "APM",
+                    definition: "Application Performance Monitoring — tracks the performance of software applications and their underlying infrastructure.",
+                }, children: "APM" }), " ", "data flows into", " ", _jsx(Popover, { preview: {
+                    title: "New Relic",
+                    excerpt: "New Relic is an observability platform used by over 17,000 customers.",
+                    href: "https://newrelic.com",
+                }, children: "New Relic" }), " ", "where you can configure", " ", _jsx(Popover, { glossary: {
+                    term: "alert",
+                    title: "Alert",
+                    definition: "A notification triggered when a metric or signal crosses a defined threshold.",
+                }, children: "alerts" }), " ", "to notify your on-call team."] })); },
+};

package/dist/components/Typography.stories.js

@@ -24,6 +24,13 @@ export var H1 = {
         variant: 'h1',
         children: 'Heading 1 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h1\">Heading 1 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * H2 heading style.
@@ -33,6 +40,13 @@ export var H2 = {
         variant: 'h2',
         children: 'Heading 2 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h2\">Heading 2 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * H3 heading style.
@@ -42,6 +56,13 @@ export var H3 = {
         variant: 'h3',
         children: 'Heading 3 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h3\">Heading 3 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * H4 heading style.
@@ -51,6 +72,13 @@ export var H4 = {
         variant: 'h4',
         children: 'Heading 4 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h4\">Heading 4 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * Paragraph style (default).
@@ -60,6 +88,13 @@ export var Paragraph = {
         variant: 'p',
         children: 'This is a paragraph with the default typography style. It provides readable text for body content.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"p\">\n  This is a paragraph with the default typography style. It provides readable text for body content.\n</Typography>",
+            },
+        },
+    },
 };
 /**
  * Caption style for small text.
@@ -69,10 +104,24 @@ export var Caption = {
         variant: 'caption',
         children: 'This is caption text, typically used for figure captions or footnotes.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"caption\">\n  This is caption text, typically used for figure captions or footnotes.\n</Typography>",
+            },
+        },
+    },
 };
 /**
  * All typography variants displayed together.
  */
 export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Typography variant=\"h1\">Heading 1 Style</Typography>\n  <Typography variant=\"h2\">Heading 2 Style</Typography>\n  <Typography variant=\"h3\">Heading 3 Style</Typography>\n  <Typography variant=\"h4\">Heading 4 Style</Typography>\n  <Typography variant=\"p\">\n    This is paragraph text. It's the default variant and is suitable for\n    body content and general text throughout your documentation.\n  </Typography>\n  <Typography variant=\"caption\">\n    This is caption text, used for smaller annotations or supplementary information.\n  </Typography>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Typography, { variant: "h1", children: "Heading 1 Style" }), _jsx(Typography, { variant: "h2", children: "Heading 2 Style" }), _jsx(Typography, { variant: "h3", children: "Heading 3 Style" }), _jsx(Typography, { variant: "h4", children: "Heading 4 Style" }), _jsx(Typography, { variant: "p", children: "This is paragraph text. It's the default variant and is suitable for body content and general text throughout your documentation." }), _jsx(Typography, { variant: "caption", children: "This is caption text, used for smaller annotations or supplementary information." })] })); },
 };

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/Collapser';
 export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
 export * from './components/Tabs';
+export * from './components/Popover';
 export * from './components/Typography';
 export * from './components/Heading';
 export * from './components/Link';

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './components/Collapser';
 export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
 export * from './components/Tabs';
+export * from './components/Popover';
 export * from './components/Typography';
 export * from './components/Heading';
 export * from './components/Link';

package/dist/styles.css

@@ -224,6 +224,27 @@
   --dds-tabs-tab-border-active: #3b82f6; /* blue-500 */
   --dds-tabs-panel-padding: 1.25rem 0;
   --dds-tabs-panel-text: #111827; /* gray-900 */
+
+  /* Popover */
+  --dds-popover-bg: #ffffff;
+  --dds-popover-border: #e5e7eb; /* gray-200 */
+  --dds-popover-radius: 0.5rem; /* rounded-lg */
+  --dds-popover-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --dds-popover-text: #374151; /* gray-700 */
+  --dds-popover-title-color: #111827; /* gray-900 */
+  --dds-popover-eyebrow-color: #6b7280; /* gray-500 */
+  --dds-popover-link-color: #2563eb; /* blue-600 */
+  --dds-popover-link-color-hover: #1e40af; /* blue-800 */
+  --dds-popover-width-sm: 240px;
+  --dds-popover-width-md: 320px;
+  --dds-popover-width-lg: 480px;
+  --dds-popover-padding: 1rem;
+  --dds-popover-image-height: 120px;
+  --dds-popover-title-size: 0.9375rem; /* ~15px */
+  --dds-popover-text-size: 0.875rem; /* text-sm */
+  --dds-popover-eyebrow-size: 0.6875rem; /* ~11px */
 }
 /* ==========================================================================
    Dark Mode Tokens
@@ -365,6 +386,18 @@
   --dds-prism-keyword: #60a5fa; /* blue-400 */
   --dds-prism-function: #a78bfa; /* violet-400 */
   --dds-prism-regex: #fb923c; /* orange-400 */
+
+  /* Popover */
+  --dds-popover-bg: #1f2937; /* gray-800 */
+  --dds-popover-border: #4b5563; /* gray-600 */
+  --dds-popover-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --dds-popover-text: #e5e7eb; /* gray-200 */
+  --dds-popover-title-color: #f9fafb; /* gray-50 */
+  --dds-popover-eyebrow-color: #9ca3af; /* gray-400 */
+  --dds-popover-link-color: #60a5fa; /* blue-400 */
+  --dds-popover-link-color-hover: #93c5fd; /* blue-300 */
 }
 /* Auto dark mode — follows OS preference, opt-out with .dds-light */
 @media (prefers-color-scheme: dark) {
@@ -501,6 +534,18 @@
     --dds-prism-keyword: #60a5fa;
     --dds-prism-function: #a78bfa;
     --dds-prism-regex: #fb923c;
+
+    /* Popover */
+    --dds-popover-bg: #1f2937;
+    --dds-popover-border: #4b5563;
+    --dds-popover-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+      0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    --dds-popover-text: #e5e7eb;
+    --dds-popover-title-color: #f9fafb;
+    --dds-popover-eyebrow-color: #9ca3af;
+    --dds-popover-link-color: #60a5fa;
+    --dds-popover-link-color-hover: #93c5fd;
   }
 }
 /* Explicit dark mode via data attribute (overrides OS preference) */
@@ -626,6 +671,18 @@
   --dds-prism-keyword: #60a5fa;
   --dds-prism-function: #a78bfa;
   --dds-prism-regex: #fb923c;
+
+  /* Popover */
+  --dds-popover-bg: #1f2937;
+  --dds-popover-border: #4b5563;
+  --dds-popover-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --dds-popover-text: #e5e7eb;
+  --dds-popover-title-color: #f9fafb;
+  --dds-popover-eyebrow-color: #9ca3af;
+  --dds-popover-link-color: #60a5fa;
+  --dds-popover-link-color-hover: #93c5fd;
 }
 /* Import PrismJS theme */
 /**
@@ -1409,4 +1466,226 @@ a.no-text-decoration {
   margin-bottom: 0.25rem; /* mb-1 */
   vertical-align: middle;
 }
+/* ==========================================================================
+   Popover Component
+   Uses the native Popover API for top-layer rendering.
+   Positioning is handled via inline styles set by JS (getBoundingClientRect).
+   ========================================================================== */
+/* Trigger */
+.dds-popover-trigger {
+  display: inline;
+  cursor: default;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: currentColor;
+  text-underline-offset: 3px;
+  border-radius: 2px;
+  outline-offset: 2px;
+}
+.dds-popover-trigger:focus-visible {
+  outline: 2px solid var(--dds-link-color);
+}
+/* ==========================================================================
+   Popover panel — rendered in the top layer via Popover API
+   ========================================================================== */
+.dds-popover {
+  /* Reset browser popover defaults */
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: visible;
+  inset: unset; /* we set top/left via JS */
+
+  /* Layout */
+  position: fixed;
+  width: var(--dds-popover-width-md);
+  max-width: calc(100vw - 16px);
+
+  /* Appearance */
+  background: var(--dds-popover-bg);
+  border: 1px solid var(--dds-popover-border);
+  border-radius: var(--dds-popover-radius);
+  box-shadow: var(--dds-popover-shadow);
+  color: var(--dds-popover-text);
+  font-size: var(--dds-popover-text-size);
+  line-height: var(--dds-line-height-relaxed);
+
+  /* Hidden by default (Popover API manages this, but we set it for fallback) */
+  display: none;
+}
+/* Popover API open state */
+.dds-popover:popover-open {
+  display: block;
+}
+/* ==========================================================================
+   Entry / exit animations
+   ========================================================================== */
+@keyframes dds-popover-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes dds-popover-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.dds-popover:popover-open {
+  animation: dds-popover-in-bottom 150ms ease forwards;
+}
+.dds-popover:popover-open[data-placement="top"] {
+  animation: dds-popover-in-top 150ms ease forwards;
+}
+/* @starting-style enables the entry animation when the element first enters the top layer */
+@starting-style {
+  .dds-popover:popover-open {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  .dds-popover:popover-open[data-placement="top"] {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+.dds-popover-sm {
+  width: var(--dds-popover-width-sm);
+}
+.dds-popover-md {
+  width: var(--dds-popover-width-md);
+}
+.dds-popover-lg {
+  width: var(--dds-popover-width-lg);
+}
+/* ==========================================================================
+   Shared inner elements
+   ========================================================================== */
+.dds-popover-eyebrow {
+  display: block;
+  font-size: var(--dds-popover-eyebrow-size);
+  font-weight: var(--dds-font-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dds-popover-eyebrow-color);
+  margin-bottom: 0.25rem;
+}
+.dds-popover-title {
+  margin: 0 0 0.5rem;
+  font-size: var(--dds-popover-title-size);
+  font-weight: var(--dds-font-semibold);
+  color: var(--dds-popover-title-color);
+  line-height: var(--dds-line-height-tight);
+}
+.dds-popover-title dfn {
+  font-style: normal;
+}
+.dds-popover-body {
+  color: var(--dds-popover-text);
+  font-size: var(--dds-popover-text-size);
+  line-height: var(--dds-line-height-relaxed);
+}
+.dds-popover-body p {
+  margin: 0;
+}
+.dds-popover-body a {
+  color: var(--dds-popover-link-color);
+}
+.dds-popover-body a:hover {
+  color: var(--dds-popover-link-color-hover);
+}
+/* ==========================================================================
+   Glossary template
+   ========================================================================== */
+.dds-popover-glossary {
+  padding: var(--dds-popover-padding);
+}
+/* ==========================================================================
+   Preview template
+   ========================================================================== */
+.dds-popover-preview {
+  /* no padding at top — image goes edge-to-edge */
+}
+.dds-popover-preview-image-wrap {
+  width: 100%;
+  height: var(--dds-popover-image-height);
+  overflow: hidden;
+  border-radius: var(--dds-popover-radius) var(--dds-popover-radius) 0 0;
+  background: var(--dds-popover-border);
+}
+.dds-popover-preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.dds-popover-preview-body {
+  padding: var(--dds-popover-padding);
+}
+.dds-popover-preview-link {
+  display: inline-block;
+  margin-top: 0.5rem;
+  font-size: var(--dds-popover-text-size);
+  font-weight: var(--dds-font-medium);
+  color: var(--dds-popover-link-color);
+  text-decoration: none;
+}
+.dds-popover-preview-link:hover {
+  color: var(--dds-popover-link-color-hover);
+  text-decoration: underline;
+}
+/* ==========================================================================
+   Mobile — bottom sheet on small screens
+   At ≤ 640px the popover slides up from the bottom of the viewport
+   regardless of JS-computed position.
+   ========================================================================== */
+@media (max-width: 640px) {
+  .dds-popover:popover-open {
+    /* Override JS-set position — anchor to bottom of viewport */
+    top: auto !important;
+    left: 0 !important;
+    bottom: 0;
+    width: 100% !important;
+    max-width: 100%;
+    border-radius: var(--dds-popover-radius) var(--dds-popover-radius) 0 0;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    animation: dds-popover-sheet-in 200ms ease forwards;
+  }
+
+  .dds-popover-preview-image-wrap {
+    border-radius: var(--dds-popover-radius) var(--dds-popover-radius) 0 0;
+  }
+}
+@keyframes dds-popover-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@starting-style {
+  @media (max-width: 640px) {
+    .dds-popover:popover-open {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {