vanduo-framework 1.1.8

package/css/components/collapsible.css

@@ -0,0 +1,267 @@
+/**
+ * Vanduo Framework - Collapsible
+ * Collapsible/Accordion component for expandable content
+ */
+
+:root {
+  /* Collapsible Colors */
+  --collapsible-border-color: var(--border-color);
+  --collapsible-bg: var(--color-white);
+  --collapsible-header-bg: var(--bg-secondary);
+  --collapsible-header-bg-hover: var(--bg-secondary);
+  --collapsible-header-bg-active: var(--bg-secondary);
+  
+  /* Collapsible Spacing (Fibonacci) */
+  --collapsible-padding-y: 0.8125rem;    /* 13px - fib */
+  --collapsible-padding-x: 1.3125rem;    /* 21px - fib (21/13 ~ phi) */
+  --collapsible-body-padding: 1.3125rem; /* 21px - fib */
+  
+  /* Collapsible Transitions */
+  --collapsible-transition: height var(--transition-duration-slow) var(--transition-ease),
+                            opacity var(--transition-duration-base) var(--transition-ease);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --collapsible-bg: var(--bg-secondary);
+  --collapsible-header-bg: var(--bg-primary);
+  --collapsible-header-bg-hover: var(--bg-primary);
+  --collapsible-header-bg-active: var(--bg-primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --collapsible-bg: var(--bg-secondary);
+    --collapsible-header-bg: var(--bg-primary);
+    --collapsible-header-bg-hover: var(--bg-primary);
+    --collapsible-header-bg-active: var(--bg-primary);
+  }
+}
+
+/* Base Collapsible Container */
+.vd-collapsible,
+.accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Collapsible Item */
+.vd-collapsible-item,
+.accordion-item {
+  border: 1px solid var(--collapsible-border-color);
+  border-radius: var(--btn-border-radius);
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background-color: var(--collapsible-bg);
+}
+
+.vd-collapsible-item:last-child,
+.accordion-item:last-child {
+  margin-bottom: 0;
+}
+
+/* Collapsible Header */
+.vd-collapsible-header,
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--collapsible-padding-y) var(--collapsible-padding-x);
+  background-color: var(--collapsible-header-bg);
+  cursor: pointer;
+  user-select: none;
+  transition: var(--transition-bg);
+  border: none;
+  width: 100%;
+  text-align: left;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+}
+
+.vd-collapsible-header:hover,
+.accordion-header:hover {
+  background-color: var(--collapsible-header-bg-hover);
+}
+
+.vd-collapsible-header:focus,
+.accordion-header:focus {
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: -2px;
+}
+
+.vd-collapsible-item.is-open .vd-collapsible-header,
+.accordion-item.is-open .accordion-header {
+  background-color: var(--collapsible-header-bg-active);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Collapsible Trigger */
+.vd-collapsible-trigger,
+.accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+  text-decoration: none;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.vd-collapsible-trigger:focus,
+.accordion-trigger:focus {
+  outline: none;
+}
+
+/* Collapsible Icon */
+.vd-collapsible-icon,
+.accordion-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 0.75rem;
+  flex-shrink: 0;
+  transition: transform var(--transition-duration-base) var(--transition-ease);
+}
+
+.vd-collapsible-icon::before,
+.accordion-icon::before {
+  content: '▼';
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  transition: transform var(--transition-duration-base) var(--transition-ease);
+}
+
+.vd-collapsible-item.is-open .vd-collapsible-icon::before,
+.accordion-item.is-open .accordion-icon::before {
+  transform: rotate(180deg);
+}
+
+/* Collapsible Body */
+.vd-collapsible-body,
+.accordion-body {
+  max-height: 0;
+  overflow: hidden;
+  transition: var(--collapsible-transition);
+  opacity: 0;
+}
+
+.vd-collapsible-item.is-open .vd-collapsible-body,
+.accordion-item.is-open .accordion-body {
+  max-height: 5000px;
+  opacity: 1;
+  padding: var(--collapsible-body-padding);
+  border-top: 1px solid var(--collapsible-border-color);
+}
+
+/* Collapsible Content */
+.vd-collapsible-content,
+.accordion-content {
+  color: var(--text-primary);
+  line-height: var(--line-height-normal);
+}
+
+/* Collapsible States */
+.vd-collapsible-item.is-active,
+.accordion-item.is-active {
+  border-color: var(--color-primary);
+}
+
+.vd-collapsible-item.is-active .vd-collapsible-header,
+.accordion-item.is-active .accordion-header {
+  background-color: var(--color-primary-alpha-10);
+  color: var(--color-primary);
+}
+
+/* Collapsible Variants - Bordered */
+.vd-collapsible-bordered .vd-collapsible-item,
+.accordion-bordered .accordion-item {
+  border: 1px solid var(--collapsible-border-color);
+  border-radius: 0;
+  margin-bottom: -1px;
+}
+
+.vd-collapsible-bordered .vd-collapsible-item:first-child,
+.accordion-bordered .accordion-item:first-child {
+  border-top-left-radius: var(--btn-border-radius);
+  border-top-right-radius: var(--btn-border-radius);
+}
+
+.vd-collapsible-bordered .vd-collapsible-item:last-child,
+.accordion-bordered .accordion-item:last-child {
+  border-bottom-left-radius: var(--btn-border-radius);
+  border-bottom-right-radius: var(--btn-border-radius);
+  margin-bottom: 0;
+}
+
+/* Collapsible Variants - Flush (no borders) */
+.vd-collapsible-flush .vd-collapsible-item,
+.accordion-flush .accordion-item {
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid var(--collapsible-border-color);
+}
+
+.vd-collapsible-flush .vd-collapsible-item:last-child,
+.accordion-flush .accordion-item:last-child {
+  border-bottom: none;
+}
+
+/* Collapsible Sizes */
+.vd-collapsible-sm .vd-collapsible-header,
+.accordion-sm .accordion-header {
+  padding: calc(var(--collapsible-padding-y) * 0.75) calc(var(--collapsible-padding-x) * 0.75);
+  font-size: var(--font-size-sm);
+}
+
+.vd-collapsible-sm .vd-collapsible-body,
+.accordion-sm .accordion-body {
+  padding: calc(var(--collapsible-body-padding) * 0.75);
+}
+
+.vd-collapsible-lg .vd-collapsible-header,
+.accordion-lg .accordion-header {
+  padding: calc(var(--collapsible-padding-y) * 1.25) calc(var(--collapsible-padding-x) * 1.25);
+  font-size: var(--font-size-lg);
+}
+
+.vd-collapsible-lg .vd-collapsible-body,
+.accordion-lg .accordion-body {
+  padding: calc(var(--collapsible-body-padding) * 1.25);
+}
+
+/* Accordion Mode (single open) */
+.accordion .accordion-item.is-open ~ .accordion-item.is-open .accordion-body {
+  max-height: 0;
+  opacity: 0;
+  padding: 0;
+}
+
+.accordion .accordion-item.is-open ~ .accordion-item.is-open {
+  border-top: 1px solid var(--collapsible-border-color);
+}
+
+/* Responsive Behavior */
+@media (max-width: 575.98px) {
+  .vd-collapsible-header,
+  .accordion-header {
+    padding: calc(var(--collapsible-padding-y) * 0.875) var(--collapsible-padding-x);
+    font-size: var(--font-size-sm);
+  }
+  
+  .vd-collapsible-body,
+  .accordion-body {
+    padding: var(--collapsible-padding-x);
+  }
+}
+

