@vanduo-oss/framework 1.3.3 → 1.3.4

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.4 | Built: 2026-04-14T21:21:55.517Z | git:73e3db5 | 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;
   }
@@ -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,132 @@ 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 {
   --draggable-bg: var(--color-white);
   --draggable-border-color: var(--border-color);
@@ -62475,12 +62722,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);
 }