vanduo-framework 1.1.8-docs-update

package/css/components/navbar.css

@@ -0,0 +1,530 @@
+/**
+ * Vanduo Framework - Navbar
+ * Navigation bar component with responsive mobile menu
+ */
+
+:root {
+  /* Navbar Colors */
+  --navbar-bg: var(--color-white);
+  --navbar-bg-dark: var(--bg-dark);
+  --navbar-text-color: var(--text-primary);
+  --navbar-text-color-dark: var(--text-inverse);
+  --navbar-link-color: var(--text-primary);
+  --navbar-link-hover-color: var(--color-primary);
+  --navbar-link-active-color: var(--color-primary);
+  --navbar-border-color: var(--border-color);
+  
+  /* Navbar Spacing (Fibonacci) */
+  --navbar-padding-y: 0.8125rem;   /* 13px - fib */
+  --navbar-padding-x: 1.3125rem;   /* 21px - fib (21/13 ~ phi) */
+  --navbar-height: 3.4375rem;      /* 55px - fib */
+  --navbar-brand-font-size: var(--font-size-xl);
+  --navbar-nav-gap: 1.3125rem;     /* 21px - fib */
+  --navbar-actions-gap: 2.125rem;  /* 34px - fib */
+
+  /* Mobile Menu */
+  --navbar-mobile-menu-bg: var(--color-white);
+  --navbar-mobile-menu-bg-dark: var(--bg-dark);
+  --navbar-mobile-menu-width: 233px; /* fib */
+  --navbar-mobile-overlay-bg: rgba(0, 0, 0, 0.5);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --navbar-bg: var(--bg-primary);
+  --navbar-text-color: var(--text-primary);
+  --navbar-link-color: var(--text-primary);
+  --navbar-mobile-menu-bg: var(--bg-primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --navbar-bg: var(--bg-primary);
+    --navbar-text-color: var(--text-primary);
+    --navbar-link-color: var(--text-primary);
+    --navbar-mobile-menu-bg: var(--bg-primary);
+  }
+}
+
+/* Base Navbar */
+.vd-navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--navbar-padding-y) var(--navbar-padding-x);
+  background-color: var(--navbar-bg);
+  border-bottom: 1px solid var(--navbar-border-color);
+  min-height: var(--navbar-height);
+}
+
+/* Navbar Container - matches .vd-container-responsive breakpoints for alignment with page content */
+.vd-navbar-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: var(--container-max-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--container-padding);
+  padding-right: var(--container-padding);
+}
+
+@media (min-width: 1200px) {
+  .vd-navbar-container {
+    max-width: var(--container-xl);
+  }
+}
+
+@media (min-width: 1400px) {
+  .vd-navbar-container {
+    max-width: var(--container-2xl);
+  }
+}
+
+/* Navbar Brand */
+.vd-navbar-brand {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 1rem;
+  margin-bottom: 0.5rem;
+  font-size: var(--navbar-brand-font-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--navbar-text-color);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.vd-navbar-brand a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: inherit;
+}
+
+.vd-navbar-brand:hover,
+.vd-navbar-brand:focus {
+  color: var(--navbar-link-hover-color);
+  text-decoration: none;
+}
+
+.vd-navbar-brand img {
+  height: 2rem;
+  width: auto;
+  margin-right: 0.5rem;
+}
+
+/* Navbar Navigation */
+.vd-navbar-nav {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  gap: 0;
+}
+
+.vd-navbar-nav .vd-nav-link {
+  padding: 0.5rem 1rem;
+  color: var(--navbar-link-color);
+  text-decoration: none;
+  transition: color 0.2s ease, background-color 0.2s ease;
+  display: block;
+}
+
+.vd-navbar-nav .vd-nav-link:hover,
+.vd-navbar-nav .vd-nav-link:focus {
+  color: var(--navbar-link-hover-color);
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.vd-navbar-nav .vd-nav-link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.vd-navbar-nav .vd-nav-link.active {
+  color: var(--navbar-link-active-color);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Navbar Toggle (Hamburger Menu) */
+.vd-navbar-toggle,
+.vd-navbar-burger {
+  display: none;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 2rem;
+  height: 2rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 1001;
+}
+
+.vd-navbar-toggle span,
+.vd-navbar-burger span {
+  width: 2rem;
+  height: 2px;
+  background-color: var(--navbar-text-color);
+  border-radius: 10px;
+  transition: all 0.3s ease;
+  transform-origin: center;
+}
+
+.vd-navbar-toggle.is-active span:nth-child(1),
+.vd-navbar-burger.is-active span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.vd-navbar-toggle.is-active span:nth-child(2),
+.vd-navbar-burger.is-active span:nth-child(2) {
+  opacity: 0;
+}
+
+.vd-navbar-toggle.is-active span:nth-child(3),
+.vd-navbar-burger.is-active span:nth-child(3) {
+  transform: rotate(-45deg) translate(7px, -6px);
+}
+
+/* Mobile Menu */
+.vd-navbar-menu {
+  display: flex;
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.vd-navbar-menu.is-open {
+  display: flex;
+}
+
+/* Navbar Actions */
+.vd-navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Mobile Menu Overlay */
+.vd-navbar-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--navbar-mobile-overlay-bg);
+  z-index: 999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.vd-navbar-overlay.is-active {
+  display: block;
+  opacity: 1;
+}
+
+/* Navbar Variants - Dark */
+.vd-navbar-dark {
+  background-color: var(--navbar-bg-dark);
+  color: var(--navbar-text-color-dark);
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.vd-navbar-dark .vd-navbar-brand {
+  color: var(--navbar-text-color-dark);
+}
+
+.vd-navbar-dark .vd-navbar-brand:hover,
+.vd-navbar-dark .vd-navbar-brand:focus {
+  color: var(--color-primary-light);
+}
+
+.vd-navbar-dark .vd-navbar-nav .vd-nav-link {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.vd-navbar-dark .vd-navbar-nav .vd-nav-link:hover,
+.vd-navbar-dark .vd-navbar-nav .vd-nav-link:focus {
+  color: var(--color-primary-light);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.vd-navbar-dark .vd-navbar-nav .vd-nav-link.active {
+  color: var(--color-primary-light);
+}
+
+.vd-navbar-dark .vd-navbar-toggle span,
+.vd-navbar-dark .vd-navbar-burger span {
+  background-color: var(--navbar-text-color-dark);
+}
+
+/* Navbar Variants - Transparent */
+.vd-navbar-transparent {
+  background-color: transparent;
+  border-bottom: none;
+}
+
+.vd-navbar-transparent.vd-navbar-scrolled {
+  background-color: var(--navbar-bg);
+  border-bottom: 1px solid var(--navbar-border-color);
+}
+
+.vd-navbar-transparent.vd-navbar-dark.vd-navbar-scrolled {
+  background-color: var(--navbar-bg-dark);
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Navbar Positioning - Fixed Top */
+.vd-navbar-fixed,
+.vd-navbar-fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: var(--shadow-sm);
+}
+
+.vd-navbar-fixed ~ *,
+.vd-navbar-fixed-top ~ * {
+  padding-top: var(--navbar-height);
+}
+
+/* Navbar Positioning - Fixed Bottom */
+.vd-navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.vd-navbar-fixed-bottom ~ * {
+  padding-bottom: var(--navbar-height);
+}
+
+/* Navbar Positioning - Sticky */
+.vd-navbar-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: var(--shadow-sm);
+}
+
+/* Navbar Dropdown */
+.vd-navbar-dropdown {
+  position: relative;
+}
+
+.vd-navbar-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  min-width: 200px;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  background-color: var(--color-white);
+  border: 1px solid var(--navbar-border-color);
+  border-radius: var(--btn-border-radius);
+  box-shadow: var(--shadow-md);
+  list-style: none;
+}
+
+.vd-navbar-dropdown-menu.is-open {
+  display: block;
+}
+
+.vd-navbar-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  clear: both;
+  font-weight: var(--font-weight-normal);
+  color: var(--navbar-link-color);
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.vd-navbar-dropdown-item:hover,
+.vd-navbar-dropdown-item:focus {
+  color: var(--navbar-link-hover-color);
+  background-color: var(--bg-secondary);
+  text-decoration: none;
+}
+
+.vd-navbar-dropdown-item.active {
+  color: var(--navbar-link-active-color);
+  background-color: var(--color-primary-alpha-10);
+}
+
+.vd-navbar-dark .vd-navbar-dropdown-menu {
+  background-color: var(--navbar-bg-dark);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.vd-navbar-dark .vd-navbar-dropdown-item {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.vd-navbar-dark .vd-navbar-dropdown-item:hover,
+.vd-navbar-dark .vd-navbar-dropdown-item:focus {
+  color: var(--color-primary-light);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Desktop Layout */
+@media (min-width: 992px) {
+  .vd-navbar-container {
+    position: relative;
+  }
+
+  .vd-navbar-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem var(--navbar-nav-gap);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+
+  .vd-navbar-nav .vd-nav-link {
+    padding: 0.5rem 0;
+    background-color: transparent;
+  }
+
+  .vd-navbar-nav .vd-nav-link:hover,
+  .vd-navbar-nav .vd-nav-link:focus {
+    background-color: transparent;
+  }
+
+  .vd-navbar-toggle,
+  .vd-navbar-burger {
+    display: none;
+  }
+
+  .vd-navbar-menu {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 0;
+  }
+
+  .vd-navbar-actions {
+    margin-left: var(--navbar-actions-gap);
+  }
+
+  .vd-navbar-dropdown-menu {
+    margin-top: 0.5rem;
+  }
+}
+
+/* Mobile Layout */
+@media (max-width: 991.98px) {
+  .vd-navbar-toggle,
+  .vd-navbar-burger {
+    display: flex;
+  }
+  
+  .vd-navbar-menu {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: var(--navbar-mobile-menu-width);
+    height: 100vh;
+    background-color: var(--navbar-mobile-menu-bg);
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 4rem 1.5rem 1.5rem;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+    transition: right 0.3s ease;
+    z-index: 1000;
+    overflow-y: auto;
+  }
+  
+  .vd-navbar-menu.is-open {
+    right: 0;
+  }
+  
+  .vd-navbar-dark .vd-navbar-menu {
+    background-color: var(--navbar-mobile-menu-bg-dark);
+  }
+  
+  .vd-navbar-nav {
+    width: 100%;
+    gap: 0;
+  }
+  
+  .vd-navbar-nav .vd-nav-link {
+    width: 100%;
+    padding: 1rem;
+    border-bottom: 1px solid var(--navbar-border-color);
+  }
+  
+  .vd-navbar-nav .vd-nav-link:last-child {
+    border-bottom: none;
+  }
+  
+  .vd-navbar-dark .vd-navbar-nav .vd-nav-link {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .vd-navbar-dropdown-menu {
+    position: static;
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    background-color: var(--bg-secondary);
+  }
+  
+  .vd-navbar-dark .vd-navbar-dropdown-menu {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  
+  .vd-navbar-actions {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--navbar-border-color);
+    width: 100%;
+  }
+  
+  .vd-navbar-dark .vd-navbar-actions {
+    border-top-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+/* Navbar Utilities */
+.vd-navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.vd-navbar-expand .vd-navbar-nav {
+  flex-direction: row;
+}
+
+.vd-navbar-expand .vd-navbar-toggle {
+  display: none;
+}
+

package/css/components/pagination.css

@@ -0,0 +1,186 @@
+/**
+ * Vanduo Framework - Pagination
+ * Page navigation component
+ */
+
+:root {
+  /* Pagination Colors */
+  --pagination-bg: var(--color-white);
+  --pagination-border-color: var(--border-color);
+  --pagination-link-color: var(--color-primary);
+  --pagination-link-bg: var(--color-white);
+  --pagination-link-bg-hover: var(--bg-secondary);
+  --pagination-link-bg-active: var(--color-primary);
+  --pagination-link-color-active: var(--color-white);
+  --pagination-link-color-disabled: var(--text-muted);
+  
+  /* Pagination Spacing (Fibonacci pairs: x/y ratio ~ phi) */
+  --pagination-padding-y: 0.5rem;        /* 8px  - fib */
+  --pagination-padding-x: 0.8125rem;     /* 13px - fib */
+  --pagination-padding-y-sm: 0.1875rem;  /* 3px  - fib */
+  --pagination-padding-x-sm: 0.3125rem;  /* 5px  - fib */
+  --pagination-padding-y-lg: 0.8125rem;  /* 13px - fib */
+  --pagination-padding-x-lg: 1.3125rem;  /* 21px - fib */
+  
+  /* Pagination Font */
+  --pagination-font-size: var(--font-size-base);
+  --pagination-font-size-sm: var(--font-size-sm);
+  --pagination-font-size-lg: var(--font-size-lg);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --pagination-bg: var(--bg-secondary);
+  --pagination-link-bg: var(--bg-secondary);
+  --pagination-link-bg-hover: var(--bg-primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --pagination-bg: var(--bg-secondary);
+    --pagination-link-bg: var(--bg-secondary);
+    --pagination-link-bg-hover: var(--bg-primary);
+  }
+}
+
+/* Base Pagination */
+.vd-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* Pagination Item */
+.vd-pagination-item {
+  display: inline-block;
+  margin: 0 0.125rem;
+}
+
+.vd-pagination-item:first-child {
+  margin-left: 0;
+}
+
+.vd-pagination-item:last-child {
+  margin-right: 0;
+}
+
+/* Pagination Link */
+.vd-pagination-link {
+  position: relative;
+  display: block;
+  padding: var(--pagination-padding-y) var(--pagination-padding-x);
+  font-size: var(--pagination-font-size);
+  line-height: var(--line-height-normal);
+  color: var(--pagination-link-color);
+  text-decoration: none;
+  background-color: var(--pagination-link-bg);
+  border: 1px solid var(--pagination-border-color);
+  border-radius: var(--btn-border-radius);
+  transition: var(--transition-colors);
+  cursor: pointer;
+  user-select: none;
+}
+
+.vd-pagination-link:hover {
+  color: var(--pagination-link-color);
+  background-color: var(--pagination-link-bg-hover);
+  border-color: var(--pagination-border-color);
+  text-decoration: none;
+}
+
+.vd-pagination-link:focus {
+  outline: 0;
+  box-shadow: var(--input-focus-box-shadow);
+  z-index: 1;
+}
+
+/* Pagination Active State */
+.vd-pagination-item.active .vd-pagination-link {
+  z-index: 1;
+  color: var(--pagination-link-color-active);
+  background-color: var(--pagination-link-bg-active);
+  border-color: var(--pagination-link-bg-active);
+  cursor: default;
+}
+
+.vd-pagination-item.active .vd-pagination-link:hover {
+  color: var(--pagination-link-color-active);
+  background-color: var(--pagination-link-bg-active);
+  border-color: var(--pagination-link-bg-active);
+}
+
+/* Pagination Disabled State */
+.vd-pagination-item.disabled .vd-pagination-link {
+  color: var(--pagination-link-color-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: var(--pagination-link-bg);
+  border-color: var(--pagination-border-color);
+  opacity: 0.6;
+}
+
+/* Pagination Previous/Next */
+.vd-pagination-prev,
+.vd-pagination-next {
+  font-weight: var(--font-weight-medium);
+}
+
+.vd-pagination-prev .vd-pagination-link::before {
+  content: '«';
+  margin-right: 0.25rem;
+}
+
+.vd-pagination-next .vd-pagination-link::after {
+  content: '»';
+  margin-left: 0.25rem;
+}
+
+/* Pagination Ellipsis */
+.vd-pagination-ellipsis {
+  padding: var(--pagination-padding-y) var(--pagination-padding-x);
+  color: var(--text-muted);
+  pointer-events: none;
+  cursor: default;
+}
+
+/* Pagination Sizes */
+.vd-pagination-sm .vd-pagination-link {
+  padding: var(--pagination-padding-y-sm) var(--pagination-padding-x-sm);
+  font-size: var(--pagination-font-size-sm);
+}
+
+.vd-pagination-lg .vd-pagination-link {
+  padding: var(--pagination-padding-y-lg) var(--pagination-padding-x-lg);
+  font-size: var(--pagination-font-size-lg);
+}
+
+/* Pagination Alignment */
+.vd-pagination-center {
+  justify-content: center;
+}
+
+.vd-pagination-right {
+  justify-content: flex-end;
+}
+
+/* Responsive Behavior */
+@media (max-width: 575.98px) {
+  .vd-pagination {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .vd-pagination-item {
+    margin: 0.125rem;
+  }
+  
+  .vd-pagination-prev,
+  .vd-pagination-next {
+    width: 100%;
+    text-align: center;
+    margin: 0.5rem 0;
+  }
+}
+