@vanduo-oss/framework 1.4.0 → 1.4.2

package/css/components/theme-customizer.css

@@ -5,15 +5,15 @@
 
 :root {
   /* Theme Customizer Variables */
-  --customizer-width: 320px;
-  --customizer-padding: 1rem;
-  --customizer-gap: 0.75rem;
-  --customizer-swatch-size: 28px;
-  --customizer-radius-btn-width: 48px;
-  --customizer-bg: var(--vd-bg-primary);
-  --customizer-border: var(--vd-border-color);
-  --customizer-shadow: var(--shadow-lg);
-  --customizer-z-index: 1050;
+  --vd-customizer-width: 320px;
+  --vd-customizer-padding: 1rem;
+  --vd-customizer-gap: 0.75rem;
+  --vd-customizer-swatch-size: 28px;
+  --vd-customizer-radius-btn-width: 48px;
+  --vd-customizer-bg: var(--vd-bg-primary);
+  --vd-customizer-border: var(--vd-border-color);
+  --vd-customizer-shadow: var(--vd-shadow-lg);
+  --vd-customizer-z-index: 1050;
 }
 
 /* ==========================================================================
@@ -25,15 +25,15 @@ body > .vd-theme-customizer-panel {
   /* top is set dynamically by JS based on actual navbar height */
   top: 55px;
   right: 0;
-  width: var(--customizer-width);
+  width: var(--vd-customizer-width);
   max-height: calc(100vh - 55px);
   overflow-y: auto;
   padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */
-  background-color: var(--customizer-bg);
-  border: 1px solid var(--customizer-border);
-  border-radius: calc(var(--radius-scale, 0.25) * 1rem);
-  box-shadow: var(--customizer-shadow);
-  z-index: var(--customizer-z-index);
+  background-color: var(--vd-customizer-bg);
+  border: 1px solid var(--vd-customizer-border);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);
+  box-shadow: var(--vd-customizer-shadow);
+  z-index: var(--vd-customizer-z-index);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
@@ -54,23 +54,23 @@ body > .vd-theme-customizer-panel.is-open {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem var(--customizer-padding) 0.75rem;
+  padding: 0.5rem var(--vd-customizer-padding) 0.75rem;
   border-bottom: 1px solid var(--vd-border-color);
 }
 
 .tc-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-semibold);
   color: var(--vd-text-primary);
   margin: 0;
 }
 
 .tc-body {
-  padding: var(--customizer-padding);
+  padding: var(--vd-customizer-padding);
 }
 
 .tc-footer {
-  padding: 0.75rem var(--customizer-padding) 0.5rem;
+  padding: 0.75rem var(--vd-customizer-padding) 0.5rem;
   border-top: 1px solid var(--vd-border-color);
 }
 
@@ -85,8 +85,8 @@ body > .vd-theme-customizer-panel.is-open {
 .tc-label {
   display: block;
   margin-bottom: 0.5rem;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-medium);
   color: var(--vd-text-primary);
 }
 
@@ -101,9 +101,9 @@ body > .vd-theme-customizer-panel.is-open {
   width: 100%;
   aspect-ratio: 1;
   padding: 0;
-  background-color: var(--swatch-color);
+  background-color: var(--vd-swatch-color);
   border: 2px solid transparent;
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
   cursor: pointer;
   transition: all 0.15s ease;
 }
@@ -138,7 +138,7 @@ body > .vd-theme-customizer-panel.is-open {
   padding: 0.5rem 0.25rem;
   background: transparent;
   border: 1px solid var(--vd-border-color);
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
   cursor: pointer;
   transition: all 0.15s ease;
 }
