@duskmoon-dev/components 0.5.4 → 0.5.5

package/dist/classes/index.js

@@ -2448,6 +2448,7 @@ var timelineBaseClass = "timeline";
 var timelineItemClass = "timeline-item";
 var timelineMarkerBaseClass = "timeline-marker";
 var timelineMarkerIconClass = "timeline-marker-icon";
+var timelineMarkerDotClass = "timeline-marker-dot";
 var timelineContentClass = "timeline-content";
 var timelineTimeClass = "timeline-time";
 var timelinePendingClass = "timeline-item-pending";
@@ -3787,6 +3788,7 @@ export {
   timelineItemClass,
   timelineMarkerBaseClass,
   timelineMarkerColorClasses,
+  timelineMarkerDotClass,
   timelineMarkerIconClass,
   timelineModeClasses,
   timelinePendingClass,

package/dist/classes/timeline.d.ts

@@ -3,6 +3,7 @@ export declare const timelineBaseClass = "timeline";
 export declare const timelineItemClass = "timeline-item";
 export declare const timelineMarkerBaseClass = "timeline-marker";
 export declare const timelineMarkerIconClass = "timeline-marker-icon";
+export declare const timelineMarkerDotClass = "timeline-marker-dot";
 export declare const timelineContentClass = "timeline-content";
 export declare const timelineTimeClass = "timeline-time";
 export declare const timelinePendingClass = "timeline-item-pending";

package/dist/components/timeline/index.js

@@ -33,6 +33,7 @@ var timelineBaseClass = "timeline";
 var timelineItemClass = "timeline-item";
 var timelineMarkerBaseClass = "timeline-marker";
 var timelineMarkerIconClass = "timeline-marker-icon";
+var timelineMarkerDotClass = "timeline-marker-dot";
 var timelineContentClass = "timeline-content";
 var timelineTimeClass = "timeline-time";
 var timelinePendingClass = "timeline-item-pending";
@@ -113,7 +114,10 @@ var Timeline = forwardRef(({
             hasIcon: Boolean(item.dot)
           }),
           "aria-hidden": "true",
-          children: item.dot
+          children: item.dot ?? /* @__PURE__ */ jsx("span", {
+            className: timelineMarkerDotClass,
+            "aria-hidden": "true"
+          })
         }),
         /* @__PURE__ */ jsxs("div", {
           className: timelineContentClass,

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.5.4";
+export declare const version = "0.5.5";

package/dist/index.js

@@ -107,7 +107,7 @@ function duskmoonMerge(classes) {
 import { useCallback as useCallback2, useState as useState2 } from "react";
 
 // src/generated/version.ts
-var version = "0.5.4";
+var version = "0.5.5";
 
 // src/infrastructure.ts
 var theme = {
@@ -18280,6 +18280,7 @@ var timelineBaseClass = "timeline";
 var timelineItemClass = "timeline-item";
 var timelineMarkerBaseClass = "timeline-marker";
 var timelineMarkerIconClass = "timeline-marker-icon";
+var timelineMarkerDotClass = "timeline-marker-dot";
 var timelineContentClass = "timeline-content";
 var timelineTimeClass = "timeline-time";
 var timelinePendingClass = "timeline-item-pending";
@@ -18360,7 +18361,10 @@ var Timeline = forwardRef81(({
             hasIcon: Boolean(item.dot)
           }),
           "aria-hidden": "true",
-          children: item.dot
+          children: item.dot ?? /* @__PURE__ */ jsx95("span", {
+            className: timelineMarkerDotClass,
+            "aria-hidden": "true"
+          })
         }),
         /* @__PURE__ */ jsxs75("div", {
           className: timelineContentClass,

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.5.4";
+var version = "0.5.5";
 
 // src/infrastructure.ts
 var theme = {

package/dist/styles.css

@@ -28025,9 +28025,6 @@ html {
   }
 
   .timeline-marker {
-    --timeline-marker-color: var(--color-primary);
-    --timeline-marker-bg: var(--color-primary-container);
-
     position: relative;
     z-index: 1;
     display: inline-flex;
@@ -28036,19 +28033,24 @@ html {
     flex: 0 0 var(--timeline-marker-size);
     align-items: center;
     justify-content: center;
-    color: var(--timeline-marker-color);
+    color: var(--color-on-surface-variant);
     background: var(--color-surface);
-    border: 2px solid var(--timeline-marker-color);
+    border: 2px solid var(--color-outline-variant);
     border-radius: var(--radius-full);
-    box-shadow: 0 0 0 4px var(--timeline-marker-bg);
   }
 
-  .timeline-marker:not(.timeline-marker-icon)::after {
-    width: 0.625rem;
-    height: 0.625rem;
-    background: var(--timeline-marker-color);
+  .timeline-marker-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: var(--color-outline-variant);
     border-radius: var(--radius-full);
-    content: "";
+  }
+
+  .timeline-item-active > .timeline-marker,
+  .timeline-item.active .timeline-marker {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary-container);
+    box-shadow: 0 0 0 4px var(--color-primary-container);
   }
 
   .timeline-marker-secondary {
@@ -28112,21 +28114,21 @@ html {
   }
 
   .timeline-sm {
-    --timeline-marker-size: 1.75rem;
+    --timeline-marker-size: 1.5rem;
   }
 
-  .timeline-sm .timeline-marker:not(.timeline-marker-icon)::after {
-    width: 0.45rem;
-    height: 0.45rem;
+  .timeline-sm .timeline-marker-dot {
+    width: 0.5rem;
+    height: 0.5rem;
   }
 
   .timeline-lg {
     --timeline-marker-size: 3rem;
   }
 
-  .timeline-lg .timeline-marker:not(.timeline-marker-icon)::after {
-    width: 0.75rem;
-    height: 0.75rem;
+  .timeline-lg .timeline-marker-dot {
+    width: 0.875rem;
+    height: 0.875rem;
   }
 
   .timeline-right {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",