package/css/components/collections.css

@@ -0,0 +1,253 @@
+/**
+ * Vanduo Framework - Collections
+ * List/item collection component
+ */
+
+:root {
+  /* Collection Colors */
+  --collection-bg: var(--color-white);
+  --collection-item-bg: var(--color-white);
+  --collection-item-bg-hover: var(--bg-secondary);
+  --collection-item-bg-active: var(--color-primary-alpha-10);
+  --collection-border-color: var(--border-color);
+  
+  /* Collection Spacing (Fibonacci) */
+  --collection-padding-y: 0;
+  --collection-padding-x: 0;
+  --collection-item-padding-y: 0.8125rem;    /* 13px - fib */
+  --collection-item-padding-x: 1.3125rem;    /* 21px - fib */
+  --collection-item-padding-y-sm: 0.5rem;    /* 8px  - fib */
+  --collection-item-padding-x-sm: 0.8125rem; /* 13px - fib */
+  --collection-item-padding-y-lg: 1.3125rem; /* 21px - fib */
+  --collection-item-padding-x-lg: 2.125rem;  /* 34px - fib */
+
+  /* Collection Avatar (Fibonacci) */
+  --collection-avatar-size: 2.125rem;     /* 34px - fib */
+  --collection-avatar-size-sm: 1.3125rem; /* 21px - fib */
+  --collection-avatar-size-lg: 3.4375rem; /* 55px - fib */
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --collection-bg: var(--bg-secondary);
+  --collection-item-bg: var(--bg-secondary);
+  --collection-item-bg-hover: var(--bg-primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --collection-bg: var(--bg-secondary);
+    --collection-item-bg: var(--bg-secondary);
+    --collection-item-bg-hover: var(--bg-primary);
+  }
+}
+
+/* Base Collection */
+.vd-collection {
+  display: flex;
+  flex-direction: column;
+  padding: var(--collection-padding-y) var(--collection-padding-x);
+  margin-bottom: 0;
+  list-style: none;
+  background-color: var(--collection-bg);
+}
+
+/* Collection Item */
+.vd-collection-item {
+  display: flex;
+  align-items: center;
+  padding: var(--collection-item-padding-y) var(--collection-item-padding-x);
+  margin-bottom: 0;
+  color: var(--text-primary);
+  text-decoration: none;
+  background-color: var(--collection-item-bg);
+  border-bottom: 1px solid var(--collection-border-color);
+  transition: var(--transition-bg);
+}
+
+.vd-collection-item:last-child {
+  border-bottom: none;
+}
+
+.vd-collection-item:hover {
+  background-color: var(--collection-item-bg-hover);
+  text-decoration: none;
+}
+
+.vd-collection-item.active {
+  background-color: var(--collection-item-bg-active);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.vd-collection-item.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Collection Avatar */
+.vd-collection-avatar {
+  flex-shrink: 0;
+  width: var(--collection-avatar-size);
+  height: var(--collection-avatar-size);
+  margin-right: 1rem;
+  border-radius: 50%;
+  background-color: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.vd-collection-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.vd-collection-avatar-icon {
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+}
+
+/* Collection Content */
+.vd-collection-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vd-collection-title {
+  margin: 0 0 0.25rem 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-normal);
+  color: var(--text-primary);
+}
+
+.vd-collection-item.active .vd-collection-title {
+  color: var(--color-primary);
+}
+
+.vd-collection-text {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--text-secondary);
+}
+
+.vd-collection-item-secondary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.vd-collection-item-secondary .vd-collection-title {
+  margin-bottom: 0;
+}
+
+/* Collection Action */
+.vd-collection-action {
+  flex-shrink: 0;
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+/* Collection Divider */
+.vd-collection-divider {
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid var(--collection-border-color);
+}
+
+/* Collection Header */
+.vd-collection-header {
+  padding: var(--collection-item-padding-y) var(--collection-item-padding-x);
+  margin-bottom: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--collection-border-color);
+}
+
+/* Collection Variants */
+.vd-collection-bordered {
+  border: 1px solid var(--collection-border-color);
+  border-radius: var(--btn-border-radius);
+  overflow: hidden;
+}
+
+.vd-collection-bordered .vd-collection-item {
+  border-bottom: 1px solid var(--collection-border-color);
+}
+
+.vd-collection-bordered .vd-collection-item:last-child {
+  border-bottom: none;
+}
+
+.vd-collection-stripped .vd-collection-item:nth-child(odd) {
+  background-color: var(--bg-secondary);
+}
+
+.vd-collection-stripped .vd-collection-item:nth-child(odd):hover {
+  background-color: var(--collection-item-bg-hover);
+}
+
+.vd-collection-hoverable .vd-collection-item {
+  cursor: pointer;
+}
+
+/* Collection Sizes */
+.vd-collection-sm .vd-collection-item {
+  padding: var(--collection-item-padding-y-sm) var(--collection-item-padding-x-sm);
+}
+
+.vd-collection-sm .vd-collection-avatar {
+  width: var(--collection-avatar-size-sm);
+  height: var(--collection-avatar-size-sm);
+}
+
+.vd-collection-sm .vd-collection-title {
+  font-size: var(--font-size-sm);
+}
+
+.vd-collection-sm .vd-collection-text {
+  font-size: var(--font-size-xs);
+}
+
+.vd-collection-lg .vd-collection-item {
+  padding: var(--collection-item-padding-y-lg) var(--collection-item-padding-x-lg);
+}
+
+.vd-collection-lg .vd-collection-avatar {
+  width: var(--collection-avatar-size-lg);
+  height: var(--collection-avatar-size-lg);
+}
+
+.vd-collection-lg .vd-collection-title {
+  font-size: var(--font-size-lg);
+}
+
+.vd-collection-lg .vd-collection-text {
+  font-size: var(--font-size-base);
+}
+
+/* Responsive Behavior */
+@media (max-width: 575.98px) {
+  .vd-collection-item {
+    flex-wrap: wrap;
+  }
+  
+  .vd-collection-action {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 0.5rem;
+    padding-left: calc(var(--collection-avatar-size) + 1rem);
+  }
+}
+