@vanduo-oss/framework 1.4.0 → 1.4.2

package/css/components/collapsible.css

@@ -5,37 +5,37 @@
 
 :root {
   /* Collapsible Colors */
-  --collapsible-border-color: var(--vd-border-color);
-  --collapsible-bg: var(--vd-color-white);
-  --collapsible-header-bg: var(--vd-bg-secondary);
-  --collapsible-header-bg-hover: var(--vd-bg-secondary);
-  --collapsible-header-bg-active: var(--vd-bg-secondary);
-  --collapsible-focus-ring: 0 0 0 2px var(--input-focus-border-color);
+  --vd-collapsible-border-color: var(--vd-border-color);
+  --vd-collapsible-bg: var(--vd-color-white);
+  --vd-collapsible-header-bg: var(--vd-bg-secondary);
+  --vd-collapsible-header-bg-hover: var(--vd-bg-secondary);
+  --vd-collapsible-header-bg-active: var(--vd-bg-secondary);
+  --vd-collapsible-focus-ring: 0 0 0 2px var(--vd-input-focus-border-color);
   
   /* 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 */
+  --vd-collapsible-padding-y: 0.8125rem;    /* 13px - fib */
+  --vd-collapsible-padding-x: 1.3125rem;    /* 21px - fib (21/13 ~ phi) */
+  --vd-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);
+  --vd-collapsible-transition: height var(--vd-transition-duration-slow) var(--vd-transition-ease),
+                            opacity var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --collapsible-bg: var(--vd-bg-secondary);
-  --collapsible-header-bg: var(--vd-bg-primary);
-  --collapsible-header-bg-hover: var(--vd-bg-primary);
-  --collapsible-header-bg-active: var(--vd-bg-primary);
+  --vd-collapsible-bg: var(--vd-bg-secondary);
+  --vd-collapsible-header-bg: var(--vd-bg-primary);
+  --vd-collapsible-header-bg-hover: var(--vd-bg-primary);
+  --vd-collapsible-header-bg-active: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --collapsible-bg: var(--vd-bg-secondary);
-    --collapsible-header-bg: var(--vd-bg-primary);
-    --collapsible-header-bg-hover: var(--vd-bg-primary);
-    --collapsible-header-bg-active: var(--vd-bg-primary);
+    --vd-collapsible-bg: var(--vd-bg-secondary);
+    --vd-collapsible-header-bg: var(--vd-bg-primary);
+    --vd-collapsible-header-bg-hover: var(--vd-bg-primary);
+    --vd-collapsible-header-bg-active: var(--vd-bg-primary);
   }
 }
 
@@ -50,11 +50,11 @@
 /* Collapsible Item */
 .vd-collapsible-item,
 .accordion-item {
-  border: 1px solid var(--collapsible-border-color);
-  border-radius: var(--btn-border-radius);
+  border: 1px solid var(--vd-collapsible-border-color);
+  border-radius: var(--vd-btn-border-radius);
   margin-bottom: 0.5rem;
   overflow: hidden;
-  background-color: var(--collapsible-bg);
+  background-color: var(--vd-collapsible-bg);
   position: relative;
 }
 
@@ -69,25 +69,25 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--collapsible-padding-y) var(--collapsible-padding-x);
-  background-color: var(--collapsible-header-bg);
+  padding: var(--vd-collapsible-padding-y) var(--vd-collapsible-padding-x);
+  background-color: var(--vd-collapsible-header-bg);
   cursor: pointer;
   user-select: none;
-  transition: var(--transition-bg);
+  transition: var(--vd-transition-bg);
   border: none;
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   text-align: left;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-medium);
   color: var(--vd-text-primary);
 }
 
 .vd-collapsible-header:hover,
 .accordion-header:hover {
-  background-color: var(--collapsible-header-bg-hover);
+  background-color: var(--vd-collapsible-header-bg-hover);
 }
 
 .vd-collapsible-header:focus,
@@ -102,14 +102,14 @@
 .vd-collapsible-item:has(.vd-collapsible-trigger:focus-visible),
 .accordion-item:has(.accordion-header:focus-visible),
 .accordion-item:has(.accordion-trigger:focus-visible) {
-  box-shadow: var(--collapsible-focus-ring);
+  box-shadow: var(--vd-collapsible-focus-ring);
   z-index: 1;
 }
 
 .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);
