@roadlittledawn/docs-design-system-react 0.8.0 → 0.10.0

package/dist/styles.css

@@ -259,12 +259,45 @@
   --dds-list-connector-line: #eceef2; /* gray-200 */
   --dds-list-text: #374151; /* gray-700 */
 
+  /* Table */
+  --dds-table-margin: 1rem 0;
+  --dds-table-radius: 0.5rem; /* rounded-lg */
+  --dds-table-font-size: 0.875rem; /* text-sm */
+  --dds-table-bg: transparent;
+  --dds-table-text: #374151; /* gray-700 */
+  --dds-table-border: #e5e7eb; /* gray-200 */
+  --dds-table-row-border: #e5e7eb; /* gray-200 */
+  --dds-table-row-hover-bg: #f9fafb; /* gray-50 */
+  --dds-table-header-bg: #f3f4f6; /* gray-100 */
+  --dds-table-sticky-bg: var(--dds-table-header-bg); /* used as sticky header background; should be opaque */
+  --dds-table-sticky-hover-bg: var(--dds-table-header-hover-bg); /* used as sticky sortable header hover; should be opaque */
+  --dds-table-header-text: #111827; /* gray-900 */
+  --dds-table-header-font-size: 0.8125rem; /* ~13px */
+  --dds-table-header-border: #d1d5db; /* gray-300 */
+  --dds-table-header-hover-bg: #e5e7eb; /* gray-200 */
+  --dds-table-header-hover-text: #111827; /* gray-900 */
+  --dds-table-header-active-text: #1d4ed8; /* blue-700 */
+  --dds-table-cell-padding: 0.75rem 1rem;
+  --dds-table-focus-ring: #3b82f6; /* blue-500 */
+
   /* Grid */
   --dds-grid-gap-sm: 1rem; /* gap-4 */
   --dds-grid-gap-md: 1.5rem; /* gap-6 */
   --dds-grid-gap-lg: 2.5rem; /* gap-10 */
   --dds-grid-divider-color: #e5e7eb; /* gray-200 */
   --dds-grid-sticky-top: 1rem;
+
+  /* Breadcrumb */
+  --dds-breadcrumb-font-size-sm: 0.75rem; /* text-xs */
+  --dds-breadcrumb-font-size-md: 0.875rem; /* text-sm */
+  --dds-breadcrumb-gap: 0.375rem;
+  --dds-breadcrumb-link-color: #6b7280; /* gray-500 */
+  --dds-breadcrumb-link-color-hover: #111827; /* gray-900 */
+  --dds-breadcrumb-current-color: #111827; /* gray-900 */
+  --dds-breadcrumb-current-weight: 500;
+  --dds-breadcrumb-delimiter-color: #9ca3af; /* gray-400 */
+  --dds-breadcrumb-ellipsis-radius: 0.25rem; /* rounded */
+  --dds-breadcrumb-ellipsis-hover-bg: #f3f4f6; /* gray-100 */
 }
 /* ==========================================================================
    Dark Mode Tokens
@@ -427,8 +460,31 @@
   --dds-list-connector-line: #353a42; /* gray-600 */
   --dds-list-text: #e5e7eb; /* gray-200 */
 
+  /* Table */
+  --dds-table-bg: transparent;
+  --dds-table-text: #d1d5db; /* gray-300 */
+  --dds-table-border: #4b5563; /* gray-600 */
+  --dds-table-row-border: #374151; /* gray-700 */
+  --dds-table-row-hover-bg: rgba(255, 255, 255, 0.04);
+  --dds-table-header-bg: rgba(255, 255, 255, 0.06);
+  --dds-table-sticky-bg: #1f2937; /* gray-800 — opaque fallback for sticky header */
+  --dds-table-sticky-hover-bg: #263347; /* slightly lighter opaque hover for sticky header */
+  --dds-table-header-text: #f9fafb; /* gray-50 */
+  --dds-table-header-border: #4b5563; /* gray-600 */
+  --dds-table-header-hover-bg: rgba(255, 255, 255, 0.1);
+  --dds-table-header-hover-text: #f9fafb; /* gray-50 */
+  --dds-table-header-active-text: #93c5fd; /* blue-300 */
+  --dds-table-focus-ring: #60a5fa; /* blue-400 */
+
   /* Grid */
   --dds-grid-divider-color: #4b5563; /* gray-600 */
