@vanduo-oss/framework 1.2.6 → 1.2.8

package/css/components/timepicker.css

@@ -0,0 +1,80 @@
+/**
+ * Vanduo Framework - Timepicker
+ * Dropdown time selection with 12h/24h format
+ */
+
+:root {
+  --tp-bg: var(--card-bg, #fff);
+  --tp-border-color: var(--border-color, #dee2e6);
+  --tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12);
+  --tp-item-hover-bg: var(--bg-secondary, #f8f9fa);
+  --tp-item-selected-bg: var(--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;
+}
+
+[data-theme="dark"] {
+  --tp-bg: var(--card-bg, #2d2d44);
+  --tp-border-color: var(--border-color, #3d3d5c);
+  --tp-item-hover-bg: var(--bg-primary, #1a1a2e);
+  --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(--border-color, #3d3d5c);
+    --tp-item-hover-bg: var(--bg-primary, #1a1a2e);
+    --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);
+  overflow-y: auto;
+  display: none;
+  min-width: 8rem;
+}
+
+.vd-timepicker-popup.is-open {
+  display: block;
+}
+
+/* ========== Time Items ========== */
+
+.vd-timepicker-item {
+  padding: var(--tp-item-padding);
+  cursor: pointer;
+  font-size: 0.875rem;
+  text-align: center;
+  transition: background 0.15s ease;
+  font-variant-numeric: tabular-nums;
+}
+
+.vd-timepicker-item:hover {
+  background: var(--tp-item-hover-bg);
+}
+
+.vd-timepicker-item.is-selected {
+  background: var(--tp-item-selected-bg);
+  color: var(--tp-item-selected-color);
+  font-weight: 600;
+}
+
+.vd-timepicker-item.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/css/components/transfer.css

@@ -0,0 +1,165 @@
+/**
+ * Vanduo Framework - Transfer (Dual-list)
+ * Source/target list transfer panel
+ */
+
+:root {
+  --transfer-bg: var(--card-bg, #fff);
+  --transfer-border-color: var(--border-color, #dee2e6);
+  --transfer-item-hover-bg: var(--bg-secondary, #f8f9fa);
+  --transfer-item-selected-bg: var(--color-primary-alpha-10, rgba(13, 110, 253, 0.1));
+  --transfer-header-bg: var(--bg-secondary, #f8f9fa);
+  --transfer-padding: 0.5rem;
+  --transfer-list-height: 15rem;
+  --transfer-border-radius: var(--border-radius, 0.5rem);
+  --transfer-gap: 0.8125rem; /* 13px - fib */
+}
+
+[data-theme="dark"] {
+  --transfer-bg: var(--card-bg, #2d2d44);
+  --transfer-border-color: var(--border-color, #3d3d5c);
+  --transfer-item-hover-bg: var(--bg-primary, #1a1a2e);
+  --transfer-header-bg: var(--bg-primary, #1a1a2e);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --transfer-bg: var(--card-bg, #2d2d44);
+    --transfer-border-color: var(--border-color, #3d3d5c);
+    --transfer-item-hover-bg: var(--bg-primary, #1a1a2e);
+    --transfer-header-bg: var(--bg-primary, #1a1a2e);
+  }
+}
+
+/* ========== Layout ========== */
+
+.vd-transfer {
+  display: flex;
+  align-items: stretch;
+  gap: var(--transfer-gap);
+}
+
+.vd-transfer-panel {
+  flex: 1;
+  border: 1px solid var(--transfer-border-color);
+  border-radius: var(--transfer-border-radius);
+  background: var(--transfer-bg);
+  display: flex;
+  flex-direction: column;
+  min-width: 10rem;
+}
+
+/* ========== Panel Header ========== */
+
+.vd-transfer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--transfer-padding) 0.8125rem;
+  background: var(--transfer-header-bg);
+  border-bottom: 1px solid var(--transfer-border-color);
+  border-radius: var(--transfer-border-radius) var(--transfer-border-radius) 0 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.vd-transfer-count {
+  font-weight: 400;
+  color: var(--text-muted, #6c757d);
+}
+
+/* ========== Search ========== */
+
+.vd-transfer-search {
+  padding: var(--transfer-padding);
+  border-bottom: 1px solid var(--transfer-border-color);
+}
+
+.vd-transfer-search input {
+  width: 100%;
+  padding: 0.3125rem 0.5rem;
+  border: 1px solid var(--transfer-border-color);
+  border-radius: 0.25rem;
+  font-size: 0.8125rem;
+  background: var(--transfer-bg);
+  color: var(--text-primary, #212529);
+}
+
+/* ========== List ========== */
+
+.vd-transfer-list {
+  flex: 1;
+  overflow-y: auto;
+  max-height: var(--transfer-list-height);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.vd-transfer-item {
+  display: flex;
+  align-items: center;
+  padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.15s ease;
+  gap: 0.5rem;
+}
+
+.vd-transfer-item:hover {
+  background: var(--transfer-item-hover-bg);
+}
+
+.vd-transfer-item.is-selected {
+  background: var(--transfer-item-selected-bg);
+}
+
+.vd-transfer-item input[type="checkbox"] {
+  margin: 0;
+}
+
+/* ========== Actions ========== */
+
+.vd-transfer-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3125rem; /* 5px - fib */
+}
+
+.vd-transfer-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--transfer-border-color);
+  border-radius: 0.25rem;
+  background: var(--transfer-bg);
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.15s ease;
+  padding: 0;
+}
+
+.vd-transfer-btn:hover {
+  background: var(--transfer-item-hover-bg);
+}
+
+.vd-transfer-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ========== Responsive ========== */
+
+@media (max-width: 576px) {
+  .vd-transfer {
+    flex-direction: column;
+  }
+
+  .vd-transfer-actions {
+    flex-direction: row;
+  }
+}

package/css/components/tree.css

@@ -0,0 +1,173 @@
+/**
+ * Vanduo Framework - Tree View
+ * Hierarchical collapsible tree structure with checkbox selection
+ */
+
+:root {
+  --tree-indent: 1.3125rem;     /* 21px - fib */
+  --tree-line-color: var(--border-color, #dee2e6);
+  --tree-line-width: 1px;
+  --tree-item-padding: 0.25rem 0.3125rem; /* 4px 5px */
+  --tree-item-hover-bg: var(--bg-secondary, #f8f9fa);
+  --tree-icon-size: 1rem;
+  --tree-toggle-size: 1.125rem;
+}
+
+[data-theme="dark"] {
+  --tree-line-color: var(--color-gray-600, #6c757d);
+  --tree-item-hover-bg: var(--bg-primary, #1a1a2e);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --tree-line-color: var(--color-gray-600, #6c757d);
+    --tree-item-hover-bg: var(--bg-primary, #1a1a2e);
+  }
+}
+
+/* ========== Base ========== */
+
+.vd-tree {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.vd-tree .vd-tree {
+  padding-left: var(--tree-indent);
+}
+
+/* ========== Node ========== */
+
+.vd-tree-node {
+  position: relative;
+}
+
+.vd-tree-node-content {
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem; /* 5px - fib */
+  padding: var(--tree-item-padding);
+  border-radius: 0.25rem;
+  cursor: default;
+  font-size: 0.875rem;
+  transition: background 0.15s ease;
+}
+
+.vd-tree-node-content:hover {
+  background: var(--tree-item-hover-bg);
+}
+
+/* ========== Toggle ========== */
+
+.vd-tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tree-toggle-size);
+  height: var(--tree-toggle-size);
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: 0.625rem;
+  color: var(--text-muted, #6c757d);
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.vd-tree-toggle::before {
+  content: '\25B6'; /* right-pointing triangle */
+}
+
+.vd-tree-node.is-open > .vd-tree-node-content .vd-tree-toggle {
+  transform: rotate(90deg);
+}
+
+/* Placeholder for leaf nodes (no children) */
+.vd-tree-toggle-placeholder {
+  width: var(--tree-toggle-size);
+  flex-shrink: 0;
+}
+
+/* ========== Checkbox ========== */
+
+.vd-tree-checkbox {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* ========== Icon ========== */
+
+.vd-tree-icon {
+  font-size: var(--tree-icon-size);
+  flex-shrink: 0;
+  color: var(--text-muted, #6c757d);
+}
+
+.vd-tree-node.is-open > .vd-tree-node-content .vd-tree-icon-folder::before {
+  content: '\1F4C2'; /* open folder */
+}
+
+.vd-tree-icon-folder::before {
+  content: '\1F4C1'; /* closed folder */
+}
+
+.vd-tree-icon-file::before {
+  content: '\1F4C4'; /* file */
+}
+
+/* ========== Label ========== */
+
+.vd-tree-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-tree-node.is-selected > .vd-tree-node-content .vd-tree-label {
+  font-weight: 600;
+  color: var(--color-primary, #0d6efd);
+}
+
+/* ========== Children Container ========== */
+
+.vd-tree-children {
+  display: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  padding-left: var(--tree-indent);
+}
+
+.vd-tree-node.is-open > .vd-tree-children {
+  display: block;
+}
+
+/* ========== Connection Lines ========== */
+
+.vd-tree-lines .vd-tree-children {
+  position: relative;
+}
+
+.vd-tree-lines .vd-tree-children::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: calc(var(--tree-toggle-size) / 2);
+  bottom: 0.75rem;
+  width: var(--tree-line-width);
+  background: var(--tree-line-color);
+}
+
+.vd-tree-lines .vd-tree-children .vd-tree-node::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: calc(var(--tree-toggle-size) / 2 - var(--tree-indent));
+  width: 0.5rem;
+  height: var(--tree-line-width);
+  background: var(--tree-line-color);
+}

package/css/components/waypoint.css

@@ -0,0 +1,59 @@
+/**
+ * Vanduo Framework - Waypoint (Scrollspy)
+ * Scroll-position-aware navigation highlighting
+ * Primary: .vd-waypoint | Alias: .vd-scrollspy
+ */
+
+:root {
+  /* Waypoint active indicator */
+  --waypoint-active-color: var(--color-primary, #0d6efd);
+  --waypoint-active-bg: transparent;
+  --waypoint-active-border-width: 2px;
+  --waypoint-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+[data-theme="dark"] {
+  --waypoint-active-color: var(--color-primary-light, #6ea8fe);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --waypoint-active-color: var(--color-primary-light, #6ea8fe);
+  }
+}
+
+/* ========== Nav Link Active State ========== */
+
+[data-vd-waypoint-nav] a.is-active,
+[data-vd-scrollspy-nav] a.is-active,
+.vd-waypoint-nav a.is-active {
+  color: var(--waypoint-active-color);
+  font-weight: 600;
+  transition: var(--waypoint-transition);
+}
+
+/* Sidebar variant: left border indicator */
+.vd-sidenav [data-vd-waypoint-nav] a.is-active,
+.vd-waypoint-nav.vd-waypoint-border a.is-active {
+  border-left: var(--waypoint-active-border-width) solid var(--waypoint-active-color);
+  padding-left: calc(0.8125rem - var(--waypoint-active-border-width)); /* 13px - border */
+}
+
+/* Pill variant */
+.vd-waypoint-nav.vd-waypoint-pill a.is-active {
+  background-color: var(--waypoint-active-color);
+  color: #fff;
+  border-radius: 1rem;
+  padding: 0.25rem 0.8125rem; /* 4px 13px */
+}
+
+/* Underline variant (for horizontal navs) */
+.vd-waypoint-nav.vd-waypoint-underline a.is-active {
+  border-bottom: var(--waypoint-active-border-width) solid var(--waypoint-active-color);
+}
+
+/* ========== Smooth Scroll Target ========== */
+
+[data-vd-waypoint-section] {
+  scroll-margin-top: 5rem; /* offset for fixed headers */
+}

package/css/vanduo.css

@@ -79,5 +79,22 @@
 /* Components - Phase 9 (New) */
 @import url('components/draggable.css');
 
+/* Components - Phase 10 (v1.2.7) */
+@import url('components/flow.css');
+@import url('components/bubble.css');
+@import url('components/waypoint.css');
+@import url('components/ripple.css');
+@import url('components/fab.css');
+@import url('components/affix.css');
+@import url('components/suggest.css');
+@import url('components/datepicker.css');
+@import url('components/timepicker.css');
+@import url('components/stepper.css');
+@import url('components/timeline.css');
+@import url('components/rating.css');
+@import url('components/transfer.css');
+@import url('components/tree.css');
+@import url('components/spotlight.css');
+
 /* Print Styles */
 @import url('utilities/print.css');

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.2.6",
-  "builtAt": "2026-03-11T06:15:19.191Z",
-  "commit": "3283a0d",
+  "version": "1.2.8",
+  "builtAt": "2026-03-14T13:35:54.636Z",
+  "commit": "f306379",
   "mode": "development+production"
 }