@vanduo-oss/framework 1.3.3 → 1.3.5

package/dist/vanduo.css

@@ -1,4 +1,4 @@
-/*! Vanduo v1.3.3 | Built: 2026-04-10T21:45:12.664Z | git:281f4f6 | development */
+/*! Vanduo v1.3.5 | Built: 2026-04-15T18:39:53.955Z | git:3ca4f62 | development */
 *, :before, :after {
   box-sizing: border-box;
 }
@@ -1522,6 +1522,28 @@ pre code {
   --vd-shadow-md: 0 4px 6px #0000001a;
   --vd-shadow-lg: 0 10px 15px #0000001a;
   --vd-shadow-xl: 0 20px 25px #00000026;
+  --glass-blur: 12px;
+  --glass-saturate: 1.8;
+  --glass-bg-opacity: .65;
+  --glass-bg-light: rgba(255, 255, 255, var(--glass-bg-opacity));
+  --glass-bg-dark: rgba(30, 30, 30, var(--glass-bg-opacity));
+  --glass-border-alpha: .18;
+  --glass-border-light: rgba(255, 255, 255, var(--glass-border-alpha));
+  --glass-border-dark: #ffffff14;
+  --glass-highlight-alpha: .25;
+  --glass-shadow: 0 8px 32px #0000001f;
+  --glass-noise-opacity: .03;
+  --vd-glass-blur: var(--glass-blur);
+  --vd-glass-saturate: var(--glass-saturate);
+  --vd-glass-bg-opacity: var(--glass-bg-opacity);
+  --vd-glass-bg-light: var(--glass-bg-light);
+  --vd-glass-bg-dark: var(--glass-bg-dark);
+  --vd-glass-border-alpha: var(--glass-border-alpha);
+  --vd-glass-border-light: var(--glass-border-light);
+  --vd-glass-border-dark: var(--glass-border-dark);
+  --vd-glass-highlight-alpha: var(--glass-highlight-alpha);
+  --vd-glass-shadow: var(--glass-shadow);
+  --vd-glass-noise-opacity: var(--glass-noise-opacity);
   --vd-transition-fast: .15s ease;
   --vd-transition-normal: .25s ease;
   --vd-transition-slow: .35s ease;
@@ -1547,6 +1569,10 @@ pre code {
   --vd-shadow-sm: 0 1px 2px #0000004d;
   --vd-shadow-md: 0 4px 6px #0006;
   --vd-shadow-lg: 0 10px 15px #0006;
+  --glass-bg-light: var(--glass-bg-dark);
+  --glass-border-light: var(--glass-border-dark);
+  --glass-shadow: 0 12px 36px #00000073;
+  --glass-highlight-alpha: .16;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -1562,6 +1588,10 @@ pre code {
     --vd-shadow-sm: 0 1px 2px #0000004d;
     --vd-shadow-md: 0 4px 6px #0006;
     --vd-shadow-lg: 0 10px 15px #0006;
+    --glass-bg-light: var(--glass-bg-dark);
+    --glass-border-light: var(--glass-border-dark);
+    --glass-shadow: 0 12px 36px #00000073;
+    --glass-highlight-alpha: .16;
   }
 }
 
@@ -1587,6 +1617,17 @@ pre code {
   --vd-shadow-sm: var(--shadow-sm);
   --vd-shadow-md: var(--shadow-md);
   --vd-shadow-lg: var(--shadow-lg);
+  --vd-glass-blur: var(--glass-blur, 12px);
+  --vd-glass-saturate: var(--glass-saturate, 1.8);
+  --vd-glass-bg-opacity: var(--glass-bg-opacity, .65);
+  --vd-glass-bg-light: var(--glass-bg-light, rgba(255, 255, 255, var(--vd-glass-bg-opacity)));
+  --vd-glass-bg-dark: var(--glass-bg-dark, rgba(30, 30, 30, var(--vd-glass-bg-opacity)));
+  --vd-glass-border-alpha: var(--glass-border-alpha, .18);
+  --vd-glass-border-light: var(--glass-border-light, rgba(255, 255, 255, var(--vd-glass-border-alpha)));
+  --vd-glass-border-dark: var(--glass-border-dark, #ffffff14);
+  --vd-glass-highlight-alpha: var(--glass-highlight-alpha, .25);
+  --vd-glass-shadow: var(--glass-shadow, 0 8px 32px #0000001f);
+  --vd-glass-noise-opacity: var(--glass-noise-opacity, .03);
   --vd-font-family-base: var(--font-family-sans);
   --vd-font-family-mono: var(--font-family-mono);
   --vd-font-size-xs: var(--font-size-xs);
@@ -53162,6 +53203,13 @@ select[multiple].vd-input option, select[multiple] option, .select-input[multipl
   position: relative;
 }
 
+.vd-card-glass {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-card-elevated, .vd-card {
   box-shadow: var(--card-shadow-elevated);
 }
@@ -53423,6 +53471,24 @@ a.vd-card:active {
   position: relative;
 }
 
+.vd-navbar-glass {
+  background: var(--vd-glass-bg-light);
+  border-bottom: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  transition: background var(--vd-transition-normal, .25s ease),
+    border-color var(--vd-transition-normal, .25s ease),
+    box-shadow var(--vd-transition-normal, .25s ease),
+    backdrop-filter var(--vd-transition-normal, .25s ease);
+}
+
+.vd-navbar-glass:not(.vd-navbar-scrolled) {
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  background: none;
+  border-bottom-color: #0000;
+}
+
 .vd-navbar-container {
   width: 100%;
   max-width: var(--container-max-width);
@@ -53791,6 +53857,12 @@ a.vd-card:active {
     box-shadow: -2px 0 8px #0000001a;
   }
 
+  .vd-navbar-glass .vd-navbar-menu {
+    background: var(--vd-glass-bg-light);
+    border-left: 1px solid var(--vd-glass-border-light);
+    -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  }
+
   .vd-navbar-menu.is-open {
     right: 0;
   }
@@ -54313,11 +54385,11 @@ a.vd-card:active {
 }
 
 :root {
-  --tooltip-bg: var(--color-gray-900);
-  --tooltip-bg-light: var(--color-white);
+  --tooltip-bg: var(--color-white);
+  --tooltip-bg-light: var(--color-gray-100);
   --tooltip-bg-dark: var(--color-gray-900);
-  --tooltip-text-color: var(--color-white);
-  --tooltip-text-color-light: var(--color-gray-900);
+  --tooltip-text-color: var(--color-gray-900);
+  --tooltip-text-color-light: var(--color-gray-800);
   --tooltip-text-color-dark: var(--color-white);
   --tooltip-padding-y: .5rem;
   --tooltip-padding-x: .8125rem;
@@ -54336,16 +54408,16 @@ a.vd-card:active {
 }
 
 [data-theme="dark"] {
-  --tooltip-bg: var(--color-gray-100);
-  --tooltip-text-color: var(--color-gray-900);
+  --tooltip-bg: var(--color-gray-900);
+  --tooltip-text-color: var(--color-white);
   --tooltip-bg-light: var(--color-gray-800);
   --tooltip-text-color-light: var(--color-gray-100);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --tooltip-bg: var(--color-gray-100);
-    --tooltip-text-color: var(--color-gray-900);
+    --tooltip-bg: var(--color-gray-900);
+    --tooltip-text-color: var(--color-white);
     --tooltip-bg-light: var(--color-gray-800);
     --tooltip-text-color-light: var(--color-gray-100);
   }
@@ -54374,6 +54446,14 @@ a.vd-card:active {
   position: absolute;
 }
 
+.vd-tooltip-glass {
+  background: var(--vd-glass-bg-light);
+  border: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  color: var(--text-primary);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-tooltip.is-visible {
   opacity: 1;
 }
@@ -54434,6 +54514,22 @@ a.vd-card:active {
   transform: translateY(-50%);
 }
 
+.vd-tooltip-glass.vd-tooltip-top:before, .vd-tooltip-glass[data-placement="top"]:before {
+  border-color: var(--vd-glass-bg-light) transparent transparent;
+}
+
+.vd-tooltip-glass.vd-tooltip-bottom:before, .vd-tooltip-glass[data-placement="bottom"]:before {
+  border-color: transparent transparent var(--vd-glass-bg-light);
+}
+
+.vd-tooltip-glass.vd-tooltip-left:before, .vd-tooltip-glass[data-placement="left"]:before {
+  border-color: transparent transparent transparent var(--vd-glass-bg-light);
+}
+
+.vd-tooltip-glass.vd-tooltip-right:before, .vd-tooltip-glass[data-placement="right"]:before {
+  border-color: transparent var(--vd-glass-bg-light) transparent transparent;
+}
+
 .vd-tooltip-light {
   background-color: var(--tooltip-bg-light);
   color: var(--tooltip-text-color-light);
@@ -54826,6 +54922,13 @@ a.vd-card:active {
   transform: translateY(-10px);
 }
 
+.vd-dropdown-glass .vd-dropdown-menu {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-dropdown-menu.is-open {
   opacity: 1;
   display: block;
@@ -55014,6 +55117,10 @@ a.vd-card:active {
   left: 0;
 }
 
+.vd-modal-backdrop.vd-modal-glass-backdrop {
+  -webkit-backdrop-filter: blur(calc(var(--vd-glass-blur) * .5));
+}
+
 .vd-modal-backdrop.is-visible {
   opacity: 1;
   pointer-events: all;
@@ -55069,6 +55176,13 @@ a.vd-card:active {
   position: relative;
 }
 
+.vd-modal-glass .vd-modal-content {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-modal-header {
   padding: var(--modal-header-padding);
   border-bottom: 1px solid var(--modal-border-color);
@@ -57693,6 +57807,13 @@ a.vd-avatar:focus-visible, button.vd-avatar:focus-visible {
   transform: translateX(100%);
 }
 
+.vd-toast-glass {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-toast.is-visible {
   opacity: 1;
   transform: translateX(0);
@@ -61695,6 +61816,364 @@ input.vd-doc-search-input {
   }
 }
 
+:root {
+  --vd-glass-float-shadow: 0 14px 42px #0003;
+  --vd-glass-float-translate-y: -2px;
+}
+
+.vd-glass, .vd-glass-md {
+  background: var(--vd-glass-bg-light);
+  border: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  isolation: isolate;
+  position: relative;
+  overflow: hidden;
+}
+
+.vd-glass:before, .vd-glass-md:before {
+  content: "";
+  background: linear-gradient(to bottom,
+    rgba(255, 255, 255, var(--vd-glass-highlight-alpha)) 0%,
+    #fff0 45%);
+  pointer-events: none;
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+}
+
+.vd-glass:after, .vd-glass-md:after {
+  content: "";
+  opacity: var(--vd-glass-noise-opacity);
+  pointer-events: none;
+  z-index: 2;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url('effects/%23n')' opacity='0.25'/%3E%3C/svg%3E");
+  position: absolute;
+  inset: 0;
+}
+
+.vd-glass > *, .vd-glass-md > * {
+  z-index: 3;
+  position: relative;
+}
+
+.vd-glass-sm {
+  --vd-glass-blur: 6px;
+  --vd-glass-saturate: 1.4;
+  --vd-glass-bg-opacity: .55;
+}
+
+.vd-glass-lg {
+  --vd-glass-blur: 20px;
+  --vd-glass-saturate: 2;
+  --vd-glass-bg-opacity: .72;
+}
+
+.vd-glass-xl {
+  --vd-glass-blur: 28px;
+  --vd-glass-saturate: 2.2;
+  --vd-glass-bg-opacity: .78;
+}
+
+.vd-glass-tinted {
+  background: linear-gradient(135deg,
+      var(--vd-glass-tint, var(--vd-color-primary-alpha-10)) 0%,
+      transparent 70%),
+    var(--vd-glass-bg-light);
+}
+
+.vd-glass-floating {
+  transition: transform var(--vd-transition-normal), box-shadow var(--vd-transition-normal);
+}
+
+.vd-glass-floating:hover, .vd-glass-floating:focus-within {
+  transform: translateY(var(--vd-glass-float-translate-y));
+  box-shadow: var(--vd-glass-float-shadow);
+}
+
+.vd-glass-contrast {
+  --vd-glass-bg-opacity: .82;
+  --vd-glass-border-alpha: .26;
+}
+
+[data-glass-scroll] {
+  transition: background var(--vd-transition-normal, .25s ease),
+    border-color var(--vd-transition-normal, .25s ease),
+    box-shadow var(--vd-transition-normal, .25s ease),
+    backdrop-filter var(--vd-transition-normal, .25s ease);
+}
+
+[data-glass-scroll]:not(.is-glass-active) {
+  box-shadow: none !important;
+  -webkit-backdrop-filter: none !important;
+  background: none !important;
+  border-color: #0000 !important;
+}
+
+[data-glass-scroll]:not(.is-glass-active):before, [data-glass-scroll]:not(.is-glass-active):after {
+  opacity: 0;
+}
+
+@supports not (backdrop-filter: blur(1px)) {
+  .vd-glass, .vd-glass-md {
+    background: var(--vd-bg-primary);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .vd-glass, .vd-glass-sm, .vd-glass-md, .vd-glass-lg, .vd-glass-xl {
+    -webkit-backdrop-filter: none;
+    background: var(--vd-bg-primary);
+    border-color: var(--vd-border-color);
+  }
+
+  .vd-glass:before, .vd-glass:after, .vd-glass-md:before, .vd-glass-md:after {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-glass-floating {
+    transition: none;
+  }
+
+  .vd-glass-floating:hover, .vd-glass-floating:focus-within {
+    transform: none;
+  }
+}
+
+:root {
+  --morph-duration: .75s;
+  --morph-easing: cubic-bezier(.2, .8, .35, 1);
+  --morph-blur-peak: 11px;
+  --morph-wave-color: var(--color-primary, #3b82f6);
+}
+
+.vd-morph, [data-vd-morph] {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+.vd-morph-wave {
+  background: radial-gradient(circle at 32% 28%,
+      #ffffff8c 0%,
+      #ffffff2e 18%,
+      transparent 38%),
+    radial-gradient(circle at 68% 70%,
+      #ffffff4d 0%,
+      transparent 30%),
+    radial-gradient(circle at 50% 50%,
+      color-mix(in srgb, var(--morph-wave-color) 96%, #a8d8ff) 0%,
+      color-mix(in srgb, var(--morph-wave-color) 82%, #7ec8ff) 35%,
+      color-mix(in srgb, var(--morph-wave-color) 70%, #5ba4f5) 65%,
+      color-mix(in srgb, var(--morph-wave-color) 90%, #4478f0) 100%);
+  pointer-events: none;
+  opacity: 0;
+  will-change: width, height, opacity, filter;
+  border-radius: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.vd-morph.is-morphing .vd-morph-wave {
+  animation: vd-morph-expand var(--morph-duration) var(--morph-easing) forwards;
+}
+
+.vd-morph.is-morphing .vd-morph-wave:after {
+  content: "";
+  background: radial-gradient(circle at 50% 50%,
+      color-mix(in srgb, var(--morph-wave-color) 70%, #b0e0ff) 0%,
+      color-mix(in srgb, var(--morph-wave-color) 50%, #88c0ff) 45%,
+      transparent 80%);
+  opacity: 0;
+  width: 0;
+  height: 0;
+  animation: vd-morph-expand2 var(--morph-duration) var(--morph-easing) 80ms forwards;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes vd-morph-expand {
+  0% {
+    opacity: 0;
+    filter: blur() saturate(2);
+    width: 0;
+    height: 0;
+  }
+
+  6% {
+    opacity: 1;
+    filter: blur(1px) saturate(2.2);
+  }
+
+  35% {
+    opacity: .92;
+    filter: blur(6px) saturate(1.7);
+  }
+
+  68% {
+    opacity: .6;
+    width: 360%;
+    height: 360%;
+    filter: blur(var(--morph-blur-peak)) saturate(1.3);
+  }
+
+  100% {
+    opacity: 0;
+    filter: blur(7px) saturate();
+    width: 360%;
+    height: 360%;
+  }
+}
+
+@keyframes vd-morph-expand2 {
+  0% {
+    opacity: 0;
+    filter: blur();
+    width: 0;
+    height: 0;
+  }
+
+  10% {
+    opacity: .7;
+    filter: blur(3px);
+  }
+
+  60% {
+    opacity: .38;
+    filter: blur(14px);
+    width: 280%;
+    height: 280%;
+  }
+
+  100% {
+    opacity: 0;
+    filter: blur(10px);
+    width: 280%;
+    height: 280%;
+  }
+}
+
+.vd-morph-shine {
+  pointer-events: none;
+  opacity: 0;
+  will-change: left, opacity;
+  background: linear-gradient(105deg, #0000 0%, #ffffff1a 35%, #ffffff85 50%, #ffffff1a 65%, #0000 100%);
+  width: 80%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: -110%;
+  transform: skewX(-12deg);
+}
+
+.vd-morph.is-morphing .vd-morph-shine {
+  animation: .72s cubic-bezier(.3, .65, .5, 1) 40ms forwards vd-morph-shine;
+}
+
+@keyframes vd-morph-shine {
+  0% {
+    opacity: 0;
+    left: -110%;
+  }
+
+  15% {
+    opacity: .9;
+  }
+
+  72% {
+    opacity: .4;
+  }
+
+  100% {
+    opacity: 0;
+    left: 130%;
+  }
+}
+
+.vd-morph.morph-done {
+  animation: .32s cubic-bezier(.34, 1.56, .64, 1) vd-morph-bounce;
+}
+
+@keyframes vd-morph-bounce {
+  0% {
+    transform: scale(.97);
+  }
+
+  60% {
+    transform: scale(1.025);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.vd-morph-content {
+  pointer-events: none;
+  will-change: opacity, transform, filter;
+  justify-content: center;
+  align-items: center;
+  gap: .45rem;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.vd-morph-current {
+  opacity: 1;
+  filter: blur();
+  z-index: 2;
+  transition: opacity .28s cubic-bezier(.4, 0, .6, 1), transform .28s cubic-bezier(.4, 0, .6, 1), filter .28s;
+  transform: scale(1) translateY(0);
+}
+
+.vd-morph-next {
+  opacity: 0;
+  filter: blur(3px);
+  z-index: 1;
+  transition: opacity .3s cubic-bezier(0, 0, .2, 1), transform .3s cubic-bezier(0, 0, .2, 1), filter .3s;
+  transform: scale(.86) translateY(4px);
+}
+
+.vd-morph.is-morphing .vd-morph-current {
+  opacity: 0;
+  filter: blur(4px);
+  transition-duration: .2s;
+  transition-delay: 0s;
+  transform: scale(.82) translateY(-4px);
+}
+
+.vd-morph.is-morphing .vd-morph-next {
+  opacity: 1;
+  filter: blur();
+  transition-duration: .3s;
+  transition-delay: .25s;
+  transform: scale(1) translateY(0);
+}
+
+.vd-morph-sm {
+  --morph-duration: .5s;
+  --morph-blur-peak: 7px;
+}
+
+.vd-morph-lg {
+  --morph-duration: 1s;
+  --morph-blur-peak: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-morph, .vd-morph-content, .vd-morph-wave, .vd-morph-shine {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 :root {
   --draggable-bg: var(--color-white);
   --draggable-border-color: var(--border-color);
@@ -62475,12 +62954,25 @@ input.vd-doc-search-input {
   display: inline-flex;
 }
 
+.vd-fab-glass {
+  background: var(--vd-glass-bg-light);
+  color: var(--text-primary);
+  border: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-fab:hover {
   background: var(--fab-hover-bg);
   box-shadow: var(--fab-hover-shadow);
   transform: scale(1.05);
 }
 
+.vd-fab-glass:hover {
+  background: var(--vd-glass-bg-light);
+  box-shadow: var(--vd-glass-float-shadow, var(--vd-glass-shadow));
+}
+
 .vd-fab:active {
   transform: scale(.95);
 }