@vanduo-oss/framework 1.4.0 → 1.4.2

package/css/components/datepicker.css

@@ -5,54 +5,56 @@
 
 :root {
   /* Datepicker Colors */
-  --dp-bg: var(--card-bg, #fff);
-  --dp-border-color: var(--vd-border-color, #dee2e6);
-  --dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12); /* 4px 13px fib */
-  --dp-header-bg: var(--vd-color-primary, #0d6efd);
-  --dp-header-color: #fff;
-  --dp-day-hover-bg: var(--vd-bg-secondary, #f8f9fa);
-  --dp-day-selected-bg: var(--vd-color-primary, #0d6efd);
-  --dp-day-selected-color: #fff;
-  --dp-day-today-color: var(--vd-color-primary, #0d6efd);
-  --dp-day-outside-color: var(--vd-text-muted, #6c757d);
-  --dp-day-disabled-color: var(--vd-text-disabled, #adb5bd);
+  --vd-dp-bg: var(--vd-card-bg, #fff);
+  --vd-dp-border-color: var(--vd-border-color, #dee2e6);
+  --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12); /* 4px 13px fib */
+  --vd-dp-header-bg: var(--vd-color-primary, #0d6efd);
+  --vd-dp-header-color: #fff;
+  --vd-dp-day-hover-bg: var(--vd-bg-secondary, #f8f9fa);
+  --vd-dp-day-selected-bg: var(--vd-color-primary, #0d6efd);
+  --vd-dp-day-selected-color: #fff;
+  --vd-dp-day-today-color: var(--vd-color-primary, #0d6efd);
+  --vd-dp-day-outside-color: var(--vd-text-muted, #6c757d);
+  --vd-dp-day-disabled-color: var(--vd-text-disabled, #adb5bd);
 
   /* Datepicker Spacing (Fibonacci) */
-  --dp-padding: 0.5rem;        /* 8px - fib */
-  --dp-cell-size: 2.25rem;     /* 36px */
-  --dp-gap: 2px;
-  --dp-border-radius: var(--border-radius, 0.5rem);
+  --vd-dp-padding: 0.5rem;        /* 8px - fib */
+  --vd-dp-cell-size: 2.25rem;     /* 36px */
+  --vd-dp-gap: 2px;
+  --vd-dp-border-radius: var(--vd-border-radius, 0.5rem);
 
   /* Datepicker Z-index */
-  --dp-z-index: 1055;
+  --vd-dp-z-index: 1055;
 }
 
 [data-theme="dark"] {
-  --dp-bg: var(--card-bg, #2d2d44);
-  --dp-border-color: var(--vd-border-color, #3d3d5c);
-  --dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
-  --dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+  --vd-dp-bg: var(--vd-card-bg, #2d2d44);
+  --vd-dp-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
+  --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --dp-bg: var(--card-bg, #2d2d44);
-    --dp-border-color: var(--vd-border-color, #3d3d5c);
-    --dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
-    --dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+    --vd-dp-bg: var(--vd-card-bg, #2d2d44);
+    --vd-dp-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
+    --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
   }
 }
 
 /* ========== Calendar Popup ========== */
 
 .vd-datepicker-popup {
-  position: absolute;
-  z-index: var(--dp-z-index);
-  background: var(--dp-bg);
-  border: 1px solid var(--dp-border-color);
-  border-radius: var(--dp-border-radius);
-  box-shadow: var(--dp-shadow);
-  padding: var(--dp-padding);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--vd-dp-z-index);
+  background: var(--vd-dp-bg);
+  border: 1px solid var(--vd-dp-border-color);
+  border-radius: var(--vd-dp-border-radius);
+  box-shadow: var(--vd-dp-shadow);
+  padding: var(--vd-dp-padding);
   display: none;
   min-width: 17rem;
 }
@@ -73,12 +75,12 @@
 
 .vd-datepicker-title {
   font-weight: 600;
-  font-size: var(--font-size-base, 1rem);
+  font-size: var(--vd-font-size-base, 1rem);
   cursor: pointer;
 }
 
 .vd-datepicker-title:hover {
-  color: var(--dp-day-today-color);
+  color: var(--vd-dp-day-today-color);
 }
 
 .vd-datepicker-prev,
@@ -100,7 +102,7 @@
 
 .vd-datepicker-prev:hover,
 .vd-datepicker-next:hover {
-  background: var(--dp-day-hover-bg);
+  background: var(--vd-dp-day-hover-bg);
 }
 
 /* ========== Calendar grid (weekday row + week rows) ========== */
@@ -108,7 +110,7 @@
 .vd-datepicker-grid {
   display: flex;
   flex-direction: column;
-  gap: var(--dp-gap);
+  gap: var(--vd-dp-gap);
 }
 
 /* ========== Weekday Headers ========== */
@@ -116,7 +118,7 @@
 .vd-datepicker-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: var(--dp-gap);
+  gap: var(--vd-dp-gap);
   text-align: center;
   font-size: 0.75rem;
   font-weight: 600;
@@ -130,15 +132,15 @@
 .vd-datepicker-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: var(--dp-gap);
+  gap: var(--vd-dp-gap);
 }
 
 .vd-datepicker-day {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dp-cell-size);
-  height: var(--dp-cell-size);
+  width: var(--vd-dp-cell-size);
+  height: var(--vd-dp-cell-size);
   border: none;
   border-radius: 50%;
   background: transparent;
@@ -149,26 +151,26 @@
 }
 
 .vd-datepicker-day:hover {
-  background: var(--dp-day-hover-bg);
+  background: var(--vd-dp-day-hover-bg);
 }
 
 .vd-datepicker-day.is-today {
-  color: var(--dp-day-today-color);
+  color: var(--vd-dp-day-today-color);
   font-weight: 700;
 }
 
 .vd-datepicker-day.is-selected {
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
   font-weight: 600;
 }
 
 .vd-datepicker-day.is-outside {
-  color: var(--dp-day-outside-color);
+  color: var(--vd-dp-day-outside-color);
 }
 
 .vd-datepicker-day.is-disabled {
-  color: var(--dp-day-disabled-color);
+  color: var(--vd-dp-day-disabled-color);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -177,14 +179,14 @@
 
 .vd-datepicker-day.is-range-start {
   border-radius: 50% 0 0 50%;
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
 }
 
 .vd-datepicker-day.is-range-end {
   border-radius: 0 50% 50% 0;
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
 }
 
 .vd-datepicker-day.is-in-range {
@@ -206,7 +208,7 @@
 .vd-datepicker-year-btn {
   padding: 0.5rem;
   border: none;
-  border-radius: var(--dp-border-radius);
+  border-radius: var(--vd-dp-border-radius);
   background: transparent;
   cursor: pointer;
   text-align: center;
@@ -215,11 +217,11 @@
 
 .vd-datepicker-month-btn:hover,
 .vd-datepicker-year-btn:hover {
-  background: var(--dp-day-hover-bg);
+  background: var(--vd-dp-day-hover-bg);
 }
 
 .vd-datepicker-month-btn.is-selected,
 .vd-datepicker-year-btn.is-selected {
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
 }

package/css/components/doc-search.css

@@ -5,46 +5,46 @@
 
 :root {
   /* Search Input */
-  --doc-search-input-bg: var(--input-bg);
-  --doc-search-input-border: var(--input-border-color);
-  --doc-search-input-focus-border: var(--vd-color-primary);
-  --doc-search-input-radius: var(--input-border-radius);
-  --doc-search-input-padding-y: 0.5rem;
-  --doc-search-input-padding-x: 0.75rem;
-  --doc-search-input-padding-left: 30px;
+  --vd-doc-search-input-bg: var(--vd-input-bg);
+  --vd-doc-search-input-border: var(--vd-input-border-color);
+  --vd-doc-search-input-focus-border: var(--vd-color-primary);
+  --vd-doc-search-input-radius: var(--vd-input-border-radius);
+  --vd-doc-search-input-padding-y: 0.5rem;
+  --vd-doc-search-input-padding-x: 0.75rem;
+  --vd-doc-search-input-padding-left: 30px;
   
   /* Search Results */
-  --doc-search-results-bg: var(--card-bg, var(--vd-bg-primary));
-  --doc-search-results-border: var(--vd-border-color);
-  --doc-search-results-shadow: var(--shadow-lg);
-  --doc-search-results-max-height: 400px;
-  --doc-search-results-radius: var(--input-border-radius);
+  --vd-doc-search-results-bg: var(--vd-card-bg, var(--vd-bg-primary));
+  --vd-doc-search-results-border: var(--vd-border-color);
+  --vd-doc-search-results-shadow: var(--vd-shadow-lg);
+  --vd-doc-search-results-max-height: 400px;
+  --vd-doc-search-results-radius: var(--vd-input-border-radius);
   
   /* Result Items */
-  --doc-search-result-padding: 0.75rem 1rem;
-  --doc-search-result-hover-bg: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));
-  --doc-search-result-active-bg: var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));
+  --vd-doc-search-result-padding: 0.75rem 1rem;
+  --vd-doc-search-result-hover-bg: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));
+  --vd-doc-search-result-active-bg: var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));
   
   /* Highlight */
-  --doc-search-highlight-bg: var(--vd-color-warning-alpha-30, rgba(250, 176, 5, 0.3));
-  --doc-search-highlight-color: inherit;
+  --vd-doc-search-highlight-bg: var(--vd-color-warning-alpha-30, rgba(250, 176, 5, 0.3));
+  --vd-doc-search-highlight-color: inherit;
   
   /* Shortcut Badge */
-  --doc-search-shortcut-bg: var(--vd-bg-secondary);
-  --doc-search-shortcut-border: var(--vd-border-color);
-  --doc-search-shortcut-color: var(--vd-text-muted);
+  --vd-doc-search-shortcut-bg: var(--vd-bg-secondary);
+  --vd-doc-search-shortcut-border: var(--vd-border-color);
+  --vd-doc-search-shortcut-color: var(--vd-text-muted);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --doc-search-results-bg: var(--vd-bg-secondary);
-  --doc-search-shortcut-bg: var(--vd-bg-tertiary);
+  --vd-doc-search-results-bg: var(--vd-bg-secondary);
+  --vd-doc-search-shortcut-bg: var(--vd-bg-tertiary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --doc-search-results-bg: var(--vd-bg-secondary);
-    --doc-search-shortcut-bg: var(--vd-bg-tertiary);
+    --vd-doc-search-results-bg: var(--vd-bg-secondary);
+    --vd-doc-search-shortcut-bg: var(--vd-bg-tertiary);
   }
 }
 
@@ -88,15 +88,15 @@
 /* Search Input - input.vd-doc-search-input matches forms.css specificity so padding overrides base input[type="search"] */
 input.vd-doc-search-input {
   width: 100%;
-  padding: var(--input-padding-y) var(--input-padding-x);
-  padding-left: var(--doc-search-input-padding-left);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
+  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);
+  padding-left: var(--vd-doc-search-input-padding-left);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-sm);
+  line-height: var(--vd-line-height-normal);
   color: var(--vd-text-primary);
-  background-color: var(--doc-search-input-bg);
-  border: 1px solid var(--doc-search-input-border);
-  border-radius: var(--doc-search-input-radius);
+  background-color: var(--vd-doc-search-input-bg);
+  border: 1px solid var(--vd-doc-search-input-border);
+  border-radius: var(--vd-doc-search-input-radius);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   appearance: none;
 }
@@ -108,7 +108,7 @@ input.vd-doc-search-input {
 
 .vd-doc-search-input:focus {
   outline: none;
-  border-color: var(--doc-search-input-focus-border);
+  border-color: var(--vd-doc-search-input-focus-border);
   box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));
 }
 
@@ -121,19 +121,19 @@ input.vd-doc-search-input {
 /* Keyboard Shortcut Badge */
 .vd-doc-search-shortcut {
   position: absolute;
-  right: var(--doc-search-input-padding-x);
+  right: var(--vd-doc-search-input-padding-x);
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   gap: 0.125rem;
   padding: 0.125rem 0.375rem;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--doc-search-shortcut-color);
-  background-color: var(--doc-search-shortcut-bg);
-  border: 1px solid var(--doc-search-shortcut-border);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
+  color: var(--vd-doc-search-shortcut-color);
+  background-color: var(--vd-doc-search-shortcut-bg);
+  border: 1px solid var(--vd-doc-search-shortcut-border);
   border-radius: 4px;
   pointer-events: none;
   user-select: none;
@@ -156,11 +156,11 @@ input.vd-doc-search-input {
   z-index: 1000;
   display: none;
   margin-top: 0.5rem;
-  background-color: var(--doc-search-results-bg);
-  border: 1px solid var(--doc-search-results-border);
-  border-radius: var(--doc-search-results-radius);
-  box-shadow: var(--doc-search-results-shadow);
-  max-height: var(--doc-search-results-max-height);
+  background-color: var(--vd-doc-search-results-bg);
+  border: 1px solid var(--vd-doc-search-results-border);
+  border-radius: var(--vd-doc-search-results-radius);
+  box-shadow: var(--vd-doc-search-results-shadow);
+  max-height: var(--vd-doc-search-results-max-height);
   overflow-y: auto;
   overflow-x: hidden;
   animation: doc-search-fade-in 0.15s ease;
@@ -185,7 +185,7 @@ input.vd-doc-search-input {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
-  padding: var(--doc-search-result-padding);
+  padding: var(--vd-doc-search-result-padding);
   cursor: pointer;
   transition: background-color 0.1s ease;
   text-decoration: none;
@@ -193,12 +193,12 @@ input.vd-doc-search-input {
 }
 
 .vd-doc-search-result:hover {
-  background-color: var(--doc-search-result-hover-bg);
+  background-color: var(--vd-doc-search-result-hover-bg);
 }
 
 .vd-doc-search-result.is-active,
 .vd-doc-search-result:focus {
-  background-color: var(--doc-search-result-active-bg);
+  background-color: var(--vd-doc-search-result-active-bg);
   outline: none;
 }
 
@@ -223,21 +223,21 @@ input.vd-doc-search-input {
 }
 
 .vd-doc-search-result-title {
-  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);
   line-height: 1.4;
   margin-bottom: 0.125rem;
 }
 
 .vd-doc-search-result-category {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   color: var(--vd-text-muted);
   margin-bottom: 0.25rem;
 }
 
 .vd-doc-search-result-excerpt {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   color: var(--vd-text-secondary);
   line-height: 1.4;
   display: -webkit-box;
@@ -249,8 +249,8 @@ input.vd-doc-search-input {
 /* Highlight matched text */
 .vd-doc-search-result mark,
 .vd-doc-search-highlight {
-  background-color: var(--doc-search-highlight-bg);
-  color: var(--doc-search-highlight-color);
+  background-color: var(--vd-doc-search-highlight-bg);
+  color: var(--vd-doc-search-highlight-color);
   padding: 0 0.125rem;
   border-radius: 2px;
 }
@@ -272,14 +272,14 @@ input.vd-doc-search-input {
 }
 
 .vd-doc-search-empty-title {
-  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);
   margin-bottom: 0.25rem;
 }
 
 .vd-doc-search-empty-text {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   color: var(--vd-text-muted);
 }
 
@@ -320,7 +320,7 @@ input.vd-doc-search-input {
   gap: 1rem;
   padding: 0.5rem 1rem;
   border-top: 1px solid var(--vd-border-color);
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
   color: var(--vd-text-muted);
 }
 
@@ -331,11 +331,11 @@ input.vd-doc-search-input {
   min-width: 1.25rem;
   height: 1.25rem;
   padding: 0 0.25rem;
-  font-family: var(--font-family-sans);
+  font-family: var(--vd-font-family-sans);
   font-size: 0.625rem;
-  font-weight: var(--font-weight-medium);
-  background-color: var(--doc-search-shortcut-bg);
-  border: 1px solid var(--doc-search-shortcut-border);
+  font-weight: var(--vd-font-weight-medium);
+  background-color: var(--vd-doc-search-shortcut-bg);
+  border: 1px solid var(--vd-doc-search-shortcut-border);
   border-radius: 3px;
 }
 
@@ -415,7 +415,7 @@ input.vd-doc-search-input {
   }
   
   input.vd-doc-search-input {
-    padding-right: var(--doc-search-input-padding-x);
+    padding-right: var(--vd-doc-search-input-padding-x);
     min-height: 44px;
   }
   

package/css/components/doc-tabs.css

@@ -16,7 +16,7 @@
     gap: 0.4rem;
     padding: 0.6rem 1rem;
     border: 1px solid var(--vd-border-color);
-    border-radius: var(--btn-border-radius);
+    border-radius: var(--vd-btn-border-radius);
     background: var(--vd-bg-secondary);
     color: var(--vd-text-primary);
     text-decoration: none;