vanduo-framework 1.1.8

package/css/components/avatar.css

@@ -0,0 +1,275 @@
+/**
+ * Vanduo Framework - Avatar
+ * User profile images and placeholders
+ */
+
+:root {
+  /* Avatar Sizes (Fibonacci) */
+  --avatar-size-xs: 1.3125rem;  /* 21px - fib */
+  --avatar-size-sm: 2.125rem;   /* 34px - fib */
+  --avatar-size-md: 2.125rem;   /* 34px - fib */
+  --avatar-size: 3.4375rem;     /* 55px - fib */
+  --avatar-size-lg: 3.4375rem;  /* 55px - fib */
+  --avatar-size-xl: 5.5625rem;  /* 89px - fib */
+  --avatar-size-2xl: 9rem;      /* 144px - fib */
+
+  /* Avatar Colors */
+  --avatar-bg: var(--color-gray-300);
+  --avatar-text: var(--color-gray-700);
+  --avatar-border: var(--color-white);
+  --avatar-status-online: var(--color-success);
+  --avatar-status-offline: var(--color-gray-400);
+  --avatar-status-busy: var(--color-error);
+  --avatar-status-away: var(--color-warning);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --avatar-bg: var(--color-gray-600);
+  --avatar-text: var(--color-gray-200);
+  --avatar-border: var(--color-gray-800);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --avatar-bg: var(--color-gray-600);
+    --avatar-text: var(--color-gray-200);
+    --avatar-border: var(--color-gray-800);
+  }
+}
+
+/* Base Avatar */
+.vd-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: 50%;
+  background-color: var(--avatar-bg);
+  color: var(--avatar-text);
+  font-weight: var(--font-weight-medium);
+  font-size: calc(var(--avatar-size) * 0.4);
+  line-height: 1;
+  overflow: hidden;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+/* Avatar Image */
+.vd-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* Avatar Initials (fallback) */
+.vd-avatar-initials {
+  text-transform: uppercase;
+  user-select: none;
+}
+
+/* Avatar Sizes */
+.vd-avatar-xs {
+  width: var(--avatar-size-xs);
+  height: var(--avatar-size-xs);
+  font-size: calc(var(--avatar-size-xs) * 0.4);
+}
+
+.vd-avatar-sm {
+  width: var(--avatar-size-sm);
+  height: var(--avatar-size-sm);
+  font-size: calc(var(--avatar-size-sm) * 0.4);
+}
+
+.vd-avatar-md {
+  width: var(--avatar-size-md);
+  height: var(--avatar-size-md);
+  font-size: calc(var(--avatar-size-md) * 0.4);
+}
+
+.vd-avatar-lg {
+  width: var(--avatar-size-lg);
+  height: var(--avatar-size-lg);
+  font-size: calc(var(--avatar-size-lg) * 0.4);
+}
+
+.vd-avatar-xl {
+  width: var(--avatar-size-xl);
+  height: var(--avatar-size-xl);
+  font-size: calc(var(--avatar-size-xl) * 0.4);
+}
+
+.vd-avatar-2xl {
+  width: var(--avatar-size-2xl);
+  height: var(--avatar-size-2xl);
+  font-size: calc(var(--avatar-size-2xl) * 0.4);
+}
+
+/* Avatar Shapes */
+.vd-avatar-rounded {
+  border-radius: var(--btn-border-radius);
+}
+
+.vd-avatar-square {
+  border-radius: 0;
+}
+
+/* Avatar Status Indicator */
+.vd-avatar-status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 25%;
+  height: 25%;
+  min-width: 0.5rem;
+  min-height: 0.5rem;
+  border-radius: 50%;
+  border: 2px solid var(--avatar-border);
+  background-color: var(--avatar-status-offline);
+}
+
+.vd-avatar-status-online {
+  background-color: var(--avatar-status-online);
+}
+
+.vd-avatar-status-offline {
+  background-color: var(--avatar-status-offline);
+}
+
+.vd-avatar-status-busy {
+  background-color: var(--avatar-status-busy);
+}
+
+.vd-avatar-status-away {
+  background-color: var(--avatar-status-away);
+}
+
+/* Avatar with Ring/Border */
+.vd-avatar-ring {
+  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-primary);
+}
+
+.vd-avatar-ring-success {
+  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-success);
+}
+
+.vd-avatar-ring-warning {
+  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-warning);
+}
+
+.vd-avatar-ring-error {
+  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-error);
+}
+
+/* Avatar Group (stacked avatars) */
+.vd-avatar-group {
+  display: inline-flex;
+  flex-direction: row-reverse;
+}
+
+.vd-avatar-group .vd-avatar {
+  border: 2px solid var(--avatar-border);
+  margin-left: -0.75rem;
+}
+
+.vd-avatar-group .vd-avatar:last-child {
+  margin-left: 0;
+}
+
+.vd-avatar-group .vd-avatar:hover {
+  z-index: 1;
+}
+
+/* Avatar Group Sizes */
+.vd-avatar-group-sm .vd-avatar {
+  margin-left: -0.5rem;
+}
+
+.vd-avatar-group-lg .vd-avatar {
+  margin-left: -1rem;
+}
+
+/* Avatar Group with Counter */
+.vd-avatar-group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: 50%;
+  background-color: var(--color-gray-200);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  border: 2px solid var(--avatar-border);
+  margin-left: -0.75rem;
+}
+
+[data-theme="dark"] .vd-avatar-group-count {
+  background-color: var(--color-gray-700);
+}
+
+/* Color Variants */
+.vd-avatar-primary {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.vd-avatar-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-white);
+}
+
+.vd-avatar-success {
+  background-color: var(--color-success);
+  color: var(--color-white);
+}
+
+.vd-avatar-warning {
+  background-color: var(--color-warning);
+  color: var(--color-gray-900);
+}
+
+.vd-avatar-error {
+  background-color: var(--color-error);
+  color: var(--color-white);
+}
+
+.vd-avatar-info {
+  background-color: var(--color-info);
+  color: var(--color-white);
+}
+
+/* Clickable Avatar */
+a.vd-avatar,
+button.vd-avatar {
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+a.vd-avatar:hover,
+button.vd-avatar:hover {
+  transform: scale(1.05);
+}
+
+a.vd-avatar:focus-visible,
+button.vd-avatar:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  a.vd-avatar,
+  button.vd-avatar {
+    transition: none;
+  }
+
+  a.vd-avatar:hover,
+  button.vd-avatar:hover {
+    transform: none;
+  }
+}