+  background-color: var(--vd-collapsible-header-bg-active);
+  font-weight: var(--vd-font-weight-semibold);
 }
 
 /* Collapsible Trigger */
@@ -119,9 +119,9 @@
   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);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-medium);
   color: var(--vd-text-primary);
   text-decoration: none;
   background: none;
@@ -149,7 +149,7 @@
   height: 1.5rem;
   margin-left: 0.75rem;
   flex-shrink: 0;
-  transition: transform var(--transition-duration-base) var(--transition-ease);
+  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 .vd-collapsible-icon::before,
@@ -157,7 +157,7 @@
   content: '▼';
   font-size: 0.75rem;
   color: var(--vd-text-secondary);
-  transition: transform var(--transition-duration-base) var(--transition-ease);
+  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 .vd-collapsible-item.is-open .vd-collapsible-icon::before,
@@ -170,7 +170,7 @@
 .accordion-body {
   max-height: 0;
   overflow: hidden;
-  transition: var(--collapsible-transition);
+  transition: var(--vd-collapsible-transition);
   opacity: 0;
 }
 
@@ -178,15 +178,15 @@
 .accordion-item.is-open .accordion-body {
   max-height: 5000px;
   opacity: 1;
-  padding: var(--collapsible-body-padding);
-  border-top: 1px solid var(--collapsible-border-color);
+  padding: var(--vd-collapsible-body-padding);
+  border-top: 1px solid var(--vd-collapsible-border-color);
 }
 
 /* Collapsible Content */
 .vd-collapsible-content,
 .accordion-content {
   color: var(--vd-text-primary);
-  line-height: var(--line-height-normal);
+  line-height: var(--vd-line-height-normal);
 }
 
 /* Collapsible States */
@@ -204,21 +204,21 @@
 /* Collapsible Variants - Bordered */
 .vd-collapsible-bordered .vd-collapsible-item,
 .accordion-bordered .accordion-item {
-  border: 1px solid var(--collapsible-border-color);
+  border: 1px solid var(--vd-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);
+  border-top-left-radius: var(--vd-btn-border-radius);
+  border-top-right-radius: var(--vd-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);
+  border-bottom-left-radius: var(--vd-btn-border-radius);
+  border-bottom-right-radius: var(--vd-btn-border-radius);
   margin-bottom: 0;
 }
 
@@ -227,7 +227,7 @@
 .accordion-flush .accordion-item {
   border: none;
   border-radius: 0;
-  border-bottom: 1px solid var(--collapsible-border-color);
+  border-bottom: 1px solid var(--vd-collapsible-border-color);
   margin-bottom: 0;
   background-color: transparent;
   overflow: visible;
@@ -249,7 +249,7 @@
 .vd-collapsible-flush .vd-collapsible-trigger:hover,
 .accordion-flush .accordion-header:hover,
 .accordion-flush .accordion-trigger:hover {
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 .vd-collapsible-flush .vd-collapsible-item:has(.vd-collapsible-header:focus-visible),
@@ -263,8 +263,8 @@
 .vd-collapsible-flush .vd-collapsible-trigger:focus-visible,
 .accordion-flush .accordion-header:focus-visible,
 .accordion-flush .accordion-trigger:focus-visible {
-  border-radius: var(--btn-border-radius);
-  box-shadow: var(--collapsible-focus-ring);
+  border-radius: var(--vd-btn-border-radius);
+  box-shadow: var(--vd-collapsible-focus-ring);
   position: relative;
   z-index: 1;
 }
@@ -272,24 +272,24 @@
 /* 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);
+  padding: calc(var(--vd-collapsible-padding-y) * 0.75) calc(var(--vd-collapsible-padding-x) * 0.75);
+  font-size: var(--vd-font-size-sm);
 }
 
 .vd-collapsible-sm .vd-collapsible-body,
 .accordion-sm .accordion-body {
-  padding: calc(var(--collapsible-body-padding) * 0.75);
+  padding: calc(var(--vd-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);
+  padding: calc(var(--vd-collapsible-padding-y) * 1.25) calc(var(--vd-collapsible-padding-x) * 1.25);
+  font-size: var(--vd-font-size-lg);
 }
 
 .vd-collapsible-lg .vd-collapsible-body,
 .accordion-lg .accordion-body {
-  padding: calc(var(--collapsible-body-padding) * 1.25);
+  padding: calc(var(--vd-collapsible-body-padding) * 1.25);
 }
 
 /* Accordion Mode (single open) */
@@ -300,20 +300,20 @@
 }
 
 .accordion .accordion-item.is-open ~ .accordion-item.is-open {
-  border-top: 1px solid var(--collapsible-border-color);
+  border-top: 1px solid var(--vd-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);
+    padding: calc(var(--vd-collapsible-padding-y) * 0.875) var(--vd-collapsible-padding-x);
+    font-size: var(--vd-font-size-sm);
   }
   
   .vd-collapsible-body,
   .accordion-body {
-    padding: var(--collapsible-padding-x);
+    padding: var(--vd-collapsible-padding-x);
   }
 }
 