@@ -148,12 +148,12 @@ body > .vd-theme-customizer-panel.is-open {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: var(--swatch-color);
+  background-color: var(--vd-swatch-color);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .tc-neutral-swatch span {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   color: var(--vd-text-primary);
 }
 
@@ -187,18 +187,18 @@ body > .vd-theme-customizer-panel.is-open {
   background: transparent;
   border: 1px solid var(--vd-border-color);
   color: var(--vd-text-primary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .tc-radius-btn:first-child {
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);
 }
 
 .tc-radius-btn:last-child {
-  border-radius: 0 calc(var(--radius-scale, 0.25) * 0.5rem) calc(var(--radius-scale, 0.25) * 0.5rem) 0;
+  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;
 }
 
 .tc-radius-btn:not(:first-child) {
@@ -229,9 +229,9 @@ body > .vd-theme-customizer-panel.is-open {
   padding: 0.5rem 0.75rem;
   background-color: var(--vd-bg-primary);
   border: 1px solid var(--vd-border-color);
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
   color: var(--vd-text-primary);
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
   cursor: pointer;
   transition: border-color 0.15s ease;
 }
@@ -262,17 +262,17 @@ body > .vd-theme-customizer-panel.is-open {
   background: transparent;
   border: 1px solid var(--vd-border-color);
   color: var(--vd-text-primary);
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .tc-mode-btn:first-child {
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);
 }
 
 .tc-mode-btn:last-child {
-  border-radius: 0 calc(var(--radius-scale, 0.25) * 0.5rem) calc(var(--radius-scale, 0.25) * 0.5rem) 0;
+  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;
 }
 
 .tc-mode-btn:not(:first-child) {
@@ -320,7 +320,7 @@ body > .vd-theme-customizer-panel.is-open {
   padding: 0;
   background: transparent;
   border: 1px solid var(--vd-border-color);
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
   color: var(--vd-text-primary);
   cursor: pointer;
   transition: all 0.2s ease;
@@ -356,15 +356,15 @@ body > .vd-theme-customizer-panel.is-open {
   /* top is set dynamically by JS based on actual navbar height */
   top: 55px;
   right: 0;
-  width: var(--customizer-width);
+  width: var(--vd-customizer-width);
   max-height: calc(100vh - 55px);
   overflow-y: auto;
   padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */
-  background-color: var(--customizer-bg);
-  border: 1px solid var(--customizer-border);
-  border-radius: calc(var(--radius-scale, 0.25) * 1rem);
-  box-shadow: var(--customizer-shadow);
-  z-index: var(--customizer-z-index);
+  background-color: var(--vd-customizer-bg);
+  border: 1px solid var(--vd-customizer-border);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);
+  box-shadow: var(--vd-customizer-shadow);
+  z-index: var(--vd-customizer-z-index);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
@@ -378,7 +378,7 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .vd-theme-customizer-panel-inner {
-  padding: var(--customizer-padding);
+  padding: var(--vd-customizer-padding);
 }
 
 /* ==========================================================================
@@ -398,8 +398,8 @@ body > .vd-theme-customizer-panel.is-open {
   align-items: center;
   gap: 0.375rem;
   margin-bottom: 0.625rem;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-medium);
   color: var(--vd-text-primary);
 }
 
@@ -438,7 +438,7 @@ body > .vd-theme-customizer-panel.is-open {
   padding: 0.375rem 0.5rem;
   background: transparent;
   border: 1px solid var(--vd-border-color);
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
   cursor: pointer;
   transition: all 0.15s ease;
   text-align: left;
@@ -464,12 +464,12 @@ body > .vd-theme-customizer-panel.is-open {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background-color: var(--swatch-color);
+  background-color: var(--vd-swatch-color);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .customizer-swatch-label {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   color: var(--vd-text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -514,18 +514,18 @@ body > .vd-theme-customizer-panel.is-open {
   background: transparent;
   border: 1px solid var(--vd-border-color);
   color: var(--vd-text-primary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .customizer-radius-btn:first-child {
-  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);
 }
 
 .customizer-radius-btn:last-child {
-  border-radius: 0 var(--btn-border-radius) var(--btn-border-radius) 0;
+  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;
 }
 
 .customizer-radius-btn:not(:first-child) {
@@ -591,17 +591,17 @@ body > .vd-theme-customizer-panel.is-open {
   background: transparent;
   border: 1px solid var(--vd-border-color);
   color: var(--vd-text-primary);
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .customizer-mode-btn:first-child {
-  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);
 }
 
 .customizer-mode-btn:last-child {
-  border-radius: 0 var(--btn-border-radius) var(--btn-border-radius) 0;
+  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;
 }
 
 .customizer-mode-btn:not(:first-child) {
@@ -635,8 +635,8 @@ body > .vd-theme-customizer-panel.is-open {
    ========================================================================== */
 
 [data-theme="dark"] {
-  --customizer-bg: var(--vd-bg-primary);
-  --customizer-border: var(--vd-border-color);
+  --vd-customizer-bg: var(--vd-bg-primary);
+  --vd-customizer-border: var(--vd-border-color);
 }
 
 [data-theme="dark"] .customizer-swatch-dot,
@@ -648,15 +648,15 @@ body > .vd-theme-customizer-panel.is-open {
 [data-theme="dark"] .customizer-mode-btn.is-active,
 [data-theme="dark"] .tc-radius-btn.is-active,
 [data-theme="dark"] .tc-mode-btn.is-active {
-  background-color: var(--gray-2);
-  border-color: var(--gray-2);
-  color: var(--gray-9);
+  background-color: var(--vd-gray-2);
+  border-color: var(--vd-gray-2);
+  color: var(--vd-gray-9);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --customizer-bg: var(--vd-bg-primary);
-    --customizer-border: var(--vd-border-color);
+    --vd-customizer-bg: var(--vd-bg-primary);
+    --vd-customizer-border: var(--vd-border-color);
   }
 
   :root:not([data-theme]) .customizer-swatch-dot,
@@ -668,9 +668,9 @@ body > .vd-theme-customizer-panel.is-open {
   :root:not([data-theme]) .customizer-mode-btn.is-active,
   :root:not([data-theme]) .tc-radius-btn.is-active,
   :root:not([data-theme]) .tc-mode-btn.is-active {
-    background-color: var(--gray-2);
-    border-color: var(--gray-2);
-    color: var(--gray-9);
+    background-color: var(--vd-gray-2);
+    border-color: var(--vd-gray-2);
+    color: var(--vd-gray-9);
   }
 }
 
@@ -689,7 +689,7 @@ body > .vd-theme-customizer-panel.is-open {
     max-width: 320px;
     max-height: none;
     border: none;
-    border-left: 1px solid var(--customizer-border);
+    border-left: 1px solid var(--vd-customizer-border);
     border-radius: 0;
     transform: none;
     opacity: 1;
@@ -729,7 +729,7 @@ body > .vd-theme-customizer-panel.is-open {
     padding: 0;
     background: transparent;
     border: 1px solid var(--vd-border-color);
-    border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
+    border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
     color: var(--vd-text-primary);
     cursor: pointer;
   }
@@ -746,7 +746,7 @@ body > .vd-theme-customizer-panel.is-open {
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: calc(var(--customizer-z-index) - 1);
+    z-index: calc(var(--vd-customizer-z-index) - 1);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -803,8 +803,8 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .customizer-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-semibold);
   color: var(--vd-text-primary);
   margin: 0;
 }
@@ -816,9 +816,9 @@ body > .vd-theme-customizer-panel.is-open {
   padding: 0.25rem 0.5rem;
   background: transparent;
   border: 1px solid var(--vd-border-color);
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
   color: var(--vd-text-muted);
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   cursor: pointer;
   transition: all 0.15s ease;
 }

package/css/components/timeline.css

@@ -5,32 +5,32 @@
 
 :root {
   /* Timeline Colors */
-  --timeline-line-color: var(--vd-border-color, #dee2e6);
-  --timeline-marker-bg: var(--vd-color-primary, #0d6efd);
-  --timeline-marker-color: #fff;
-  --timeline-content-bg: var(--card-bg, #fff);
-  --timeline-content-border: var(--vd-border-color, #dee2e6);
+  --vd-timeline-line-color: var(--vd-border-color, #dee2e6);
+  --vd-timeline-marker-bg: var(--vd-color-primary, #0d6efd);
+  --vd-timeline-marker-color: #fff;
+  --vd-timeline-content-bg: var(--vd-card-bg, #fff);
+  --vd-timeline-content-border: var(--vd-border-color, #dee2e6);
 
   /* Timeline Dimensions (Fibonacci) */
-  --timeline-line-width: 2px;
-  --timeline-marker-size: 0.8125rem; /* 13px - fib */
-  --timeline-marker-size-lg: 2.125rem; /* 34px ~ fib */
-  --timeline-spacing: 1.3125rem;  /* 21px - fib */
-  --timeline-content-padding: 0.8125rem; /* 13px - fib */
-  --timeline-border-radius: var(--border-radius, 0.5rem);
+  --vd-timeline-line-width: 2px;
+  --vd-timeline-marker-size: 0.8125rem; /* 13px - fib */
+  --vd-timeline-marker-size-lg: 2.125rem; /* 34px ~ fib */
+  --vd-timeline-spacing: 1.3125rem;  /* 21px - fib */
+  --vd-timeline-content-padding: 0.8125rem; /* 13px - fib */
+  --vd-timeline-border-radius: var(--vd-border-radius, 0.5rem);
 }
 
 [data-theme="dark"] {
-  --timeline-line-color: var(--vd-color-gray-600, #6c757d);
-  --timeline-content-bg: var(--card-bg, #2d2d44);
-  --timeline-content-border: var(--vd-border-color, #3d3d5c);
+  --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);
+  --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);
+  --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --timeline-line-color: var(--vd-color-gray-600, #6c757d);
-    --timeline-content-bg: var(--card-bg, #2d2d44);
-    --timeline-content-border: var(--vd-border-color, #3d3d5c);
+    --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);
+    --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);
+    --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);
   }
 }
 
@@ -38,7 +38,7 @@
 
 .vd-timeline {
   position: relative;
-  padding-left: calc(var(--timeline-marker-size) / 2 + var(--timeline-spacing));
+  padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));
   list-style: none;
   margin: 0;
 }
@@ -49,16 +49,16 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: calc(var(--timeline-marker-size) / 2 - var(--timeline-line-width) / 2);
-  width: var(--timeline-line-width);
-  background: var(--timeline-line-color);
+  left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);
+  width: var(--vd-timeline-line-width);
+  background: var(--vd-timeline-line-color);
 }
 
 /* ========== Item ========== */
 
 .vd-timeline-item {
   position: relative;
-  padding-bottom: var(--timeline-spacing);
+  padding-bottom: var(--vd-timeline-spacing);
 }
 
 .vd-timeline-item:last-child {
@@ -69,35 +69,35 @@
 
 .vd-timeline-marker {
   position: absolute;
-  left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size) / 2);
+  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);
   top: 0.25rem;
-  width: var(--timeline-marker-size);
-  height: var(--timeline-marker-size);
+  width: var(--vd-timeline-marker-size);
+  height: var(--vd-timeline-marker-size);
   border-radius: 50%;
-  background: var(--timeline-marker-bg);
-  border: 2px solid var(--timeline-content-bg);
-  box-shadow: 0 0 0 2px var(--timeline-marker-bg);
+  background: var(--vd-timeline-marker-bg);
+  border: 2px solid var(--vd-timeline-content-bg);
+  box-shadow: 0 0 0 2px var(--vd-timeline-marker-bg);
 }
 
 /* Large marker with icon/text */
 .vd-timeline-marker-lg {
-  width: var(--timeline-marker-size-lg);
-  height: var(--timeline-marker-size-lg);
-  left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size-lg) / 2);
+  width: var(--vd-timeline-marker-size-lg);
+  height: var(--vd-timeline-marker-size-lg);
+  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size-lg) / 2);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--timeline-marker-color);
+  color: var(--vd-timeline-marker-color);
   font-size: 0.875rem;
 }
 
 /* ========== Content ========== */
 
 .vd-timeline-content {
-  background: var(--timeline-content-bg);
-  border: 1px solid var(--timeline-content-border);
-  border-radius: var(--timeline-border-radius);
-  padding: var(--timeline-content-padding);
+  background: var(--vd-timeline-content-bg);
+  border: 1px solid var(--vd-timeline-content-border);
+  border-radius: var(--vd-timeline-border-radius);
+  padding: var(--vd-timeline-content-padding);
 }
 
 .vd-timeline-title {
@@ -147,7 +147,7 @@
 
 .vd-timeline-alternating .vd-timeline-item {
   width: 50%;
-  padding-right: var(--timeline-spacing);
+  padding-right: var(--vd-timeline-spacing);
   padding-left: 0;
 }
 
@@ -158,28 +158,28 @@
 
 .vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker {
   left: auto;
-  right: calc(-1 * var(--timeline-marker-size) / 2 - 1px);
+  right: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);
 }
 
 .vd-timeline-alternating .vd-timeline-item:nth-child(even) {
   margin-left: 50%;
-  padding-left: var(--timeline-spacing);
+  padding-left: var(--vd-timeline-spacing);
   padding-right: 0;
 }
 
 .vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {
-  left: calc(-1 * var(--timeline-marker-size) / 2 - 1px);
+  left: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);
 }
 
 /* ========== Responsive ========== */
 
 @media (max-width: 768px) {
   .vd-timeline-alternating {
-    padding-left: calc(var(--timeline-marker-size) / 2 + var(--timeline-spacing));
+    padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));
   }
 
   .vd-timeline-alternating::before {
-    left: calc(var(--timeline-marker-size) / 2 - var(--timeline-line-width) / 2);
+    left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);
     transform: none;
   }
 