+
+  /* Breadcrumb */
+  --dds-breadcrumb-link-color: #9ca3af; /* gray-400 */
+  --dds-breadcrumb-link-color-hover: #f9fafb; /* gray-50 */
+  --dds-breadcrumb-current-color: #e5e7eb; /* gray-200 */
+  --dds-breadcrumb-delimiter-color: #6b7280; /* gray-500 */
+  --dds-breadcrumb-ellipsis-hover-bg: rgba(255, 255, 255, 0.08);
 }
 /* Auto dark mode — follows OS preference, opt-out with .dds-light */
 @media (prefers-color-scheme: dark) {
@@ -586,8 +642,31 @@
     --dds-list-connector-line: #353a42; /* gray-600 */
     --dds-list-text: #e5e7eb; /* gray-200 */
 
+    /* Table */
+    --dds-table-bg: transparent;
+    --dds-table-text: #d1d5db;
+    --dds-table-border: #4b5563;
+    --dds-table-row-border: #374151;
+    --dds-table-row-hover-bg: rgba(255, 255, 255, 0.04);
+    --dds-table-header-bg: rgba(255, 255, 255, 0.06);
+    --dds-table-sticky-bg: #1f2937;
+    --dds-table-sticky-hover-bg: #263347;
+    --dds-table-header-text: #f9fafb;
+    --dds-table-header-border: #4b5563;
+    --dds-table-header-hover-bg: rgba(255, 255, 255, 0.1);
+    --dds-table-header-hover-text: #f9fafb;
+    --dds-table-header-active-text: #93c5fd;
+    --dds-table-focus-ring: #60a5fa;
+
     /* Grid */
     --dds-grid-divider-color: #4b5563; /* gray-600 */
+
+    /* Breadcrumb */
+    --dds-breadcrumb-link-color: #9ca3af; /* gray-400 */
+    --dds-breadcrumb-link-color-hover: #f9fafb; /* gray-50 */
+    --dds-breadcrumb-current-color: #e5e7eb; /* gray-200 */
+    --dds-breadcrumb-delimiter-color: #6b7280; /* gray-500 */
+    --dds-breadcrumb-ellipsis-hover-bg: rgba(255, 255, 255, 0.08);
   }
 }
 /* Explicit dark mode via data attribute (overrides OS preference) */
@@ -726,6 +805,29 @@
   --dds-popover-eyebrow-color: #9ca3af;
   --dds-popover-link-color: #60a5fa;
   --dds-popover-link-color-hover: #93c5fd;
+
+  /* Table */
+  --dds-table-bg: transparent;
+  --dds-table-text: #d1d5db;
+  --dds-table-border: #4b5563;
+  --dds-table-row-border: #374151;
+  --dds-table-row-hover-bg: rgba(255, 255, 255, 0.04);
+  --dds-table-header-bg: rgba(255, 255, 255, 0.06);
+  --dds-table-sticky-bg: #1f2937;
+  --dds-table-sticky-hover-bg: #263347;
+  --dds-table-header-text: #f9fafb;
+  --dds-table-header-border: #4b5563;
+  --dds-table-header-hover-bg: rgba(255, 255, 255, 0.1);
+  --dds-table-header-hover-text: #f9fafb;
+  --dds-table-header-active-text: #93c5fd;
+  --dds-table-focus-ring: #60a5fa;
+
+  /* Breadcrumb */
+  --dds-breadcrumb-link-color: #9ca3af; /* gray-400 */
+  --dds-breadcrumb-link-color-hover: #f9fafb; /* gray-50 */
+  --dds-breadcrumb-current-color: #e5e7eb; /* gray-200 */
+  --dds-breadcrumb-delimiter-color: #6b7280; /* gray-500 */
+  --dds-breadcrumb-ellipsis-hover-bg: rgba(255, 255, 255, 0.08);
 }
 /* Import PrismJS theme */
 /**
@@ -1845,6 +1947,125 @@ a.no-text-decoration {
     }
   }
 }
+/* Table wrapper — enables responsive horizontal scroll */
+.dds-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--dds-table-border);
+  border-radius: var(--dds-table-radius);
+  margin: var(--dds-table-margin);
+}
+/* When stickyHeader is true the wrapper also scrolls vertically so that
+   position:sticky on th elements activates within the same scroll container. */
+.dds-table-scrollable {
+  overflow-y: auto;
+}
+/* Remove outer border for borderless variant — only row borders remain */
+.dds-table-borderless {
+  border: none;
+  border-radius: 0;
+}
+.dds-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--dds-table-font-size);
+  color: var(--dds-table-text);
+  background-color: var(--dds-table-bg);
+}
+/* -----------------------------------------------------------------------
+   Header
+   ----------------------------------------------------------------------- */
+.dds-table-head {
+  background-color: var(--dds-table-header-bg);
+}
+.dds-table-head-sticky th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--dds-table-sticky-bg, var(--dds-table-header-bg));
+}
+/* When headerBg is set via inline style, the sticky cells must inherit it */
+.dds-table-head-sticky[style] th {
+  background-color: inherit;
+}
+/* Sticky sortable header hover: keep background opaque to avoid bleed-through
+   when the global .dds-table-th-sortable:hover uses a semi-transparent color. */
+.dds-table-head-sticky th.dds-table-th-sortable:hover {
+  background-color: var(
+    --dds-table-sticky-hover-bg,
+    var(--dds-table-sticky-bg, var(--dds-table-header-bg))
+  );
+}
+/* -----------------------------------------------------------------------
+   Cells — shared
+   ----------------------------------------------------------------------- */
+.dds-table-th,
+.dds-table-td {
+  padding: var(--dds-table-cell-padding);
+  text-align: left;
+  vertical-align: top;
+}
+/* Alignment helpers */
+.dds-table-align-left  { text-align: left; }
+.dds-table-align-center { text-align: center; }
+.dds-table-align-right { text-align: right; }
+/* -----------------------------------------------------------------------
+   Header cell
+   ----------------------------------------------------------------------- */
+.dds-table-th {
+  font-weight: var(--dds-font-semibold);
+  font-size: var(--dds-table-header-font-size);
+  color: var(--dds-table-header-text);
+  border-bottom: 2px solid var(--dds-table-header-border);
+  white-space: nowrap;
+}
+/* Default variant: left/right column borders */
+.dds-table-wrapper:not(.dds-table-borderless) .dds-table-th + .dds-table-th,
+.dds-table-wrapper:not(.dds-table-borderless) .dds-table-td + .dds-table-td {
+  border-left: 1px solid var(--dds-table-border);
+}
+/* -----------------------------------------------------------------------
+   Sortable column header
+   ----------------------------------------------------------------------- */
+.dds-table-th-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.dds-table-th-sortable:hover {
+  background-color: var(--dds-table-header-hover-bg);
+  color: var(--dds-table-header-hover-text);
+}
+.dds-table-th-sortable:focus-visible {
+  outline: 2px solid var(--dds-table-focus-ring);
+  outline-offset: -2px;
+}
+.dds-table-th-active {
+  color: var(--dds-table-header-active-text);
+}
+.dds-table-th-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.dds-table-sort-icon {
+  font-size: 0.75em;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+.dds-table-th-active .dds-table-sort-icon {
+  opacity: 1;
+}
+/* -----------------------------------------------------------------------
+   Body rows
+   ----------------------------------------------------------------------- */
+.dds-table-body .dds-table-row {
+  border-top: 1px solid var(--dds-table-row-border);
+  transition: background-color 150ms ease-in-out;
+}
+.dds-table-body .dds-table-row:hover {
+  background-color: var(--dds-table-row-hover-bg);
+}
 /* =============================================================================
    Grid — multi-column layout component
    ============================================================================= */
@@ -1948,4 +2169,107 @@ a.no-text-decoration {
     position: static;
   }
 }
