vanduo-framework 1.1.8

package/css/components/draggable.css

@@ -0,0 +1,317 @@
+/**
+ * Vanduo Framework - Draggable Component
+ * CSS styles for draggable elements and drop zones
+ */
+
+:root {
+  /* Draggable Colors */
+  --draggable-bg: var(--color-white);
+  --draggable-border-color: var(--border-color);
+  --draggable-hover-bg: var(--bg-secondary);
+  --draggable-hover-border-color: var(--color-primary);
+  --draggable-dragging-bg: var(--bg-secondary);
+  --draggable-dragging-border-color: var(--color-primary);
+  --draggable-dragging-shadow: var(--shadow-lg);
+  
+  /* Drop Zone Colors */
+  --drop-zone-bg: var(--color-primary-alpha-5);
+  --drop-zone-border-color: var(--color-primary-alpha-30);
+  --drop-zone-hover-bg: var(--color-primary-alpha-10);
+  --drop-zone-hover-border-color: var(--color-primary);
+  --drop-zone-active-bg: var(--color-primary-alpha-15);
+  --drop-zone-active-border-color: var(--color-primary);
+  
+  /* Spacing */
+  --draggable-padding: 0.8125rem; /* 13px - fib */
+  --draggable-margin: 0.5rem; /* 8px - fib */
+  --drop-zone-padding: 1.3125rem; /* 21px - fib */
+  
+  /* Transitions */
+  --draggable-transition: all var(--transition-duration-base) var(--transition-ease);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --draggable-bg: var(--bg-secondary);
+  --draggable-hover-bg: var(--bg-primary);
+  --draggable-dragging-bg: var(--bg-primary);
+  --drop-zone-bg: var(--color-primary-alpha-10);
+  --drop-zone-border-color: var(--color-primary-alpha-40);
+  --drop-zone-hover-bg: var(--color-primary-alpha-15);
+  --drop-zone-active-bg: var(--color-primary-alpha-20);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --draggable-bg: var(--bg-secondary);
+    --draggable-hover-bg: var(--bg-primary);
+    --draggable-dragging-bg: var(--bg-primary);
+    --drop-zone-bg: var(--color-primary-alpha-10);
+    --drop-zone-border-color: var(--color-primary-alpha-40);
+    --drop-zone-hover-bg: var(--color-primary-alpha-15);
+    --drop-zone-active-bg: var(--color-primary-alpha-20);
+  }
+}
+
+/* Base Draggable Element */
+.vd-draggable {
+  position: relative;
+  display: inline-block;
+  padding: var(--draggable-padding);
+  margin: var(--draggable-margin);
+  background-color: var(--draggable-bg);
+  border: 1px solid var(--draggable-border-color);
+  border-radius: var(--btn-border-radius);
+  cursor: grab;
+  user-select: none;
+  transition: var(--draggable-transition);
+  touch-action: none;
+}
+
+.vd-draggable:hover {
+  background-color: var(--draggable-hover-bg);
+  border-color: var(--draggable-hover-border-color);
+}
+
+.vd-draggable:active {
+  cursor: grabbing;
+}
+
+.vd-draggable[draggable="true"] {
+  cursor: grab;
+}
+
+.vd-draggable[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+/* Dragging State */
+.vd-draggable.is-dragging {
+  opacity: 0.7;
+  transform: scale(1.02);
+  background-color: var(--draggable-dragging-bg);
+  border-color: var(--draggable-dragging-border-color);
+  box-shadow: var(--draggable-dragging-shadow);
+  cursor: grabbing;
+  z-index: 1000;
+}
+
+/* Draggable Handle */
+.vd-draggable-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+  margin-right: 0.5rem; /* 8px */
+  color: var(--text-muted);
+  cursor: grab;
+  transition: var(--draggable-transition);
+}
+
+.vd-draggable-handle:hover {
+  color: var(--text-primary);
+}
+
+.vd-draggable:active .vd-draggable-handle {
+  cursor: grabbing;
+}
+
+/* Drop Zone */
+.vd-drop-zone {
+  position: relative;
+  min-height: 3rem; /* 48px */
+  padding: var(--drop-zone-padding);
+  margin: var(--draggable-margin);
+  background-color: var(--drop-zone-bg);
+  border: 2px dashed var(--drop-zone-border-color);
+  border-radius: var(--btn-border-radius);
+  transition: var(--draggable-transition);
+}
+
+.vd-drop-zone:hover {
+  background-color: var(--drop-zone-hover-bg);
+  border-color: var(--drop-zone-hover-border-color);
+}
+
+.vd-drop-zone.is-drag-over {
+  background-color: var(--drop-zone-active-bg);
+  border-color: var(--drop-zone-active-border-color);
+  border-style: solid;
+  transform: scale(1.01);
+}
+
+/* Empty drop zone placeholder */
+.vd-drop-zone:empty::after {
+  content: 'Drag items here';
+  display: block;
+  text-align: center;
+  padding: 1rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.vd-drop-zone.is-drag-over::before {
+  content: 'Drop here';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary);
+  pointer-events: none;
+}
+
+/* Draggable Container */
+.vd-draggable-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--draggable-margin);
+  padding: var(--draggable-padding);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--btn-border-radius);
+}
+
+.vd-draggable-container.vd-draggable-container-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* Draggable Item */
+.vd-draggable-item {
+  flex: 0 0 auto;
+  min-width: 8rem; /* 128px */
+  padding: var(--draggable-padding);
+  background-color: var(--draggable-bg);
+  border: 1px solid var(--draggable-border-color);
+  border-radius: var(--btn-border-radius);
+  cursor: grab;
+  transition: var(--draggable-transition);
+}
+
+.vd-draggable-item:hover {
+  background-color: var(--draggable-hover-bg);
+  border-color: var(--draggable-hover-border-color);
+}
+
+.vd-draggable-item.is-dragging {
+  opacity: 0.7;
+  transform: scale(1.02);
+  background-color: var(--draggable-dragging-bg);
+  border-color: var(--draggable-dragging-border-color);
+  box-shadow: var(--draggable-dragging-shadow);
+  cursor: grabbing;
+  z-index: 1000;
+}
+
+.vd-draggable-item:active {
+  cursor: grabbing;
+}
+
+/* Keyboard-activated grab state (via aria-grabbed) */
+.vd-draggable[aria-grabbed="true"],
+.vd-draggable-item[aria-grabbed="true"] {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  background-color: var(--draggable-dragging-bg);
+  border-color: var(--draggable-dragging-border-color);
+}
+
+/* Drag Feedback */
+.vd-drag-feedback {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.9;
+  transform: scale(0.8);
+  transition: opacity 0.2s ease;
+}
+
+.vd-drag-feedback.hidden {
+  opacity: 0;
+}
+
+/* Disabled State */
+.vd-draggable.is-disabled,
+.vd-draggable[disabled],
+.vd-draggable-item.is-disabled,
+.vd-draggable-item[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Responsive Behavior */
+@media (max-width: 575.98px) {
+  .vd-draggable-container {
+    padding: 0.5rem; /* 8px */
+  }
+  
+  .vd-draggable-item {
+    min-width: 100%;
+  }
+  
+  .vd-draggable {
+    display: block;
+    margin: 0.5rem 0;
+  }
+  
+  .vd-drop-zone {
+    padding: 1rem; /* 16px */
+    min-height: 2.5rem; /* 40px */
+  }
+}
+
+/* Accessibility */
+.vd-draggable:focus-visible,
+.vd-draggable-item:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Animation for dropping */
+@keyframes vd-drag-drop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.vd-draggable.is-dropped,
+.vd-draggable-item.is-dropped {
+  animation: vd-drag-drop 0.3s ease;
+}
+
+/* High Contrast / Forced Colors Mode */
+@media (forced-colors: active) {
+  .vd-draggable,
+  .vd-draggable-item {
+    border: 2px solid ButtonText;
+  }
+
+  .vd-draggable.is-dragging,
+  .vd-draggable-item.is-dragging {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+  }
+
+  .vd-drop-zone {
+    border: 2px dashed ButtonText;
+  }
+
+  .vd-drop-zone.is-drag-over {
+    border-color: Highlight;
+    border-style: solid;
+  }
+
+  .vd-draggable:focus-visible,
+  .vd-draggable-item:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}

package/css/components/dropdown.css

@@ -0,0 +1,266 @@
+/**
+ * Vanduo Framework - Dropdown
+ * Dropdown menu component
+ */
+
+:root {
+  /* Dropdown Colors */
+  --dropdown-bg: var(--color-white);
+  --dropdown-border-color: var(--border-color);
+  --dropdown-item-color: var(--text-primary);
+  --dropdown-item-hover-bg: var(--bg-secondary);
+  --dropdown-item-hover-color: var(--text-primary);
+  --dropdown-item-active-bg: var(--color-primary-alpha-10);
+  --dropdown-item-active-color: var(--color-primary);
+  --dropdown-item-disabled-color: var(--text-muted);
+  
+  /* Dropdown Spacing (Fibonacci) */
+  --dropdown-padding-y: 0.5rem;          /* 8px - fib */
+  --dropdown-padding-x: 0;
+  --dropdown-item-padding-y: 0.5rem;     /* 8px  - fib */
+  --dropdown-item-padding-x: 0.8125rem;  /* 13px - fib */
+  --dropdown-header-padding-y: 0.5rem;   /* 8px  - fib */
+  --dropdown-header-padding-x: 0.8125rem;/* 13px - fib */
+
+  /* Dropdown Z-index */
+  --dropdown-z-index: 1000;
+
+  /* Dropdown Min Width */
+  --dropdown-min-width: 13rem; /* ~208px, Fibonacci-inspired */
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --dropdown-bg: var(--bg-secondary);
+  --dropdown-item-hover-bg: var(--bg-primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --dropdown-bg: var(--bg-secondary);
+    --dropdown-item-hover-bg: var(--bg-primary);
+  }
+}
+
+/* Base Dropdown */
+.vd-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Toggle */
+.vd-dropdown-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+}
+
+.vd-dropdown-toggle::after {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 0.5rem;
+  vertical-align: 0.255em;
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+  transition: transform var(--transition-duration-base) var(--transition-ease);
+}
+
+.vd-dropdown.is-open .vd-dropdown-toggle::after {
+  transform: rotate(180deg);
+}
+
+/* Dropdown Menu */
+.vd-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--dropdown-z-index);
+  display: none;
+  min-width: var(--dropdown-min-width);
+  padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
+  margin: 0.125rem 0 0;
+  background-color: var(--dropdown-bg);
+  border: 1px solid var(--dropdown-border-color);
+  border-radius: var(--btn-border-radius);
+  box-shadow: var(--shadow-lg);
+  list-style: none;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity var(--transition-duration-base) var(--transition-ease),
+              transform var(--transition-duration-base) var(--transition-ease);
+}
+
+.vd-dropdown-menu.is-open {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Dropdown Menu Positioning - Top */
+.vd-dropdown-menu-top {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.125rem;
+  transform: translateY(10px);
+}
+
+.vd-dropdown-menu-top.is-open {
+  transform: translateY(0);
+}
+
+/* Dropdown Menu Positioning - Right */
+.vd-dropdown-menu-right {
+  left: auto;
+  right: 0;
+}
+
+/* Dropdown Menu Positioning - Left */
+.vd-dropdown-menu-left {
+  left: auto;
+  right: 0;
+}
+
+/* Dropdown Item */
+.vd-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+  clear: both;
+  font-weight: var(--font-weight-normal);
+  color: var(--dropdown-item-color);
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: var(--transition-bg);
+  user-select: none;
+}
+
+.vd-dropdown-item:hover,
+.vd-dropdown-item:focus {
+  color: var(--dropdown-item-hover-color);
+  background-color: var(--dropdown-item-hover-bg);
+  text-decoration: none;
+}
+
+.vd-dropdown-item:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.vd-dropdown-item.active,
+.vd-dropdown-item.is-active {
+  color: var(--dropdown-item-active-color);
+  background-color: var(--dropdown-item-active-bg);
+  font-weight: var(--font-weight-medium);
+}
+
+.vd-dropdown-item.disabled,
+.vd-dropdown-item.is-disabled {
+  color: var(--dropdown-item-disabled-color);
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Dropdown Divider */
+.vd-dropdown-divider {
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid var(--dropdown-border-color);
+}
+
+/* Dropdown Header */
+.vd-dropdown-header {
+  display: block;
+  padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
+  margin-bottom: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Dropdown Menu Alignment */
+.vd-dropdown-menu-start {
+  left: 0;
+  right: auto;
+}
+
+.vd-dropdown-menu-end {
+  left: auto;
+  right: 0;
+}
+
+/* Dropdown Sizes */
+.vd-dropdown-sm .vd-dropdown-menu {
+  min-width: 8rem;
+  font-size: var(--font-size-sm);
+}
+
+.vd-dropdown-sm .vd-dropdown-item {
+  padding: calc(var(--dropdown-item-padding-y) * 0.75) calc(var(--dropdown-item-padding-x) * 0.75);
+}
+
+.vd-dropdown-lg .vd-dropdown-menu {
+  min-width: 15rem;
+  font-size: var(--font-size-lg);
+}
+
+.vd-dropdown-lg .vd-dropdown-item {
+  padding: calc(var(--dropdown-item-padding-y) * 1.25) calc(var(--dropdown-item-padding-x) * 1.25);
+}
+
+/* Dropdown with Button Toggle */
+.vd-btn + .vd-dropdown-menu,
+.vd-dropdown-toggle.vd-btn + .vd-dropdown-menu {
+  margin-top: 0.125rem;
+}
+
+/* Nested Dropdown (Submenu) */
+.vd-dropdown-submenu {
+  position: relative;
+}
+
+.vd-dropdown-submenu > .vd-dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: 0;
+  margin-left: 0.125rem;
+}
+
+.vd-dropdown-submenu > .vd-dropdown-item::after {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: auto;
+  margin-right: -0.5rem;
+  vertical-align: 0.255em;
+  border-top: 0.3em solid transparent;
+  border-right: 0;
+  border-bottom: 0.3em solid transparent;
+  border-left: 0.3em solid;
+}
+
+/* Responsive Behavior */
+@media (max-width: 575.98px) {
+  .vd-dropdown-menu {
+    min-width: 100%;
+    left: 0 !important;
+    right: 0 !important;
+  }
+}
+