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

package/dist/styles.css

@@ -286,6 +286,18 @@
   --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
@@ -466,6 +478,13 @@
 
   /* 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) {
@@ -641,6 +660,13 @@
 
     /* 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) */
@@ -795,6 +821,13 @@
   --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 */
 /**
@@ -2136,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.9.1",
+  "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",