+/* ============================================================
+   Breadcrumb component
+   ============================================================ */
+.dds-breadcrumb {
+  font-size: var(--dds-breadcrumb-font-size-md);
+  line-height: var(--dds-line-height-tight);
+}
+/* Size variants */
+.dds-breadcrumb--sm {
+  font-size: var(--dds-breadcrumb-font-size-sm);
+}
+/* The ordered list */
+.dds-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--dds-breadcrumb-gap);
+}
+/* Scroll mode: single row with horizontal scroll (mobile only) */
+@media (max-width: 640px) {
+  .dds-breadcrumb--scroll .dds-breadcrumb-list {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .dds-breadcrumb--scroll .dds-breadcrumb-list::-webkit-scrollbar {
+    display: none;
+  }
+}
+/* Individual segment items */
+.dds-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: var(--dds-breadcrumb-gap);
+  white-space: nowrap;
+}
+/* Linked segments */
+.dds-breadcrumb-link {
+  color: var(--dds-breadcrumb-link-color);
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+a.dds-breadcrumb-link:hover {
+  color: var(--dds-breadcrumb-link-color-hover);
+  text-decoration: underline;
+}
+/* Current page segment */
+.dds-breadcrumb-current {
+  color: var(--dds-breadcrumb-current-color);
+  font-weight: var(--dds-breadcrumb-current-weight);
+}
+/* Delimiter characters — aria-hidden in markup */
+.dds-breadcrumb-delimiter {
+  color: var(--dds-breadcrumb-delimiter-color);
+  user-select: none;
+  flex-shrink: 0;
+}
+/* Ellipsis expand button */
+.dds-breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--dds-breadcrumb-link-color);
+  font-size: inherit;
+  padding: 0.1em 0.3em;
+  line-height: 1;
+  border-radius: var(--dds-breadcrumb-ellipsis-radius);
+  transition: color 150ms ease, background-color 150ms ease;
+}
+.dds-breadcrumb-ellipsis:hover {
+  color: var(--dds-breadcrumb-link-color-hover);
+  background-color: var(--dds-breadcrumb-ellipsis-hover-bg);
+}
+.dds-breadcrumb-ellipsis:focus-visible {
+  outline: 2px solid var(--dds-breadcrumb-link-color-hover);
+  outline-offset: 2px;
+}
+/* ============================================================
+   Collapsible behaviour
+   ============================================================ */
+/* On desktop the ellipsis is always hidden — show all items */
+.dds-breadcrumb--collapsible .dds-breadcrumb-item--ellipsis {
+  display: none;
+}
+/* On narrow viewports: hide middle items and show ellipsis when not expanded */
+@media (max-width: 640px) {
+  .dds-breadcrumb--collapsible:not([data-expanded="true"])
+    .dds-breadcrumb-item--middle {
+    display: none;
+  }
+
+  .dds-breadcrumb--collapsible:not([data-expanded="true"])
+    .dds-breadcrumb-item--ellipsis {
+    display: flex;
+  }
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {
@@ -11,7 +11,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "USAGE.md"
   ],
   "scripts": {
     "build": "tsc && npm run build:css",