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

package/dist/styles.css

@@ -224,6 +224,38 @@
   --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 */
+
+  /* List */
+  --dds-list-margin: 1.5rem 0;
+  --dds-list-item-margin-bottom: 1.5rem;
+  --dds-list-badge-size: calc(var(--dds-line-height-relaxed) * 1rem);
+  --dds-list-badge-font-size: 0.8125rem;
+  --dds-list-badge-text: #171a1c; /* gray-900 */
+  --dds-list-badge-bg: #eceef2;
+  --dds-list-badge-shadow: inset 0 0 0 1px #bfc2c7;
+  --dds-list-connector-line: #eceef2; /* gray-200 */
+  --dds-list-text: #374151; /* gray-700 */
 }
 /* ==========================================================================
    Dark Mode Tokens
@@ -365,6 +397,25 @@
   --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 */
+
+  /* List */
+  --dds-list-badge-text: #ffffff;
+  --dds-list-badge-bg: #232831;
+  --dds-list-badge-shadow: inset 0 0 0 1px #353a42;
+  --dds-list-connector-line: #353a42; /* gray-600 */
+  --dds-list-text: #e5e7eb; /* gray-200 */
 }
 /* Auto dark mode — follows OS preference, opt-out with .dds-light */
 @media (prefers-color-scheme: dark) {
@@ -501,6 +552,25 @@
     --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;
+
+    /* List */
+    --dds-list-badge-text: #ffffff;
+    --dds-list-badge-bg: #232831;
+    --dds-list-badge-shadow: inset 0 0 0 1px #353a42;
+    --dds-list-connector-line: #353a42; /* gray-600 */
+    --dds-list-text: #e5e7eb; /* gray-200 */
   }
 }
 /* Explicit dark mode via data attribute (overrides OS preference) */
@@ -626,6 +696,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 +1491,313 @@ a.no-text-decoration {
   margin-bottom: 0.25rem; /* mb-1 */
   vertical-align: middle;
 }
+.dds-list {
+  list-style: none;
+  counter-reset: list-counter;
+  padding-left: 0;
+  margin: var(--dds-list-margin, 1.5rem 0);
+  color: var(--dds-list-text);
+}
+.dds-list[data-ordered="false"] {
+  counter-reset: none;
+}
+.dds-list-item {
+  counter-increment: list-counter;
+  position: relative;
+  padding-inline-start: calc(var(--dds-list-badge-size) + 1rem);
+  margin-bottom: var(--dds-list-item-margin-bottom, 1.5rem);
+  min-height: var(--dds-list-badge-size);
+}
+.dds-list[data-ordered="false"] .dds-list-item {
+  counter-increment: none;
+}
+.dds-list-item::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--dds-list-badge-size, 2.5rem) + 0.5rem);
+  bottom: calc(-1 * var(--dds-list-item-margin-bottom, 1.5rem) + 0.5rem);
+  left: calc((var(--dds-list-badge-size, 2.5rem) - 1px) / 2);
+  width: 1px;
+  background-color: var(--dds-list-connector-line);
+}
+.dds-list-item:last-child::after {
+  display: none;
+}
+/* Ordered list badges */
+.dds-list[data-ordered="true"] .dds-list-item::before {
+  content: counter(list-counter);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: var(--dds-list-badge-size, 2.5rem);
+  height: var(--dds-list-badge-size, 2.5rem);
+  line-height: var(--dds-line-height-relaxed);
+  inset-inline-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--dds-font-bold, 700);
+  font-size: var(--dds-list-badge-font-size, 1.125rem);
+  color: var(--dds-list-badge-text);
+  background: var(--dds-list-badge-bg);
+  box-shadow: var(--dds-list-badge-shadow);
+  border-radius: 50%;
+}
+/* Unordered list bullets */
+.dds-list[data-ordered="false"] .dds-list-item::before {
+  content: var(--dds-list-bullet, "•");
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: var(--dds-list-badge-size, 2.5rem);
+  height: var(--dds-list-badge-size, 2.5rem);
+  inset-inline-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--dds-list-bullet-size, 1.5rem);
+  color: var(--dds-list-badge-text);
+}
+/* Hide ::before when using custom icon */
+.dds-list[data-has-icon="true"] .dds-list-item::before {
+  display: none;
+}
+/* Custom icon bullet */
+.dds-list-item-icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: var(--dds-list-badge-size, 2.5rem);
+  height: var(--dds-list-badge-size, 2.5rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dds-list-badge-text);
+}
+.dds-list-item-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+/* ==========================================================================
+   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.6.0",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {