@vanduo-oss/framework 1.4.6 → 1.5.0

package/dist/vanduo-core.css

@@ -1,4 +1,4 @@
-/*! Vanduo v1.4.6 | Built: 2026-06-13T10:32:26.875Z | git:82019ff | development */
+/*! Vanduo v1.5.0 | Built: 2026-06-18T19:13:58.613Z | git:8f0e1b5 | development */
 *, :before, :after {
   box-sizing: border-box;
 }
@@ -3216,6 +3216,441 @@ pre code {
   }
 }
 
+.vd-box {
+  --vd-box-pad: 0;
+  --vd-box-radius: 0;
+  padding: var(--vd-box-pad);
+  border-radius: var(--vd-box-radius);
+  display: block;
+}
+
+.vd-box[data-pad="0"] {
+  --vd-box-pad: 0;
+}
+
+.vd-box[data-pad="fib-1"] {
+  --vd-box-pad: var(--vd-space-fib-1);
+}
+
+.vd-box[data-pad="fib-2"] {
+  --vd-box-pad: var(--vd-space-fib-2);
+}
+
+.vd-box[data-pad="fib-3"] {
+  --vd-box-pad: var(--vd-space-fib-3);
+}
+
+.vd-box[data-pad="fib-5"] {
+  --vd-box-pad: var(--vd-space-fib-5);
+}
+
+.vd-box[data-pad="fib-8"] {
+  --vd-box-pad: var(--vd-space-fib-8);
+}
+
+.vd-box[data-pad="fib-13"] {
+  --vd-box-pad: var(--vd-space-fib-13);
+}
+
+.vd-box[data-pad="fib-21"] {
+  --vd-box-pad: var(--vd-space-fib-21);
+}
+
+.vd-box[data-pad="fib-34"] {
+  --vd-box-pad: var(--vd-space-fib-34);
+}
+
+.vd-box[data-pad="fib-55"] {
+  --vd-box-pad: var(--vd-space-fib-55);
+}
+
+.vd-box[data-bg="primary"] {
+  background-color: var(--vd-bg-primary);
+}
+
+.vd-box[data-bg="secondary"] {
+  background-color: var(--vd-bg-secondary);
+}
+
+.vd-box[data-bg="tertiary"] {
+  background-color: var(--vd-bg-tertiary);
+}
+
+.vd-box[data-bg="dark"] {
+  background-color: var(--vd-bg-dark);
+}
+
+.vd-box[data-bg="darker"] {
+  background-color: var(--vd-bg-darker);
+}
+
+.vd-box[data-round="none"] {
+  --vd-box-radius: 0;
+}
+
+.vd-box[data-round="sm"] {
+  --vd-box-radius: var(--vd-radius-fib-2);
+}
+
+.vd-box[data-round="md"] {
+  --vd-box-radius: var(--vd-radius-fib-5);
+}
+
+.vd-box[data-round="lg"] {
+  --vd-box-radius: var(--vd-radius-fib-8);
+}
+
+.vd-box[data-round="xl"] {
+  --vd-box-radius: var(--vd-radius-fib-13);
+}
+
+.vd-box[data-round="2xl"] {
+  --vd-box-radius: var(--vd-radius-fib-21);
+}
+
+.vd-box[data-round="full"] {
+  --vd-box-radius: 9999px;
+}
+
+.vd-box[data-border] {
+  border: 1px solid var(--vd-border-color);
+}
+
+.vd-stack {
+  --vd-stack-gap: 0;
+  gap: var(--vd-stack-gap);
+  flex-direction: column;
+  display: flex;
+}
+
+.vd-stack[data-gap="0"] {
+  --vd-stack-gap: 0;
+}
+
+.vd-stack[data-gap="fib-1"] {
+  --vd-stack-gap: var(--vd-space-fib-1);
+}
+
+.vd-stack[data-gap="fib-2"] {
+  --vd-stack-gap: var(--vd-space-fib-2);
+}
+
+.vd-stack[data-gap="fib-3"] {
+  --vd-stack-gap: var(--vd-space-fib-3);
+}
+
+.vd-stack[data-gap="fib-5"] {
+  --vd-stack-gap: var(--vd-space-fib-5);
+}
+
+.vd-stack[data-gap="fib-8"] {
+  --vd-stack-gap: var(--vd-space-fib-8);
+}
+
+.vd-stack[data-gap="fib-13"] {
+  --vd-stack-gap: var(--vd-space-fib-13);
+}
+
+.vd-stack[data-gap="fib-21"] {
+  --vd-stack-gap: var(--vd-space-fib-21);
+}
+
+.vd-stack[data-gap="fib-34"] {
+  --vd-stack-gap: var(--vd-space-fib-34);
+}
+
+.vd-stack[data-gap="fib-55"] {
+  --vd-stack-gap: var(--vd-space-fib-55);
+}
+
+.vd-stack[data-align="start"] {
+  align-items: flex-start;
+}
+
+.vd-stack[data-align="center"] {
+  align-items: center;
+}
+
+.vd-stack[data-align="end"] {
+  align-items: flex-end;
+}
+
+.vd-stack[data-align="stretch"] {
+  align-items: stretch;
+}
+
+.vd-inline {
+  --vd-inline-gap: 0;
+  align-items: center;
+  gap: var(--vd-inline-gap);
+  flex-flow: wrap;
+  display: flex;
+}
+
+.vd-inline[data-gap="0"] {
+  --vd-inline-gap: 0;
+}
+
+.vd-inline[data-gap="fib-1"] {
+  --vd-inline-gap: var(--vd-space-fib-1);
+}
+
+.vd-inline[data-gap="fib-2"] {
+  --vd-inline-gap: var(--vd-space-fib-2);
+}
+
+.vd-inline[data-gap="fib-3"] {
+  --vd-inline-gap: var(--vd-space-fib-3);
+}
+
+.vd-inline[data-gap="fib-5"] {
+  --vd-inline-gap: var(--vd-space-fib-5);
+}
+
+.vd-inline[data-gap="fib-8"] {
+  --vd-inline-gap: var(--vd-space-fib-8);
+}
+
+.vd-inline[data-gap="fib-13"] {
+  --vd-inline-gap: var(--vd-space-fib-13);
+}
+
+.vd-inline[data-gap="fib-21"] {
+  --vd-inline-gap: var(--vd-space-fib-21);
+}
+
+.vd-inline[data-gap="fib-34"] {
+  --vd-inline-gap: var(--vd-space-fib-34);
+}
+
+.vd-inline[data-gap="fib-55"] {
+  --vd-inline-gap: var(--vd-space-fib-55);
+}
+
+.vd-inline[data-align="start"] {
+  align-items: flex-start;
+}
+
+.vd-inline[data-align="center"] {
+  align-items: center;
+}
+
+.vd-inline[data-align="end"] {
+  align-items: flex-end;
+}
+
+.vd-inline[data-align="baseline"] {
+  align-items: baseline;
+}
+
+.vd-inline[data-align="stretch"] {
+  align-items: stretch;
+}
+
+.vd-inline[data-justify="start"] {
+  justify-content: flex-start;
+}
+
+.vd-inline[data-justify="center"] {
+  justify-content: center;
+}
+
+.vd-inline[data-justify="end"] {
+  justify-content: flex-end;
+}
+
+.vd-inline[data-justify="between"] {
+  justify-content: space-between;
+}
+
+.vd-inline[data-justify="around"] {
+  justify-content: space-around;
+}
+
+.vd-inline[data-justify="evenly"] {
+  justify-content: space-evenly;
+}
+
+.vd-inline[data-wrap="nowrap"] {
+  flex-wrap: nowrap;
+}
+
+.vd-center {
+  --vd-center-max: none;
+  max-width: var(--vd-center-max);
+  margin-inline: auto;
+  display: block;
+}
+
+.vd-center[data-max="fib-377"] {
+  --vd-center-max: 377px;
+}
+
+.vd-center[data-max="fib-610"] {
+  --vd-center-max: 610px;
+}
+
+.vd-center[data-max="fib-987"] {
+  --vd-center-max: 987px;
+}
+
+.vd-center[data-axis="both"] {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.vd-center[data-axis="horizontal"] {
+  justify-content: center;
+  display: flex;
+}
+
+.vd-center[data-axis="vertical"] {
+  align-items: center;
+  display: flex;
+}
+
+.vd-frame {
+  --vd-frame-ratio: 1.618;
+  aspect-ratio: var(--vd-frame-ratio);
+  display: block;
+  overflow: hidden;
+}
+
+.vd-frame > img, .vd-frame > video, .vd-frame > canvas, .vd-frame > svg, .vd-frame > iframe {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.vd-frame[data-ratio="golden"] {
+  --vd-frame-ratio: 1.618;
+}
+
+.vd-frame[data-ratio="golden-portrait"] {
+  --vd-frame-ratio: .618;
+}
+
+.vd-frame[data-ratio="square"] {
+  --vd-frame-ratio: 1;
+}
+
+.vd-frame[data-ratio="16-9"] {
+  --vd-frame-ratio: 1.7778;
+}
+
+.vd-frame[data-ratio="4-3"] {
+  --vd-frame-ratio: 1.3333;
+}
+
+.vd-frame[data-ratio="3-2"] {
+  --vd-frame-ratio: 1.5;
+}
+
+.vd-frame[data-ratio="21-9"] {
+  --vd-frame-ratio: 2.3333;
+}
+
+.vd-cover {
+  --vd-cover-min: 100vh;
+  --vd-cover-gap: 0;
+  justify-content: center;
+  gap: var(--vd-cover-gap);
+  min-height: var(--vd-cover-min);
+  flex-direction: column;
+  display: flex;
+}
+
+.vd-cover[data-min="screen"] {
+  --vd-cover-min: 100vh;
+}
+
+.vd-cover[data-min="half"] {
+  --vd-cover-min: 50vh;
+}
+
+.vd-cover[data-min="fib-610"] {
+  --vd-cover-min: 610px;
+}
+
+.vd-cover[data-min="fib-987"] {
+  --vd-cover-min: 987px;
+}
+
+.vd-cover[data-gap="fib-3"] {
+  --vd-cover-gap: var(--vd-space-fib-3);
+}
+
+.vd-cover[data-gap="fib-5"] {
+  --vd-cover-gap: var(--vd-space-fib-5);
+}
+
+.vd-cover[data-gap="fib-8"] {
+  --vd-cover-gap: var(--vd-space-fib-8);
+}
+
+.vd-cover[data-gap="fib-13"] {
+  --vd-cover-gap: var(--vd-space-fib-13);
+}
+
+.vd-cover[data-gap="fib-21"] {
+  --vd-cover-gap: var(--vd-space-fib-21);
+}
+
+.vd-cover[data-gap="fib-34"] {
+  --vd-cover-gap: var(--vd-space-fib-34);
+}
+
+.vd-switcher {
+  --vd-switcher-threshold: 610px;
+  --vd-switcher-gap: 0;
+  gap: var(--vd-switcher-gap);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.vd-switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--vd-switcher-threshold) - 100%) * 999);
+}
+
+.vd-switcher[data-threshold="fib-377"] {
+  --vd-switcher-threshold: 377px;
+}
+
+.vd-switcher[data-threshold="fib-610"] {
+  --vd-switcher-threshold: 610px;
+}
+
+.vd-switcher[data-threshold="fib-987"] {
+  --vd-switcher-threshold: 987px;
+}
+
+.vd-switcher[data-gap="fib-3"] {
+  --vd-switcher-gap: var(--vd-space-fib-3);
+}
+
+.vd-switcher[data-gap="fib-5"] {
+  --vd-switcher-gap: var(--vd-space-fib-5);
+}
+
+.vd-switcher[data-gap="fib-8"] {
+  --vd-switcher-gap: var(--vd-space-fib-8);
+}
+
+.vd-switcher[data-gap="fib-13"] {
+  --vd-switcher-gap: var(--vd-space-fib-13);
+}
+
+.vd-switcher[data-gap="fib-21"] {
+  --vd-switcher-gap: var(--vd-space-fib-21);
+}
+
+.vd-switcher[data-gap="fib-34"] {
+  --vd-switcher-gap: var(--vd-space-fib-34);
+}
+
 :root {
   --vd-phi: 1.618;
   --vd-phi-inverse: .618;