package/css/components/badges.css

@@ -0,0 +1,230 @@
+/**
+ * Vanduo Framework - Badges
+ * Status indicator badges
+ */
+
+:root {
+  /* Badge Padding (x/y ratio ~ phi) */
+  --badge-padding-y: 0.25em;
+  --badge-padding-x: 0.4em;      /* 0.4/0.25 = 1.6 ~ phi */
+  --badge-padding-y-sm: 0.15em;
+  --badge-padding-x-sm: 0.25em;  /* 0.25/0.15 = 1.67 ~ phi */
+  --badge-padding-y-lg: 0.35em;
+  --badge-padding-x-lg: 0.55em;  /* 0.55/0.35 = 1.57 ~ phi */
+  
+  /* Badge Font */
+  --badge-font-size: 0.75em;
+  --badge-font-size-sm: 0.65em;
+  --badge-font-size-lg: 0.875em;
+  --badge-font-weight: var(--font-weight-semibold);
+  --badge-line-height: 1;
+  
+  /* Badge Border Radius */
+  --badge-border-radius: var(--btn-border-radius-sm);
+  --badge-pill-border-radius: 50rem;
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  /* Invert light/dark badge colors for visibility */
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    /* Invert light/dark badge colors for visibility */
+  }
+}
+
+/* Dark Theme - Light badge needs different colors */
+[data-theme="dark"] .vd-badge-light {
+  background-color: var(--color-gray-700);
+  color: var(--color-gray-100);
+}
+
+[data-theme="dark"] .vd-badge-outlined.vd-badge-light {
+  color: var(--color-gray-300);
+  border-color: var(--color-gray-500);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .vd-badge-light {
+    background-color: var(--color-gray-700);
+    color: var(--color-gray-100);
+  }
+
+  :root:not([data-theme]) .vd-badge-outlined.vd-badge-light {
+    color: var(--color-gray-300);
+    border-color: var(--color-gray-500);
+  }
+}
+
+/* Base Badge */
+.vd-badge {
+  display: inline-block;
+  padding: var(--badge-padding-y) var(--badge-padding-x);
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  line-height: var(--badge-line-height);
+  color: var(--color-white);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--badge-border-radius);
+  background-color: var(--color-secondary);
+}
+
+/* Badge Variants */
+.vd-badge-primary {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.vd-badge-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-white);
+}
+
+.vd-badge-success {
+  background-color: var(--color-success);
+  color: var(--color-white);
+}
+
+.vd-badge-warning {
+  background-color: var(--color-warning);
+  color: var(--color-gray-900);
+}
+
+.vd-badge-error {
+  background-color: var(--color-error);
+  color: var(--color-white);
+}
+
+.vd-badge-info {
+  background-color: var(--color-info);
+  color: var(--color-white);
+}
+
+.vd-badge-light {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-900);
+}
+
+.vd-badge-dark {
+  background-color: var(--color-gray-800);
+  color: var(--color-white);
+}
+
+/* Badge Sizes */
+.vd-badge-sm {
+  padding: var(--badge-padding-y-sm) var(--badge-padding-x-sm);
+  font-size: var(--badge-font-size-sm);
+}
+
+.vd-badge-lg {
+  padding: var(--badge-padding-y-lg) var(--badge-padding-x-lg);
+  font-size: var(--badge-font-size-lg);
+}
+
+/* Badge Styles */
+.vd-badge-pill {
+  padding-right: var(--badge-padding-x);
+  padding-left: var(--badge-padding-x);
+  border-radius: var(--badge-pill-border-radius);
+}
+
+.vd-badge-outlined {
+  background-color: transparent;
+  border: 1px solid currentColor;
+}
+
+.vd-badge-outlined.vd-badge-primary {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.vd-badge-outlined.vd-badge-secondary {
+  color: var(--color-secondary);
+  border-color: var(--color-secondary);
+}
+
+.vd-badge-outlined.vd-badge-success {
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.vd-badge-outlined.vd-badge-warning {
+  color: var(--color-warning);
+  border-color: var(--color-warning);
+}
+
+.vd-badge-outlined.vd-badge-error {
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+.vd-badge-outlined.vd-badge-info {
+  color: var(--color-info);
+  border-color: var(--color-info);
+}
+
+.vd-badge-outlined.vd-badge-light {
+  color: var(--color-gray-600);
+  border-color: var(--color-gray-300);
+}
+
+.vd-badge-outlined.vd-badge-dark {
+  color: var(--color-gray-800);
+  border-color: var(--color-gray-800);
+}
+
+/* Badge Positioning (for use with buttons, avatars, etc.) */
+.vd-badge-top-right,
+.vd-badge-top-left,
+.vd-badge-bottom-right,
+.vd-badge-bottom-left {
+  position: absolute;
+  z-index: 1;
+  transform: translate(50%, -50%);
+}
+
+.vd-badge-top-right {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.vd-badge-top-left {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+
+.vd-badge-bottom-right {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+
+.vd-badge-bottom-left {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+}
+
+/* Badge in Buttons */
+.vd-btn .vd-badge {
+  position: relative;
+  top: -1px;
+}
+
+/* Badge in Headings */
+h1 .vd-badge,
+h2 .vd-badge,
+h3 .vd-badge,
+h4 .vd-badge,
+h5 .vd-badge,
+h6 .vd-badge {
+  font-size: 0.6em;
+  vertical-align: middle;
+}
+

package/css/components/breadcrumbs.css

@@ -0,0 +1,146 @@
+/**
+ * Vanduo Framework - Breadcrumbs
+ * Breadcrumb navigation component
+ */
+
+:root {
+  /* Breadcrumb Spacing (Fibonacci) */
+  --breadcrumb-padding-y: 0.5rem;     /* 8px - fib */
+  --breadcrumb-padding-x: 0;
+  --breadcrumb-margin-bottom: 0.8125rem; /* 13px - fib */
+
+  /* Breadcrumb Separator */
+  --breadcrumb-separator: "/";
+  --breadcrumb-separator-color: var(--text-muted);
+  --breadcrumb-separator-padding: 0.5rem; /* 8px - fib */
+  
+  /* Breadcrumb Colors */
+  --breadcrumb-bg: transparent;
+  --breadcrumb-link-color: var(--color-primary);
+  --breadcrumb-link-hover-color: var(--color-primary-dark);
+  --breadcrumb-active-color: var(--text-secondary);
+}
+
+/* Dark Theme Overrides - breadcrumbs use CSS variables that already adapt */
+/* No additional overrides needed as --text-secondary and --color-primary update in dark mode */
+
+/* Base Breadcrumbs */
+.vd-breadcrumbs,
+.vd-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
+  margin-bottom: var(--breadcrumb-margin-bottom);
+  list-style: none;
+  background-color: var(--breadcrumb-bg);
+  border-radius: var(--btn-border-radius);
+}
+
+/* Breadcrumb Item */
+.vd-breadcrumb-item {
+  display: flex;
+  align-items: center;
+}
+
+.vd-breadcrumb-item + .vd-breadcrumb-item {
+  padding-left: var(--breadcrumb-separator-padding);
+}
+
+.vd-breadcrumb-item + .vd-breadcrumb-item::before {
+  content: var(--breadcrumb-separator);
+  display: inline-block;
+  padding-right: var(--breadcrumb-separator-padding);
+  color: var(--breadcrumb-separator-color);
+  font-weight: var(--font-weight-normal);
+}
+
+/* Breadcrumb Link */
+.vd-breadcrumb-link,
+.vd-breadcrumb-item > a {
+  color: var(--breadcrumb-link-color);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.vd-breadcrumb-link:hover,
+.vd-breadcrumb-item > a:hover {
+  color: var(--breadcrumb-link-hover-color);
+  text-decoration: underline;
+}
+
+.vd-breadcrumb-link:focus,
+.vd-breadcrumb-item > a:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* Active/Current Breadcrumb Item */
+.vd-breadcrumb-item.active,
+.vd-breadcrumb-current {
+  color: var(--breadcrumb-active-color);
+}
+
+.vd-breadcrumb-item.active > a,
+.vd-breadcrumb-current > a {
+  color: var(--breadcrumb-active-color);
+  pointer-events: none;
+  cursor: default;
+}
+
+.vd-breadcrumb-item.active > a:hover,
+.vd-breadcrumb-current > a:hover {
+  text-decoration: none;
+}
+
+/* Breadcrumb Variants - With Icons */
+.vd-breadcrumb-item > svg,
+.vd-breadcrumb-item > i {
+  margin-right: 0.25rem;
+  vertical-align: middle;
+}
+
+/* Custom Separators */
+.vd-breadcrumb-separator-slash::before {
+  content: "/";
+}
+
+.vd-breadcrumb-separator-chevron::before {
+  content: "›";
+}
+
+.vd-breadcrumb-separator-arrow::before {
+  content: "→";
+}
+
+.vd-breadcrumb-separator-dot::before {
+  content: "·";
+}
+
+.vd-breadcrumb-separator-pipe::before {
+  content: "|";
+}
+
+/* Breadcrumb Sizes */
+.vd-breadcrumb-sm {
+  font-size: var(--font-size-sm);
+  padding: calc(var(--breadcrumb-padding-y) * 0.75) var(--breadcrumb-padding-x);
+}
+
+.vd-breadcrumb-lg {
+  font-size: var(--font-size-lg);
+  padding: calc(var(--breadcrumb-padding-y) * 1.25) var(--breadcrumb-padding-x);
+}
+
+/* Responsive Behavior */
+@media (max-width: 575.98px) {
+  .vd-breadcrumb-item {
+    font-size: var(--font-size-sm);
+  }
+  
+  .vd-breadcrumb-item + .vd-breadcrumb-item::before {
+    padding-right: calc(var(--breadcrumb-separator-padding) * 0.75);
+    padding-left: calc(var(--breadcrumb-separator-padding) * 0.75);
+  }
+}
+

package/css/components/button-group.css

@@ -0,0 +1,82 @@
+/**
+ * Vanduo Framework - Button Group Component
+ * Toolbar-style button grouping
+ */
+
+/* Button Group - Horizontal */
+.vd-btn-group {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+}
+
+.vd-btn-group>.vd-btn {
+  position: relative;
+  flex: 0 1 auto;
+  margin-bottom: 0;
+}
+
+/* Remove inner border-radius for adjacent buttons */
+.vd-btn-group>.vd-btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
+}
+
+.vd-btn-group>.vd-btn:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Ensure z-index for focus/active states */
+.vd-btn-group>.vd-btn:hover,
+.vd-btn-group>.vd-btn:focus,
+.vd-btn-group>.vd-btn:active,
+.vd-btn-group>.vd-btn.is-active {
+  z-index: 1;
+}
+
+/* Button Group - Vertical */
+.vd-btn-group-vertical {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.vd-btn-group-vertical>.vd-btn {
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.vd-btn-group-vertical>.vd-btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-top: -1px;
+}
+
+.vd-btn-group-vertical>.vd-btn:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Sizing - inherit from button sizes */
+.vd-btn-group-sm>.vd-btn {
+  font-size: var(--font-size-sm);
+  padding: 0.3125rem 0.625rem;
+}
+
+.vd-btn-group-lg>.vd-btn {
+  font-size: var(--font-size-lg);
+  padding: 0.625rem 1.25rem;
+}
+
+/* Full Width */
+.vd-btn-group-full {
+  display: flex;
+  width: 100%;
+}
+
+.vd-btn-group-full>.vd-btn {
+  flex: 1 1 auto;
+}