@@ -195,7 +195,7 @@
 
   .vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker,
   .vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {
-    left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size) / 2);
+    left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);
     right: auto;
   }
 }

package/css/components/timepicker.css

@@ -4,45 +4,47 @@
  */
 
 :root {
-  --tp-bg: var(--card-bg, #fff);
-  --tp-border-color: var(--vd-border-color, #dee2e6);
-  --tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12);
-  --tp-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
-  --tp-item-selected-bg: var(--vd-color-primary, #0d6efd);
-  --tp-item-selected-color: #fff;
-  --tp-padding: 0.5rem;
-  --tp-item-padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
-  --tp-max-height: 15rem;
-  --tp-border-radius: var(--border-radius, 0.5rem);
-  --tp-z-index: 1055;
+  --vd-tp-bg: var(--vd-card-bg, #fff);
+  --vd-tp-border-color: var(--vd-border-color, #dee2e6);
+  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12);
+  --vd-tp-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
+  --vd-tp-item-selected-bg: var(--vd-color-primary, #0d6efd);
+  --vd-tp-item-selected-color: #fff;
+  --vd-tp-padding: 0.5rem;
+  --vd-tp-item-padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
+  --vd-tp-max-height: 15rem;
+  --vd-tp-border-radius: var(--vd-border-radius, 0.5rem);
+  --vd-tp-z-index: 1055;
 }
 
 [data-theme="dark"] {
-  --tp-bg: var(--card-bg, #2d2d44);
-  --tp-border-color: var(--vd-border-color, #3d3d5c);
-  --tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
-  --tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+  --vd-tp-bg: var(--vd-card-bg, #2d2d44);
+  --vd-tp-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
+  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --tp-bg: var(--card-bg, #2d2d44);
-    --tp-border-color: var(--vd-border-color, #3d3d5c);
-    --tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
-    --tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+    --vd-tp-bg: var(--vd-card-bg, #2d2d44);
+    --vd-tp-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
+    --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
   }
 }
 
 /* ========== Popup ========== */
 
 .vd-timepicker-popup {
-  position: absolute;
-  z-index: var(--tp-z-index);
-  background: var(--tp-bg);
-  border: 1px solid var(--tp-border-color);
-  border-radius: var(--tp-border-radius);
-  box-shadow: var(--tp-shadow);
-  max-height: var(--tp-max-height);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--vd-tp-z-index);
+  background: var(--vd-tp-bg);
+  border: 1px solid var(--vd-tp-border-color);
+  border-radius: var(--vd-tp-border-radius);
+  box-shadow: var(--vd-tp-shadow);
+  max-height: var(--vd-tp-max-height);
   overflow-y: auto;
   display: none;
   min-width: 8rem;
@@ -55,7 +57,7 @@
 /* ========== Time Items ========== */
 
 .vd-timepicker-item {
-  padding: var(--tp-item-padding);
+  padding: var(--vd-tp-item-padding);
   cursor: pointer;
   font-size: 0.875rem;
   text-align: center;
@@ -64,12 +66,12 @@
 }
 
 .vd-timepicker-item:hover {
-  background: var(--tp-item-hover-bg);
+  background: var(--vd-tp-item-hover-bg);
 }
 
 .vd-timepicker-item.is-selected {
-  background: var(--tp-item-selected-bg);
-  color: var(--tp-item-selected-color);
+  background: var(--vd-tp-item-selected-bg);
+  color: var(--vd-tp-item-selected-color);
   font-weight: 600;
 }