package/css/components/collections.css

@@ -5,40 +5,40 @@
 
 :root {
   /* Collection Colors */
-  --collection-bg: var(--vd-color-white);
-  --collection-item-bg: var(--vd-color-white);
-  --collection-item-bg-hover: var(--vd-bg-secondary);
-  --collection-item-bg-active: var(--vd-color-primary-alpha-10);
-  --collection-border-color: var(--vd-border-color);
+  --vd-collection-bg: var(--vd-color-white);
+  --vd-collection-item-bg: var(--vd-color-white);
+  --vd-collection-item-bg-hover: var(--vd-bg-secondary);
+  --vd-collection-item-bg-active: var(--vd-color-primary-alpha-10);
+  --vd-collection-border-color: var(--vd-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 */
+  --vd-collection-padding-y: 0;
+  --vd-collection-padding-x: 0;
+  --vd-collection-item-padding-y: 0.8125rem;    /* 13px - fib */
+  --vd-collection-item-padding-x: 1.3125rem;    /* 21px - fib */
+  --vd-collection-item-padding-y-sm: 0.5rem;    /* 8px  - fib */
+  --vd-collection-item-padding-x-sm: 0.8125rem; /* 13px - fib */
+  --vd-collection-item-padding-y-lg: 1.3125rem; /* 21px - fib */
+  --vd-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 */
+  --vd-collection-avatar-size: 2.125rem;     /* 34px - fib */
+  --vd-collection-avatar-size-sm: 1.3125rem; /* 21px - fib */
+  --vd-collection-avatar-size-lg: 3.4375rem; /* 55px - fib */
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --collection-bg: var(--vd-bg-secondary);
-  --collection-item-bg: var(--vd-bg-secondary);
-  --collection-item-bg-hover: var(--vd-bg-primary);
+  --vd-collection-bg: var(--vd-bg-secondary);
+  --vd-collection-item-bg: var(--vd-bg-secondary);
+  --vd-collection-item-bg-hover: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --collection-bg: var(--vd-bg-secondary);
-    --collection-item-bg: var(--vd-bg-secondary);
-    --collection-item-bg-hover: var(--vd-bg-primary);
+    --vd-collection-bg: var(--vd-bg-secondary);
+    --vd-collection-item-bg: var(--vd-bg-secondary);
+    --vd-collection-item-bg-hover: var(--vd-bg-primary);
   }
 }
 
@@ -46,23 +46,23 @@
 .vd-collection {
   display: flex;
   flex-direction: column;
-  padding: var(--collection-padding-y) var(--collection-padding-x);
+  padding: var(--vd-collection-padding-y) var(--vd-collection-padding-x);
   margin-bottom: 0;
   list-style: none;
-  background-color: var(--collection-bg);
+  background-color: var(--vd-collection-bg);
 }
 
 /* Collection Item */
 .vd-collection-item {
   display: flex;
   align-items: center;
-  padding: var(--collection-item-padding-y) var(--collection-item-padding-x);
+  padding: var(--vd-collection-item-padding-y) var(--vd-collection-item-padding-x);
   margin-bottom: 0;
   color: var(--vd-text-primary);
   text-decoration: none;
-  background-color: var(--collection-item-bg);
-  border-bottom: 1px solid var(--collection-border-color);
-  transition: var(--transition-bg);
+  background-color: var(--vd-collection-item-bg);
+  border-bottom: 1px solid var(--vd-collection-border-color);
+  transition: var(--vd-transition-bg);
 }
 
 .vd-collection-item:last-child {
@@ -70,14 +70,14 @@
 }
 
 .vd-collection-item:hover {
-  background-color: var(--collection-item-bg-hover);
+  background-color: var(--vd-collection-item-bg-hover);
   text-decoration: none;
 }
 
 .vd-collection-item.active {
-  background-color: var(--collection-item-bg-active);
+  background-color: var(--vd-collection-item-bg-active);
   color: var(--vd-color-primary);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--vd-font-weight-medium);
 }
 
 .vd-collection-item.disabled {
@@ -89,8 +89,8 @@
 /* Collection Avatar */
 .vd-collection-avatar {
   flex-shrink: 0;
-  width: var(--collection-avatar-size);
-  height: var(--collection-avatar-size);
+  width: var(--vd-collection-avatar-size);
+  height: var(--vd-collection-avatar-size);
   margin-right: 1rem;
   border-radius: 50%;
   background-color: var(--vd-bg-secondary);
@@ -119,9 +119,9 @@
 
 .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);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-medium);
+  line-height: var(--vd-line-height-normal);
   color: var(--vd-text-primary);
 }
 
@@ -131,8 +131,8 @@
 
 .vd-collection-text {
   margin: 0;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
+  font-size: var(--vd-font-size-sm);
+  line-height: var(--vd-line-height-normal);
   color: var(--vd-text-secondary);
 }
 
@@ -159,31 +159,31 @@
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid var(--collection-border-color);
+  border-top: 1px solid var(--vd-collection-border-color);
 }
 
 /* Collection Header */
 .vd-collection-header {
-  padding: var(--collection-item-padding-y) var(--collection-item-padding-x);
+  padding: var(--vd-collection-item-padding-y) var(--vd-collection-item-padding-x);
   margin-bottom: 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-semibold);
   color: var(--vd-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background-color: var(--vd-bg-secondary);
-  border-bottom: 1px solid var(--collection-border-color);
+  border-bottom: 1px solid var(--vd-collection-border-color);
 }
 
 /* Collection Variants */
 .vd-collection-bordered {
-  border: 1px solid var(--collection-border-color);
-  border-radius: var(--btn-border-radius);
+  border: 1px solid var(--vd-collection-border-color);
+  border-radius: var(--vd-btn-border-radius);
   overflow: hidden;
 }
 
 .vd-collection-bordered .vd-collection-item {
-  border-bottom: 1px solid var(--collection-border-color);
+  border-bottom: 1px solid var(--vd-collection-border-color);
 }
 
 .vd-collection-bordered .vd-collection-item:last-child {
@@ -195,7 +195,7 @@
 }
 
 .vd-collection-stripped .vd-collection-item:nth-child(odd):hover {
-  background-color: var(--collection-item-bg-hover);
+  background-color: var(--vd-collection-item-bg-hover);
 }
 
 .vd-collection-hoverable .vd-collection-item {
@@ -204,37 +204,37 @@
 
 /* Collection Sizes */
 .vd-collection-sm .vd-collection-item {
-  padding: var(--collection-item-padding-y-sm) var(--collection-item-padding-x-sm);
+  padding: var(--vd-collection-item-padding-y-sm) var(--vd-collection-item-padding-x-sm);
 }
 
 .vd-collection-sm .vd-collection-avatar {
-  width: var(--collection-avatar-size-sm);
-  height: var(--collection-avatar-size-sm);
+  width: var(--vd-collection-avatar-size-sm);
+  height: var(--vd-collection-avatar-size-sm);
 }
 
 .vd-collection-sm .vd-collection-title {
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
 }
 
 .vd-collection-sm .vd-collection-text {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
 }
 
 .vd-collection-lg .vd-collection-item {
-  padding: var(--collection-item-padding-y-lg) var(--collection-item-padding-x-lg);
+  padding: var(--vd-collection-item-padding-y-lg) var(--vd-collection-item-padding-x-lg);
 }
 
 .vd-collection-lg .vd-collection-avatar {
-  width: var(--collection-avatar-size-lg);
-  height: var(--collection-avatar-size-lg);
+  width: var(--vd-collection-avatar-size-lg);
+  height: var(--vd-collection-avatar-size-lg);
 }
 
 .vd-collection-lg .vd-collection-title {
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
 }
 
 .vd-collection-lg .vd-collection-text {
-  font-size: var(--font-size-base);
+  font-size: var(--vd-font-size-base);
 }
 
 /* Responsive Behavior */
@@ -247,7 +247,7 @@
     width: 100%;
     margin-left: 0;
     margin-top: 0.5rem;
-    padding-left: calc(var(--collection-avatar-size) + 1rem);
+    padding-left: calc(var(--vd-collection-avatar-size) + 1rem);
   }
 }