@24vlh/vds 0.3.4 → 0.3.6

package/dist/components/doc-block.css

@@ -22,7 +22,6 @@
 /* ---------------------------------------------------------
    1. DOC BLOCK TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-dock-block],
 .vds-dock-block {
     --doc-block-border: var(--color-border-subtle);
@@ -34,7 +33,6 @@
 /* ---------------------------------------------------------
    2. ROOT BLOCK
 --------------------------------------------------------- */
-
 .doc-block {
     display: flex;
     flex-direction: column;
@@ -73,7 +71,6 @@
 /* ---------------------------------------------------------
    3. HEADER
 --------------------------------------------------------- */
-
 .doc-block__header {
     display: flex;
     flex-direction: column;
@@ -132,7 +129,6 @@
 /* ---------------------------------------------------------
    4. BODY
 --------------------------------------------------------- */
-
 .doc-block__body {
     display: flex;
     flex-direction: column;
@@ -150,7 +146,6 @@
 /* ---------------------------------------------------------
    5. PREVIEW AREA
 --------------------------------------------------------- */
-
 .doc-block__preview {
     position: relative;
     padding: var(--space-8);
@@ -191,7 +186,6 @@
 /* ---------------------------------------------------------
    6. SPLIT LAYOUTS
 --------------------------------------------------------- */
-
 .doc-block--split {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -224,7 +218,6 @@
 /* ---------------------------------------------------------
    7. CODE BLOCK (core)
 --------------------------------------------------------- */
-
 .doc-block__code {
     position: relative;
 
@@ -256,7 +249,6 @@
 /* ---------------------------------------------------------
    8. CODE TOOLBAR
 --------------------------------------------------------- */
-
 .doc-block__toolbar {
     position: absolute;
     top: var(--space-2);
@@ -320,7 +312,6 @@
 /* ---------------------------------------------------------
    9. COLLAPSIBLE VARIANT
 --------------------------------------------------------- */
-
 .doc-block--collapsed .doc-block__code {
     max-height: 12rem;
     overflow: hidden;
@@ -345,7 +336,6 @@
 /* ---------------------------------------------------------
    10. META
 --------------------------------------------------------- */
-
 .doc-block__meta {
     font-size: var(--text-xs);
     color: var(--color-text-muted);
@@ -367,7 +357,6 @@
 /* ---------------------------------------------------------
    11. RESPONSIVE TUNING
 --------------------------------------------------------- */
-
 @media (max-width: 768px) {
 
     .doc-block {
@@ -393,7 +382,6 @@
 /* ---------------------------------------------------------
    12. Syntax Highlighting
 --------------------------------------------------------- */
-
 .doc-block__code .token.keyword {
     color: var(--code-syntax-keyword);
 }
@@ -430,7 +418,6 @@
 /* ---------------------------------------------------------
    13. Line Numbered
 --------------------------------------------------------- */
-
 .doc-block__code--numbered {
     position: relative;
 }
@@ -463,7 +450,6 @@
 /* ---------------------------------------------------------
    14. Compact Variant
 --------------------------------------------------------- */
-
 .doc-block--compact {
     gap: var(--space-6);
     padding-top: var(--space-8);
@@ -492,7 +478,6 @@
     <div class="doc-block__code">…new code…</div>
    </div>
 --------------------------------------------------------- */
-
 .doc-block--diff {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -532,7 +517,6 @@
 /* ---------------------------------------------------------
    16. Copy on Select State
 --------------------------------------------------------- */
-
 .doc-block__code.is-copied {
     outline: 2px solid var(--color-accent);
     outline-offset: 2px;
@@ -542,7 +526,6 @@
 /* ---------------------------------------------------------
    17. HEADER EXTENSIONS (eyebrow, pills, subtitle)
 --------------------------------------------------------- */
-
 .doc-block__eyebrow {
     font-size: var(--text-xxs);
     font-weight: var(--font-weight-semibold);
@@ -572,7 +555,6 @@
 /* ---------------------------------------------------------
    18. AUTHORING HELPERS (stack, columns, grid)
 --------------------------------------------------------- */
-
 .doc-block__stack-sm {
     display: flex;
     flex-direction: column;
@@ -615,7 +597,6 @@
 /* ---------------------------------------------------------
    19. STEPS SYSTEM (tutorial / procedural)
 --------------------------------------------------------- */
-
 .doc-block__steps {
     counter-reset: step-counter;
     display: flex;
@@ -650,7 +631,6 @@
 /* ---------------------------------------------------------
    20. CALLOUTS (highlight / do-dont)
 --------------------------------------------------------- */
-
 .doc-block__highlight {
     border-left: var(--doc-block-highlight-border-width) solid var(--color-accent);
     padding: var(--doc-block-highlight-pad);
@@ -697,7 +677,6 @@
    21. SEMANTIC PRESETS (concept / pattern / api / example)
    - Visual density & emphasis only. Non-destructive.
 --------------------------------------------------------- */
-
 .doc-block--concept .doc-block__body {
     gap: var(--space-10);
 }
@@ -726,7 +705,6 @@
 /* ---------------------------------------------------------
    22. LINE NUMBERING - SOFT VARIANT
 --------------------------------------------------------- */
-
 .doc-block__code--numbered-soft code {
     counter-reset: line;
     padding-left: calc(var(--space-2) + 1.5ch);
@@ -755,7 +733,6 @@
 /* ---------------------------------------------------------
    23. COLLAPSE / EXPAND HOOKS (additive)
 --------------------------------------------------------- */
-
 .doc-block--expanded .doc-block__code {
     max-height: none;
 }
@@ -773,7 +750,6 @@
 /* ---------------------------------------------------------
    24. REDUCED MOTION (doc-block scoped)
 --------------------------------------------------------- */
-
 @media (prefers-reduced-motion: reduce) {
     .doc-block__action,
     .doc-block__code.is-copied {

package/dist/components/doc-block.min.css

@@ -1 +1 @@
-.vds-dock-block,[data-vds-dock-block]{--doc-block-border:var(--color-border-subtle);--doc-block-highlight-border-width:var(--border-width-strong);--doc-block-highlight-pad:var(--space-6)}.doc-block{border-bottom:1px solid var(--color-border-subtle);display:flex;flex-direction:column;gap:var(--space-12);padding-bottom:var(--space-14);padding-top:var(--space-14)}.doc-block:last-child{border-bottom:none}.doc-block--surface{background-color:var(--color-surface-subtle)}.doc-block--elevated,.doc-block--surface{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-12)}.doc-block--elevated{background-color:var(--color-surface);box-shadow:var(--shadow-1)}.doc-block--contrast{background-color:var(--color-bg-soft);border-left:var(--border-width-strong) solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-14)}.doc-block__header{display:flex;flex-direction:column;gap:var(--space-3)}.doc-block__title{font-size:var(--text-xl)}.doc-block__subtitle,.doc-block__title{color:var(--color-text);font-weight:var(--font-weight-semibold);margin:0}.doc-block__subtitle{font-size:var(--text-md)}.doc-block__summary{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.doc-block__section{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4);margin-top:var(--space-4)}.doc-block__subsection{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-2);margin-top:var(--space-2)}.doc-block__subsection--compact{gap:var(--space-1);margin-bottom:var(--space-1_5);margin-top:var(--space-1_5)}.doc-block__description{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal);margin:0}.doc-block__body{display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__body--tight{gap:var(--space-3)}.doc-block__body--compact{gap:var(--space-2)}.doc-block__preview{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-8);position:relative}.doc-block__preview .card__body{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}.doc-block__preview--transparent{background-color:transparent}.doc-block__preview--inline{align-items:center;display:inline-flex;gap:var(--space-4);padding:var(--space-4)}.doc-block__preview code:not(pre code){background:var(--code-inline-bg);border:1px solid var(--code-inline-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);font-weight:500;padding:.04em .3em}.doc-block--split{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.doc-block--split-left{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:2fr 1fr}.doc-block--split-right{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 2fr}@media (max-width:1024px){.doc-block--split,.doc-block--split-left,.doc-block--split-right{grid-template-columns:1fr}}.doc-block__code{-webkit-overflow-scrolling:touch;background:var(--code-block-bg);border:1px solid var(--doc-block-border);border-radius:var(--radius-lg);color:var(--color-text);font-family:var(--font-family-mono),monospace;font-size:var(--text-sm);line-height:var(--line-height-relaxed);overflow-x:auto;overflow-y:visible;padding:var(--space-8);padding-top:calc(var(--space-12) + var(--space-4));position:relative}.doc-block__code code,.doc-block__code pre{background:none;border:none;padding:0}.doc-block__toolbar{align-items:center;display:flex;justify-content:space-between;left:0;padding-left:var(--space-4);padding-right:var(--space-4);pointer-events:none;position:absolute;right:0;top:var(--space-2)}.doc-block__lang{background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:600;letter-spacing:.04em;padding:var(--space-1) var(--space-3);pointer-events:auto;text-transform:uppercase}.doc-block__actions{display:flex;gap:var(--space-2);pointer-events:auto}.doc-block__action{background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-xxs);font-weight:600;line-height:1;padding:var(--space-1) var(--space-3);transition:background-color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-block__action:hover{background-color:var(--doc-block-action-hover-bg);border-color:var(--doc-block-action-hover-border);color:var(--doc-block-action-hover-text)}.doc-block__action--active{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.doc-block--collapsed .doc-block__code{max-height:12rem;overflow:hidden}.doc-block--collapsed .doc-block__code:after{background:linear-gradient(to bottom,transparent 0,transparent 60%,var(--code-block-bg) 100%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.doc-block__meta{color:var(--color-text-muted);font-size:var(--text-xs);margin-top:var(--space-3)}.doc-block__note--danger{color:var(--color-danger-strong)}.doc-block__note--warning{color:var(--color-warning-strong)}.doc-block__note--info{color:var(--color-info-strong)}@media (max-width:768px){.doc-block{gap:var(--space-10);padding-bottom:var(--space-12);padding-top:var(--space-12)}.doc-block__title{font-size:var(--text-lg)}.doc-block__code,.doc-block__preview{padding:var(--space-6)}.doc-block__code{padding-top:calc(var(--space-10) + var(--space-2))}}.doc-block__code .token.keyword{color:var(--code-syntax-keyword)}.doc-block__code .token.string{color:var(--code-syntax-string)}.doc-block__code .token.number{color:var(--code-syntax-number)}.doc-block__code .token.operator{color:var(--code-syntax-operator)}.doc-block__code .token.comment{color:var(--code-syntax-comment);font-style:italic}.doc-block__code .token.constant{color:var(--code-syntax-constant)}.doc-block__code .token.func{color:var(--code-syntax-function)}.doc-block__code .token.var{color:var(--code-syntax-variable)}.doc-block__code--numbered{position:relative}.doc-block__code--numbered code{counter-reset:line;padding-left:calc(var(--space-2) + 2ch)}.doc-block__code--numbered code>*{counter-increment:line;padding-left:var(--space-2);position:relative}.doc-block__code--numbered code>:before{color:var(--color-text-soft,var(--color-text-muted));content:counter(line);font-size:var(--text-xxs,var(--text-xs));left:calc((var(--space-6) + 2ch)*-1);padding-right:var(--space-2);position:absolute;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(var(--space-6) + 2ch)}.doc-block--compact{gap:var(--space-6);padding-bottom:var(--space-8);padding-top:var(--space-8)}.doc-block--compact .doc-block__title{font-size:var(--text-lg)}.doc-block--compact .doc-block__summary{font-size:var(--text-xs)}.doc-block--compact .doc-block__code{font-size:var(--text-xs);line-height:var(--line-height-snug);padding:var(--space-5);padding-top:calc(var(--space-8) + var(--space-2))}.doc-block--diff{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.doc-block--diff-added{background-color:var(--semantic-success-bg)}.doc-block--diff-removed{background-color:var(--semantic-danger-bg)}.doc-block--diff .doc-block__code{border-radius:var(--radius-lg);padding:var(--space-6)}.doc-block--diff-line-add{background-color:var(--semantic-success-bg);border-left:3px solid var(--semantic-success-border)}.doc-block--diff-line-remove{background-color:var(--semantic-danger-bg);border-left:3px solid var(--semantic-danger-border)}@media (max-width:1024px){.doc-block--diff{grid-template-columns:1fr}}.doc-block__code.is-copied{outline:2px solid var(--color-accent);outline-offset:2px;transition:outline var(--transition-fast)}.doc-block__eyebrow{color:var(--color-text-soft);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--space-2);text-transform:uppercase}.doc-block__pills{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.doc-block__pill{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);line-height:var(--space-4);padding:0 var(--space-2)}.doc-block__stack-sm{display:flex;flex-direction:column;gap:var(--space-3)}.doc-block__stack-md{display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.doc-block__columns-2{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(2,1fr)}.doc-block__columns-3{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(3,1fr)}@media (max-width:1024px){.doc-block__columns-2,.doc-block__columns-3{grid-template-columns:1fr}}.doc-block__steps{counter-reset:step-counter;display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__steps>li{counter-increment:step-counter;list-style:none;padding-left:var(--space-8);position:relative}.doc-block__steps>li:before{align-items:center;background:var(--color-accent-soft);border-radius:var(--radius-full);color:var(--color-on-accent);content:counter(step-counter);display:flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);height:var(--space-6);justify-content:center;left:0;position:absolute;top:.1em;width:var(--space-6)}.doc-block__highlight{background:var(--color-surface-subtle);border-left:var(--doc-block-highlight-border-width) solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-text);margin-bottom:var(--space-3);margin-top:var(--space-3);padding:var(--doc-block-highlight-pad)}.doc-block__do-dont{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:1fr 1fr}.doc-block__do,.doc-block__dont{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-6)}.doc-block__do{background:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.doc-block__dont{background:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}@media (max-width:1024px){.doc-block__do-dont{grid-template-columns:1fr}}.doc-block--concept .doc-block__body{gap:var(--space-10)}.doc-block--pattern .doc-block__preview{border-left:var(--border-width-strong) solid var(--color-accent)}.doc-block--api .doc-block__body{gap:var(--space-8)}.doc-block--example{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}@media (max-width:1024px){.doc-block--example{grid-template-columns:1fr}}.doc-block__code--numbered-soft code{counter-reset:line;padding-left:calc(var(--space-2) + 1.5ch)}.doc-block__code--numbered-soft code>*{counter-increment:line;padding-left:var(--space-2);position:relative}.doc-block__code--numbered-soft code>:before{color:var(--color-text-soft);content:counter(line);font-size:var(--text-xxs);left:calc((var(--space-5) + 1.5ch)*-1);padding-right:var(--space-2);position:absolute;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(var(--space-5) + 1.5ch)}.doc-block--expanded .doc-block__code{max-height:none}.doc-block--expanded .doc-block__code:after{display:none}.doc-block__code-toggle{color:var(--color-text-muted);cursor:pointer;font-size:var(--text-xs)}@media (prefers-reduced-motion:reduce){.doc-block__action,.doc-block__code.is-copied{transition:none!important}}
+.vds-dock-block,[data-vds-dock-block]{--doc-block-border:var(--color-border-subtle);--doc-block-highlight-border-width:var(--border-width-strong);--doc-block-highlight-pad:var(--space-6)}.doc-block{border-bottom:1px solid var(--color-border-subtle);display:flex;flex-direction:column;gap:var(--space-12);padding-bottom:var(--space-14);padding-top:var(--space-14)}.doc-block:last-child{border-bottom:none}.doc-block--surface{background-color:var(--color-surface-subtle)}.doc-block--elevated,.doc-block--surface{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-12)}.doc-block--elevated{background-color:var(--color-surface);box-shadow:var(--shadow-1)}.doc-block--contrast{background-color:var(--color-bg-soft);border-left:var(--border-width-strong) solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-14)}.doc-block__header{display:flex;flex-direction:column;gap:var(--space-3)}.doc-block__title{font-size:var(--text-xl)}.doc-block__subtitle,.doc-block__title{color:var(--color-text);font-weight:var(--font-weight-semibold);margin:0}.doc-block__subtitle{font-size:var(--text-md)}.doc-block__summary{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.doc-block__section{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4);margin-top:var(--space-4)}.doc-block__subsection{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-2);margin-top:var(--space-2)}.doc-block__subsection--compact{gap:var(--space-1);margin-bottom:var(--space-1_5);margin-top:var(--space-1_5)}.doc-block__description{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal);margin:0}.doc-block__body{display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__body--tight{gap:var(--space-3)}.doc-block__body--compact{gap:var(--space-2)}.doc-block__preview{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-8);position:relative}.doc-block__preview .card__body{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}.doc-block__preview--transparent{background-color:transparent}.doc-block__preview--inline{align-items:center;display:inline-flex;gap:var(--space-4);padding:var(--space-4)}.doc-block__preview code:not(pre code){background:var(--code-inline-bg);border:1px solid var(--code-inline-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);font-weight:500;padding:.04em .3em}.doc-block--split{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-12);gap:var(--space-12)}.doc-block--split-left{display:grid;grid-template-columns:2fr 1fr;grid-gap:var(--space-12);gap:var(--space-12)}.doc-block--split-right{display:grid;grid-template-columns:1fr 2fr;grid-gap:var(--space-12);gap:var(--space-12)}@media (max-width:1024px){.doc-block--split,.doc-block--split-left,.doc-block--split-right{grid-template-columns:1fr}}.doc-block__code{background:var(--code-block-bg);border:1px solid var(--doc-block-border);border-radius:var(--radius-lg);color:var(--color-text);font-family:var(--font-family-mono),monospace;font-size:var(--text-sm);line-height:var(--line-height-relaxed);overflow-x:auto;overflow-y:visible;padding:var(--space-8);padding-top:calc(var(--space-12) + var(--space-4));position:relative;-webkit-overflow-scrolling:touch}.doc-block__code code,.doc-block__code pre{background:none;border:none;padding:0}.doc-block__toolbar{align-items:center;display:flex;justify-content:space-between;left:0;padding-left:var(--space-4);padding-right:var(--space-4);pointer-events:none;position:absolute;right:0;top:var(--space-2)}.doc-block__lang{background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:600;letter-spacing:.04em;padding:var(--space-1) var(--space-3);pointer-events:auto;text-transform:uppercase}.doc-block__actions{display:flex;gap:var(--space-2);pointer-events:auto}.doc-block__action{background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-xxs);font-weight:600;line-height:1;padding:var(--space-1) var(--space-3);transition:background-color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-block__action:hover{background-color:var(--doc-block-action-hover-bg);border-color:var(--doc-block-action-hover-border);color:var(--doc-block-action-hover-text)}.doc-block__action--active{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.doc-block--collapsed .doc-block__code{max-height:12rem;overflow:hidden}.doc-block--collapsed .doc-block__code:after{background:linear-gradient(to bottom,transparent 0,transparent 60%,var(--code-block-bg) 100%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.doc-block__meta{color:var(--color-text-muted);font-size:var(--text-xs);margin-top:var(--space-3)}.doc-block__note--danger{color:var(--color-danger-strong)}.doc-block__note--warning{color:var(--color-warning-strong)}.doc-block__note--info{color:var(--color-info-strong)}@media (max-width:768px){.doc-block{gap:var(--space-10);padding-bottom:var(--space-12);padding-top:var(--space-12)}.doc-block__title{font-size:var(--text-lg)}.doc-block__code,.doc-block__preview{padding:var(--space-6)}.doc-block__code{padding-top:calc(var(--space-10) + var(--space-2))}}.doc-block__code .token.keyword{color:var(--code-syntax-keyword)}.doc-block__code .token.string{color:var(--code-syntax-string)}.doc-block__code .token.number{color:var(--code-syntax-number)}.doc-block__code .token.operator{color:var(--code-syntax-operator)}.doc-block__code .token.comment{color:var(--code-syntax-comment);font-style:italic}.doc-block__code .token.constant{color:var(--code-syntax-constant)}.doc-block__code .token.func{color:var(--code-syntax-function)}.doc-block__code .token.var{color:var(--code-syntax-variable)}.doc-block__code--numbered{position:relative}.doc-block__code--numbered code{counter-reset:line;padding-left:calc(var(--space-2) + 2ch)}.doc-block__code--numbered code>*{counter-increment:line;padding-left:var(--space-2);position:relative}.doc-block__code--numbered code>:before{color:var(--color-text-soft,var(--color-text-muted));content:counter(line);font-size:var(--text-xxs,var(--text-xs));left:calc((var(--space-6) + 2ch)*-1);padding-right:var(--space-2);position:absolute;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(var(--space-6) + 2ch)}.doc-block--compact{gap:var(--space-6);padding-bottom:var(--space-8);padding-top:var(--space-8)}.doc-block--compact .doc-block__title{font-size:var(--text-lg)}.doc-block--compact .doc-block__summary{font-size:var(--text-xs)}.doc-block--compact .doc-block__code{font-size:var(--text-xs);line-height:var(--line-height-snug);padding:var(--space-5);padding-top:calc(var(--space-8) + var(--space-2))}.doc-block--diff{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-12);gap:var(--space-12)}.doc-block--diff-added{background-color:var(--semantic-success-bg)}.doc-block--diff-removed{background-color:var(--semantic-danger-bg)}.doc-block--diff .doc-block__code{border-radius:var(--radius-lg);padding:var(--space-6)}.doc-block--diff-line-add{background-color:var(--semantic-success-bg);border-left:3px solid var(--semantic-success-border)}.doc-block--diff-line-remove{background-color:var(--semantic-danger-bg);border-left:3px solid var(--semantic-danger-border)}@media (max-width:1024px){.doc-block--diff{grid-template-columns:1fr}}.doc-block__code.is-copied{outline:2px solid var(--color-accent);outline-offset:2px;transition:outline var(--transition-fast)}.doc-block__eyebrow{color:var(--color-text-soft);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--space-2);text-transform:uppercase}.doc-block__pills{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.doc-block__pill{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);line-height:var(--space-4);padding:0 var(--space-2)}.doc-block__stack-sm{display:flex;flex-direction:column;gap:var(--space-3)}.doc-block__stack-md{display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.doc-block__columns-2{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:var(--space-6);gap:var(--space-6)}.doc-block__columns-3{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--space-6);gap:var(--space-6)}@media (max-width:1024px){.doc-block__columns-2,.doc-block__columns-3{grid-template-columns:1fr}}.doc-block__steps{counter-reset:step-counter;display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__steps>li{counter-increment:step-counter;list-style:none;padding-left:var(--space-8);position:relative}.doc-block__steps>li:before{align-items:center;background:var(--color-accent-soft);border-radius:var(--radius-full);color:var(--color-on-accent);content:counter(step-counter);display:flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);height:var(--space-6);justify-content:center;left:0;position:absolute;top:.1em;width:var(--space-6)}.doc-block__highlight{background:var(--color-surface-subtle);border-left:var(--doc-block-highlight-border-width) solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-text);margin-bottom:var(--space-3);margin-top:var(--space-3);padding:var(--doc-block-highlight-pad)}.doc-block__do-dont{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-6);gap:var(--space-6)}.doc-block__do,.doc-block__dont{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-6)}.doc-block__do{background:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.doc-block__dont{background:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}@media (max-width:1024px){.doc-block__do-dont{grid-template-columns:1fr}}.doc-block--concept .doc-block__body{gap:var(--space-10)}.doc-block--pattern .doc-block__preview{border-left:var(--border-width-strong) solid var(--color-accent)}.doc-block--api .doc-block__body{gap:var(--space-8)}.doc-block--example{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-12);gap:var(--space-12)}@media (max-width:1024px){.doc-block--example{grid-template-columns:1fr}}.doc-block__code--numbered-soft code{counter-reset:line;padding-left:calc(var(--space-2) + 1.5ch)}.doc-block__code--numbered-soft code>*{counter-increment:line;padding-left:var(--space-2);position:relative}.doc-block__code--numbered-soft code>:before{color:var(--color-text-soft);content:counter(line);font-size:var(--text-xxs);left:calc((var(--space-5) + 1.5ch)*-1);padding-right:var(--space-2);position:absolute;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(var(--space-5) + 1.5ch)}.doc-block--expanded .doc-block__code{max-height:none}.doc-block--expanded .doc-block__code:after{display:none}.doc-block__code-toggle{color:var(--color-text-muted);cursor:pointer;font-size:var(--text-xs)}@media (prefers-reduced-motion:reduce){.doc-block__action,.doc-block__code.is-copied{transition:none!important}}

package/dist/components/feedback.css

@@ -18,7 +18,6 @@
 /* ---------------------------------------------------------
    1. FEEDBACK TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-feedback],
 .vds-feedback {
     --feedback-padding-sm: var(--space-3);
@@ -33,7 +32,6 @@
 /* ---------------------------------------------------------
    2. SEMANTIC FEEDBACK VARIABLE LAYER
 --------------------------------------------------------- */
-
 .feedback[data-variant="info"],
 [data-variant="info"] {
     --feedback-bg: var(--semantic-info-bg-strong, var(--color-info-soft));
@@ -83,7 +81,6 @@
 /* ---------------------------------------------------------
    3. ALERTS
 --------------------------------------------------------- */
-
 .alert {
     display: flex;
     align-items: flex-start;
@@ -161,7 +158,6 @@
 /* ---------------------------------------------------------
    4. BANNERS (SOLID + STICKY + CLOSEABLE)
 --------------------------------------------------------- */
-
 .banner {
     width: 100%;
     padding: var(--feedback-padding-md) 0;
@@ -216,7 +212,6 @@
 /* ---------------------------------------------------------
    5. TOASTS (ANIMATED + STACK)
 --------------------------------------------------------- */
-
 .feedback-toast {
     display: flex;
     align-items: center;
@@ -347,7 +342,6 @@
 /* ---------------------------------------------------------
    6. INLINE FORM FEEDBACK
 --------------------------------------------------------- */
-
 .form-feedback {
     display: flex;
     align-items: center;
@@ -392,7 +386,6 @@
 /* ---------------------------------------------------------
    7. STATUS LABELS (SOLID + OUTLINE + DOT MODE)
 --------------------------------------------------------- */
-
 .status {
     display: inline-flex;
     align-items: center;
@@ -434,7 +427,6 @@
 /* ---------------------------------------------------------
    8. PROGRESS (SOLID + STRIPED + ANIMATED)
 --------------------------------------------------------- */
-
 .progress {
     width: 100%;
     height: var(--space-2);
@@ -530,7 +522,6 @@
 /* ---------------------------------------------------------
    9. GUIDANCE BLOCKS (DO / DON'T / HOW)
 --------------------------------------------------------- */
-
 .guidance {
     --guidance-bg: var(--color-surface-subtle);
     --guidance-border: var(--color-accent);
@@ -630,7 +621,6 @@
 /* ---------------------------------------------------------
    10. INFO BLOCK (SEMANTIC SUPPORT)
 --------------------------------------------------------- */
-
 .info-block {
     padding: var(--feedback-padding-md) var(--feedback-padding-lg);
     border-left: var(--feedback-info-block-border-width) solid var(--color-accent);
@@ -650,7 +640,6 @@
 /* ---------------------------------------------------------
    11. RESULT BLOCK (SEMANTIC SUPPORT)
 --------------------------------------------------------- */
-
 .result {
     padding: var(--feedback-padding-lg);
     border-radius: var(--radius-md);
@@ -694,7 +683,6 @@
 /* ---------------------------------------------------------
    12. DENSITY MODES
 --------------------------------------------------------- */
-
 [data-density="compact"] .alert,
 [data-density="compact"] .feedback-toast,
 [data-density="compact"] .banner,
@@ -719,7 +707,6 @@
 /* ---------------------------------------------------------
    13. RESPONSIVE TIGHTENING
 --------------------------------------------------------- */
-
 @media (max-width: 640px) {
     .alert,
     .feedback-toast,
@@ -740,9 +727,11 @@
    13. STATIC TOAST (Documentation / In-Flow Demo Only)
    Does not float to viewport. Does not autohide.
 --------------------------------------------------------- */
-
 .feedback-toast--static {
     position: relative !important;
+    width: -moz-max-content;
+    width: max-content;
+    max-width: 100%;
     transform: none !important;
     top: auto !important;
     right: auto !important;
@@ -751,9 +740,3 @@
     opacity: 1 !important;
     animation: none !important;
 }
-
-.feedback-toast--static {
-    width: -moz-max-content;
-    width: max-content;
-    max-width: 100%;
-}

package/dist/components/feedback.min.css

@@ -1 +1 @@
-.vds-feedback,[data-vds-feedback]{--feedback-padding-sm:var(--space-3);--feedback-padding-md:var(--space-4);--feedback-padding-lg:var(--space-6);--feedback-gap:var(--space-3);--feedback-info-block-border-width:var(--border-width-strong)}.feedback[data-variant=info],[data-variant=info]{--feedback-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--feedback-border:var(--semantic-info-border-strong,var(--color-info));--feedback-text:var(--semantic-info-text-strong,var(--color-info-strong))}.feedback[data-variant=success],[data-variant=success]{--feedback-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--feedback-border:var(--semantic-success-border-strong,var(--color-success));--feedback-text:var(--semantic-success-text-strong,var(--color-success-strong))}.feedback[data-variant=warning],[data-variant=warning]{--feedback-bg:var(--semantic-warning-bg-strong,var(--color-warning-soft));--feedback-border:var(--semantic-warning-border-strong,var(--color-warning));--feedback-text:var(--semantic-warning-text-strong,var(--color-warning-strong))}[data-variant=danger]{--feedback-bg:var(--color-danger-soft);--feedback-border:var(--color-danger);--feedback-text:var(--color-danger-strong)}.feedback[data-variant=error],[data-variant=error]{--feedback-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--feedback-border:var(--semantic-error-border-strong,var(--color-danger));--feedback-text:var(--semantic-error-text-strong,var(--color-danger-strong))}[data-variant=neutral]{--feedback-bg:var(--color-surface-subtle);--feedback-border:var(--color-border-subtle);--feedback-text:var(--color-text)}[data-variant=accent]{--feedback-bg:var(--color-accent-soft);--feedback-border:var(--color-accent);--feedback-text:var(--color-on-accent)}.alert{align-items:flex-start;background-color:var(--color-muted-bg);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);padding:var(--feedback-padding-lg)}.alert[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.alert__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.alert__icon>*{display:block;height:100%;width:100%}.alert__content{display:flex;flex-direction:column;gap:var(--space-2)}.alert__title{font-size:var(--text-sm);font-weight:600}.alert__message{font-size:var(--text-sm);opacity:.95}.alert__close{cursor:pointer;font-size:var(--text-sm);margin-left:auto;opacity:.6}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.alert--outline{background-color:transparent!important;border-color:var(--feedback-border)!important;color:var(--feedback-border)!important}.banner{background-color:var(--color-surface-subtle);border-bottom:var(--border-width) solid var(--color-border-subtle);color:var(--color-text);padding:var(--feedback-padding-md) 0;width:100%}.banner[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.banner__inner{align-items:center;display:flex;gap:var(--feedback-gap);justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.banner__close,.banner__text{font-size:var(--text-sm)}.banner__close{cursor:pointer;opacity:.6}.banner__close:hover{opacity:1}.banner__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.banner--sticky{position:sticky;top:0;z-index:var(--z-sticky)}.feedback-toast{align-items:center;animation:toast-enter var(--transition-normal) forwards;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-2);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);opacity:0;padding:var(--feedback-padding-md) var(--feedback-padding-lg);transform:translateY(6px)}.feedback-toast[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.feedback-toast__icon{stroke:currentColor;fill:none;display:inline-block;flex-shrink:0;height:var(--space-5);width:var(--space-5)}.feedback-toast__text{flex:1 1 auto;min-width:0}.feedback-toast__close{cursor:pointer;flex-shrink:0;height:var(--space-5);opacity:.6;position:absolute;right:var(--space-1);top:var(--space-1);width:var(--space-5)}.feedback-toast__close:hover{opacity:1}.feedback-toast__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.feedback-toast__close:before{align-items:center;bottom:0;color:currentColor;content:"×";display:flex;font-size:var(--text-md);justify-content:center;left:0;line-height:1;position:absolute;right:0;top:0}.feedback-toast-stack{display:flex;flex-direction:column;gap:var(--space-4);position:fixed;right:var(--space-8);top:var(--space-8);z-index:var(--z-toast)}.feedback-toast-stack.is-top-right{bottom:auto;left:auto;right:var(--space-8);top:var(--space-8)}.feedback-toast-stack.is-top-left{bottom:auto;left:var(--space-8);right:auto;top:var(--space-8)}.feedback-toast-stack.is-bottom-right{bottom:var(--space-8);left:auto;right:var(--space-8);top:auto}.feedback-toast-stack.is-bottom-left{bottom:var(--space-8);left:var(--space-8);right:auto;top:auto}@keyframes toast-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.form-feedback{align-items:center;color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.form-feedback--error{color:var(--color-error)}.form-feedback--warning{color:var(--color-warning)}.form-feedback--success{color:var(--color-success)}.form-feedback--info{color:var(--color-info)}.input-feedback--error{border-color:var(--color-error)!important}.input-feedback--warning{border-color:var(--color-warning)!important}.input-feedback--success{border-color:var(--color-success)!important}.input-feedback--info{border-color:var(--color-info)!important}.status{align-items:center;align-self:flex-start;background-color:var(--color-muted-bg);border-radius:999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-3);white-space:nowrap;width:-moz-max-content;width:max-content}.status[data-variant]{background-color:var(--feedback-bg)!important;color:var(--feedback-text)!important}.status--outline{background-color:transparent!important;border:var(--border-width) solid var(--feedback-border)!important;color:var(--feedback-border)!important}.status--dot:before{background-color:var(--feedback-border);border-radius:999px;content:"";height:var(--space-2);width:var(--space-2)}.progress{background-color:var(--color-muted-bg);border-radius:var(--radius-sm);height:var(--space-2);overflow:hidden;width:100%}.progress__bar{background-color:var(--color-accent);height:100%;transition:width var(--transition-normal);width:0}.progress--striped .progress__bar{background-image:linear-gradient(45deg,var(--color-accent-soft) 25%,var(--color-accent) 25%,var(--color-accent) 50%,var(--color-accent-soft) 50%,var(--color-accent-soft) 75%,var(--color-accent) 75%,var(--color-accent));background-size:16px 16px}.progress--striped.progress--striped__relaxed .progress__bar{background-size:24px 24px}.progress--animated.progress--striped .progress__bar{animation:progress-stripes .3s linear infinite;will-change:background-position}.progress--animated.progress--striped__relaxed .progress__bar{animation:progress-stripes-relaxed .3s linear infinite;will-change:background-position}@keyframes progress-stripes{0%{background-position:0 0}to{background-position:16px 0}}@keyframes progress-stripes-relaxed{0%{background-position:0 0}to{background-position:24px 0}}.progress--animated:not(.progress--striped) .progress__bar{overflow:hidden;position:relative}.progress--animated:not(.progress--striped) .progress__bar:after{animation:progress-sheen 1.2s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,0));content:"";height:100%;left:-40%;pointer-events:none;position:absolute;top:0;width:40%}@keyframes progress-sheen{0%{transform:translateX(0)}to{transform:translateX(250%)}}.guidance{--guidance-bg:var(--color-surface-subtle);--guidance-border:var(--color-accent);--guidance-text:var(--color-text);background-color:var(--guidance-bg);border-left:var(--feedback-info-block-border-width) solid var(--guidance-border);border-radius:var(--radius-sm);color:var(--guidance-text);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-2);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.guidance--compact{padding:var(--feedback-padding-sm) var(--feedback-padding-md)}.guidance__header{align-items:flex-start;display:flex;gap:var(--space-2)}.guidance__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.guidance__title{font-weight:600}.guidance__body,.guidance__title{font-size:var(--text-sm)}.guidance__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance__list li{padding-left:var(--space-4);position:relative}.guidance__list li:before{background-color:var(--guidance-border);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance[data-variant]{--guidance-bg:var(--feedback-bg);--guidance-border:var(--feedback-border);--guidance-text:var(--feedback-text)}.guidance--do{--guidance-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--guidance-border:var(--semantic-success-border-strong,var(--color-success));--guidance-text:var(--semantic-success-text-strong,var(--color-success-strong))}.guidance--dont{--guidance-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--guidance-border:var(--semantic-error-border-strong,var(--color-danger));--guidance-text:var(--semantic-error-text-strong,var(--color-danger-strong))}.guidance--how{--guidance-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--guidance-border:var(--semantic-info-border-strong,var(--color-info));--guidance-text:var(--semantic-info-text-strong,var(--color-info-strong))}.info-block{background-color:var(--color-surface-subtle);border-left:var(--feedback-info-block-border-width) solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.info-block[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.result{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--feedback-padding-lg);text-align:center}.result__icon{stroke:currentColor;fill:none;height:var(--space-12);margin:0 auto var(--space-4);width:var(--space-12)}.result__title{font-size:var(--text-xl);font-weight:600}.result__subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}.result__actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}.result[data-variant]{border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}[data-density=compact] .alert,[data-density=compact] .banner,[data-density=compact] .feedback-toast,[data-density=compact] .guidance,[data-density=compact] .info-block,[data-density=compact] .result{padding:var(--feedback-padding-md)!important}[data-density=compact] .status{padding:0 var(--space-2)}[data-density=compact] .progress{height:var(--space-1)}[data-density=compact] .form-feedback{gap:var(--space-1)}@media (max-width:640px){.alert,.banner,.feedback-toast,.guidance,.info-block,.result{padding:var(--feedback-padding-md)}.feedback-toast-stack{right:var(--space-4);top:var(--space-4)}}.feedback-toast--static{animation:none!important;bottom:auto!important;left:auto!important;max-width:100%;opacity:1!important;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:-moz-max-content;width:max-content}
+.vds-feedback,[data-vds-feedback]{--feedback-padding-sm:var(--space-3);--feedback-padding-md:var(--space-4);--feedback-padding-lg:var(--space-6);--feedback-gap:var(--space-3);--feedback-info-block-border-width:var(--border-width-strong)}.feedback[data-variant=info],[data-variant=info]{--feedback-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--feedback-border:var(--semantic-info-border-strong,var(--color-info));--feedback-text:var(--semantic-info-text-strong,var(--color-info-strong))}.feedback[data-variant=success],[data-variant=success]{--feedback-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--feedback-border:var(--semantic-success-border-strong,var(--color-success));--feedback-text:var(--semantic-success-text-strong,var(--color-success-strong))}.feedback[data-variant=warning],[data-variant=warning]{--feedback-bg:var(--semantic-warning-bg-strong,var(--color-warning-soft));--feedback-border:var(--semantic-warning-border-strong,var(--color-warning));--feedback-text:var(--semantic-warning-text-strong,var(--color-warning-strong))}[data-variant=danger]{--feedback-bg:var(--color-danger-soft);--feedback-border:var(--color-danger);--feedback-text:var(--color-danger-strong)}.feedback[data-variant=error],[data-variant=error]{--feedback-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--feedback-border:var(--semantic-error-border-strong,var(--color-danger));--feedback-text:var(--semantic-error-text-strong,var(--color-danger-strong))}[data-variant=neutral]{--feedback-bg:var(--color-surface-subtle);--feedback-border:var(--color-border-subtle);--feedback-text:var(--color-text)}[data-variant=accent]{--feedback-bg:var(--color-accent-soft);--feedback-border:var(--color-accent);--feedback-text:var(--color-on-accent)}.alert{align-items:flex-start;background-color:var(--color-muted-bg);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);padding:var(--feedback-padding-lg)}.alert[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.alert__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.alert__icon>*{display:block;height:100%;width:100%}.alert__content{display:flex;flex-direction:column;gap:var(--space-2)}.alert__title{font-size:var(--text-sm);font-weight:600}.alert__message{font-size:var(--text-sm);opacity:.95}.alert__close{cursor:pointer;font-size:var(--text-sm);margin-left:auto;opacity:.6}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.alert--outline{background-color:transparent!important;border-color:var(--feedback-border)!important;color:var(--feedback-border)!important}.banner{background-color:var(--color-surface-subtle);border-bottom:var(--border-width) solid var(--color-border-subtle);color:var(--color-text);padding:var(--feedback-padding-md) 0;width:100%}.banner[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.banner__inner{align-items:center;display:flex;gap:var(--feedback-gap);justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.banner__close,.banner__text{font-size:var(--text-sm)}.banner__close{cursor:pointer;opacity:.6}.banner__close:hover{opacity:1}.banner__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.banner--sticky{position:sticky;top:0;z-index:var(--z-sticky)}.feedback-toast{align-items:center;animation:toast-enter var(--transition-normal) forwards;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-2);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);opacity:0;padding:var(--feedback-padding-md) var(--feedback-padding-lg);transform:translateY(6px)}.feedback-toast[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.feedback-toast__icon{display:inline-block;fill:none;flex-shrink:0;height:var(--space-5);stroke:currentColor;width:var(--space-5)}.feedback-toast__text{flex:1 1 auto;min-width:0}.feedback-toast__close{cursor:pointer;flex-shrink:0;height:var(--space-5);opacity:.6;position:absolute;right:var(--space-1);top:var(--space-1);width:var(--space-5)}.feedback-toast__close:hover{opacity:1}.feedback-toast__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.feedback-toast__close:before{align-items:center;bottom:0;color:currentColor;content:"×";display:flex;font-size:var(--text-md);justify-content:center;left:0;line-height:1;position:absolute;right:0;top:0}.feedback-toast-stack{display:flex;flex-direction:column;gap:var(--space-4);position:fixed;right:var(--space-8);top:var(--space-8);z-index:var(--z-toast)}.feedback-toast-stack.is-top-right{bottom:auto;left:auto;right:var(--space-8);top:var(--space-8)}.feedback-toast-stack.is-top-left{bottom:auto;left:var(--space-8);right:auto;top:var(--space-8)}.feedback-toast-stack.is-bottom-right{bottom:var(--space-8);left:auto;right:var(--space-8);top:auto}.feedback-toast-stack.is-bottom-left{bottom:var(--space-8);left:var(--space-8);right:auto;top:auto}@keyframes toast-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.form-feedback{align-items:center;color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.form-feedback--error{color:var(--color-error)}.form-feedback--warning{color:var(--color-warning)}.form-feedback--success{color:var(--color-success)}.form-feedback--info{color:var(--color-info)}.input-feedback--error{border-color:var(--color-error)!important}.input-feedback--warning{border-color:var(--color-warning)!important}.input-feedback--success{border-color:var(--color-success)!important}.input-feedback--info{border-color:var(--color-info)!important}.status{align-items:center;align-self:flex-start;background-color:var(--color-muted-bg);border-radius:999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-3);white-space:nowrap;width:-moz-max-content;width:max-content}.status[data-variant]{background-color:var(--feedback-bg)!important;color:var(--feedback-text)!important}.status--outline{background-color:transparent!important;border:var(--border-width) solid var(--feedback-border)!important;color:var(--feedback-border)!important}.status--dot:before{background-color:var(--feedback-border);border-radius:999px;content:"";height:var(--space-2);width:var(--space-2)}.progress{background-color:var(--color-muted-bg);border-radius:var(--radius-sm);height:var(--space-2);overflow:hidden;width:100%}.progress__bar{background-color:var(--color-accent);height:100%;transition:width var(--transition-normal);width:0}.progress--striped .progress__bar{background-image:linear-gradient(45deg,var(--color-accent-soft) 25%,var(--color-accent) 25%,var(--color-accent) 50%,var(--color-accent-soft) 50%,var(--color-accent-soft) 75%,var(--color-accent) 75%,var(--color-accent));background-size:16px 16px}.progress--striped.progress--striped__relaxed .progress__bar{background-size:24px 24px}.progress--animated.progress--striped .progress__bar{animation:progress-stripes .3s linear infinite;will-change:background-position}.progress--animated.progress--striped__relaxed .progress__bar{animation:progress-stripes-relaxed .3s linear infinite;will-change:background-position}@keyframes progress-stripes{0%{background-position:0 0}to{background-position:16px 0}}@keyframes progress-stripes-relaxed{0%{background-position:0 0}to{background-position:24px 0}}.progress--animated:not(.progress--striped) .progress__bar{overflow:hidden;position:relative}.progress--animated:not(.progress--striped) .progress__bar:after{animation:progress-sheen 1.2s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,0));content:"";height:100%;left:-40%;pointer-events:none;position:absolute;top:0;width:40%}@keyframes progress-sheen{0%{transform:translateX(0)}to{transform:translateX(250%)}}.guidance{--guidance-bg:var(--color-surface-subtle);--guidance-border:var(--color-accent);--guidance-text:var(--color-text);background-color:var(--guidance-bg);border-left:var(--feedback-info-block-border-width) solid var(--guidance-border);border-radius:var(--radius-sm);color:var(--guidance-text);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-2);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.guidance--compact{padding:var(--feedback-padding-sm) var(--feedback-padding-md)}.guidance__header{align-items:flex-start;display:flex;gap:var(--space-2)}.guidance__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.guidance__title{font-weight:600}.guidance__body,.guidance__title{font-size:var(--text-sm)}.guidance__list{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-1);gap:var(--space-1)}.guidance__list li{padding-left:var(--space-4);position:relative}.guidance__list li:before{background-color:var(--guidance-border);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance[data-variant]{--guidance-bg:var(--feedback-bg);--guidance-border:var(--feedback-border);--guidance-text:var(--feedback-text)}.guidance--do{--guidance-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--guidance-border:var(--semantic-success-border-strong,var(--color-success));--guidance-text:var(--semantic-success-text-strong,var(--color-success-strong))}.guidance--dont{--guidance-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--guidance-border:var(--semantic-error-border-strong,var(--color-danger));--guidance-text:var(--semantic-error-text-strong,var(--color-danger-strong))}.guidance--how{--guidance-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--guidance-border:var(--semantic-info-border-strong,var(--color-info));--guidance-text:var(--semantic-info-text-strong,var(--color-info-strong))}.info-block{background-color:var(--color-surface-subtle);border-left:var(--feedback-info-block-border-width) solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.info-block[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.result{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--feedback-padding-lg);text-align:center}.result__icon{fill:none;height:var(--space-12);margin:0 auto var(--space-4);stroke:currentColor;width:var(--space-12)}.result__title{font-size:var(--text-xl);font-weight:600}.result__subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}.result__actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}.result[data-variant]{border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}[data-density=compact] .alert,[data-density=compact] .banner,[data-density=compact] .feedback-toast,[data-density=compact] .guidance,[data-density=compact] .info-block,[data-density=compact] .result{padding:var(--feedback-padding-md)!important}[data-density=compact] .status{padding:0 var(--space-2)}[data-density=compact] .progress{height:var(--space-1)}[data-density=compact] .form-feedback{gap:var(--space-1)}@media (max-width:640px){.alert,.banner,.feedback-toast,.guidance,.info-block,.result{padding:var(--feedback-padding-md)}.feedback-toast-stack{right:var(--space-4);top:var(--space-4)}}.feedback-toast--static{animation:none!important;bottom:auto!important;left:auto!important;max-width:100%;opacity:1!important;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:-moz-max-content;width:max-content}

package/dist/components/flows.css

@@ -23,7 +23,6 @@
 /* ---------------------------------------------------------
    1. FLOW TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-flow],
 .vds-flow {
     --flow-component-disabled-opacity: 0.48;
@@ -64,7 +63,6 @@
 /* ---------------------------------------------------------
    2. GLOBAL FLOW MODIFIERS
 --------------------------------------------------------- */
-
 .flow--compact .flow,
 .flow--compact.flow {
     gap: var(--flow-gap-lg);
@@ -143,7 +141,6 @@
 /* ---------------------------------------------------------
    3. FLOW CONTAINER / WIZARD
 --------------------------------------------------------- */
-
 .flow {
     display: flex;
     flex-direction: column;
@@ -181,7 +178,6 @@
 /* ---------------------------------------------------------
    4. STEP INDICATOR (HORIZONTAL)
 --------------------------------------------------------- */
-
 .steps {
     display: flex;
     align-items: center;
@@ -293,7 +289,6 @@
 /* ---------------------------------------------------------
    5. STEP INDICATOR (VERTICAL)
 --------------------------------------------------------- */
-
 .steps--vertical {
     flex-direction: column;
     align-items: flex-start;
@@ -319,7 +314,6 @@
 /* ---------------------------------------------------------
    6. FLOW PROGRESS BARS
 --------------------------------------------------------- */
-
 .flow-progress {
     width: 100%;
     height: var(--border-width-strong);
@@ -425,7 +419,6 @@
 /* ---------------------------------------------------------
    7. MINIMAL TIMELINE (A)
 --------------------------------------------------------- */
-
 .timeline {
     display: flex;
     flex-direction: column;
@@ -563,7 +556,6 @@
 /* ---------------------------------------------------------
    8. RICH TIMELINE (B)
 --------------------------------------------------------- */
-
 .timeline--rich {
     display: flex;
     flex-direction: column;
@@ -652,7 +644,6 @@
 /* ---------------------------------------------------------
    9. JOURNEY MAP (HIGH-LEVEL FLOWS)
 --------------------------------------------------------- */
-
 .journey {
     display: flex;
     flex-wrap: wrap;
@@ -753,7 +744,6 @@
 /* ---------------------------------------------------------
    10. PROCESS FLOW (NODE-BASED)
 --------------------------------------------------------- */
-
 .process-flow {
     display: flex;
     flex-wrap: wrap;
@@ -867,7 +857,6 @@
 /* ---------------------------------------------------------
    11. STATE FLOW (STATUS STEPS)
 --------------------------------------------------------- */
-
 .state-flow {
     display: inline-flex;
     align-items: center;
@@ -917,7 +906,6 @@
 /* ---------------------------------------------------------
    12. MULTI-STEP FORM SCAFFOLDING
 --------------------------------------------------------- */
-
 .form-flow {
     display: flex;
     flex-direction: column;
@@ -965,7 +953,6 @@
 /* ---------------------------------------------------------
    13. BRANCHING FLOW CALLOUTS
 --------------------------------------------------------- */
-
 .flow-branch {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--flow-grid-min-md), 1fr));
@@ -1086,7 +1073,6 @@
 /* ---------------------------------------------------------
    14. RESPONSIVE
 --------------------------------------------------------- */
-
 @media (max-width: 768px) {
 
     .steps {

package/dist/components/flows.min.css

@@ -1 +1 @@
-.vds-flow,[data-vds-flow]{--flow-component-disabled-opacity:0.48;--flow-step-bullet-sm:var(--space-5);--flow-step-bullet-md:var(--space-5_5);--flow-step-bullet-lg:var(--space-6);--flow-timeline-point-sm:var(--space-2);--flow-timeline-point-md:var(--space-3);--flow-timeline-point-xs:var(--space-1_5);--flow-node-min-width:var(--space-40);--flow-stage-min-width:var(--space-48);--flow-grid-min-md:var(--flow-stage-min-width);--flow-icon-size-sm:var(--space-3);--flow-icon-size-md:var(--space-4);--flow-icon-size-lg:var(--space-5);--flow-gap-xs:var(--space-1);--flow-gap-sm:var(--space-2);--flow-gap-md:var(--space-3);--flow-gap-lg:var(--space-4);--flow-gap-xl:var(--space-8);--flow-inset-xs:var(--space-2);--flow-inset-sm:var(--space-3);--flow-inset-md:var(--space-4);--flow-inset-lg:var(--space-6);--flow-progress-stripe-size:var(--space-3);--flow-progress-stripe-speed:1.2s;--flow-progress-track:var(--color-muted-bg);--flow-progress-fill:var(--color-accent)}.flow--compact .flow,.flow--compact.flow{gap:var(--flow-gap-lg)}.flow--compact .flow__body{gap:var(--flow-gap-md)}.flow--compact .flow__nav,.flow--compact .steps,.flow--compact .timeline{gap:var(--flow-gap-sm)}.flow--compact .journey{gap:var(--flow-gap-md)}.flow--compact .process-flow{gap:var(--flow-gap-sm)}.flow--compact .state-flow{gap:var(--flow-gap-xs)}.flow--compact .form-flow{gap:var(--flow-gap-md)}.steps__item--upcoming{color:var(--color-text-soft)}.flow-branch__option--upcoming,.journey__stage--upcoming,.process-flow__node--upcoming,.state-flow__item--upcoming{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.flow-branch__option--clickable:focus-visible,.journey__stage--clickable:focus-visible,.process-flow__node--clickable:focus-visible,.steps__item--clickable:focus-visible,.steps__item:focus-visible{outline:var(--focus-ring-width) solid var(--color-accent);outline-offset:var(--focus-ring-offset)}.steps__item--disabled,.steps__item[aria-disabled=true]{cursor:not-allowed;opacity:var(--flow-component-disabled-opacity)}.flow-branch__option--disabled,.flow-branch__option[aria-disabled=true],.journey__stage--disabled,.journey__stage[aria-disabled=true],.process-flow__node--disabled,.process-flow__node[aria-disabled=true]{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow{gap:var(--space-8)}.flow,.flow__header{display:flex;flex-direction:column}.flow__header{gap:var(--space-2)}.flow__title{font-size:var(--text-lg);font-weight:600}.flow__subtitle{color:var(--color-text-muted);font-size:var(--text-sm)}.flow__body{display:flex;flex-direction:column;gap:var(--space-6)}.flow__nav{justify-content:flex-end}.flow__nav,.steps{display:flex;gap:var(--space-4)}.steps,.steps__item{align-items:center}.steps__item{color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--flow-gap-sm)}.steps__item--clickable{cursor:pointer}.steps__item--clickable:hover .steps__label{color:var(--color-text)}.steps__item--clickable:active{opacity:.95;transform:translateY(1px)}.steps__item--error{color:var(--color-danger-strong)}.steps__item--error .steps__bullet{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger));color:var(--danger-soft-on,var(--color-on-danger))}.steps__item--warning{color:var(--color-warning-strong)}.steps__item--warning .steps__bullet{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning));color:var(--warning-soft-on,var(--color-on-warning))}.steps__item[aria-current=step],.steps__item[aria-current=step] .steps__label{color:var(--color-text)}.steps__bullet{align-items:center;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);display:flex;flex-shrink:0;font-size:var(--text-xxs);height:var(--flow-step-bullet-md);justify-content:center;width:var(--flow-step-bullet-md)}.steps__label{white-space:nowrap}.steps__line{background-color:var(--color-border-subtle);flex:1;height:var(--border-width)}.steps__item--active .steps__bullet{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));color:var(--accent-soft-on,var(--color-on-accent))}.steps__item--complete .steps__bullet{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success));color:var(--success-soft-on,var(--color-on-success));opacity:.7}.steps__item--active,.steps__item--complete{color:var(--color-text)}.steps--a .steps__bullet{height:var(--flow-step-bullet-lg);width:var(--flow-step-bullet-lg)}.steps--c .steps__bullet{font-size:var(--text-xxs);height:var(--flow-step-bullet-sm);width:var(--flow-step-bullet-sm)}.steps--vertical{flex-direction:column}.steps--vertical,.steps--vertical .steps__item{align-items:flex-start}.steps--vertical .steps__line{background-color:var(--color-border-subtle);flex:auto;height:auto;margin-left:calc(var(--flow-step-bullet-md)/2 - var(--border-width)/2);min-height:var(--flow-gap-xl);width:var(--border-width)}.steps--vertical .steps__label{white-space:normal}.flow-progress{background-color:var(--flow-progress-track);border-radius:var(--radius-sm);height:var(--border-width-strong);overflow:hidden;width:100%}.flow-progress__bar{background-color:var(--flow-progress-fill,var(--color-accent));height:100%;transition:width var(--transition-normal);width:0}.flow-progress__bar--success{--flow-progress-fill:var(--color-success)}.flow-progress__bar--warning{--flow-progress-fill:var(--color-warning)}.flow-progress__bar--error{--flow-progress-fill:var(--color-danger)}.flow-progress__bar--info{--flow-progress-fill:var(--color-info)}@media (prefers-reduced-motion:reduce){.flow-progress__bar{transition:none}}.flow-progress--striped .flow-progress__bar,.flow-progress--striped-right .flow-progress__bar{animation:flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;background-image:linear-gradient(45deg,hsla(0,0%,100%,.22) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.22) 0,hsla(0,0%,100%,.22) 75%,transparent 0,transparent);background-size:calc(var(--flow-progress-stripe-size)*2) calc(var(--flow-progress-stripe-size)*2)}.flow-progress--striped-right .flow-progress__bar{animation-direction:reverse}@keyframes flow-progress-stripes{0%{background-position:calc(var(--flow-progress-stripe-size)*2) 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.flow-progress--striped .flow-progress__bar,.flow-progress--striped-right .flow-progress__bar{animation:none;background-position:0 0}}.flow-progress--segments{border-radius:var(--radius-sm);display:flex;height:var(--border-width-strong);overflow:hidden}.flow-progress__segment{background-color:var(--color-muted-bg);flex:1}.flow-progress__segment--complete{background-color:var(--color-success)}.flow-progress__segment--error{background-color:var(--color-danger)}.flow-progress__segment--warning{background-color:var(--color-warning)}.flow-progress__segment--info{background-color:var(--color-info)}.timeline{display:flex;flex-direction:column;gap:var(--flow-gap-md)}.timeline__item{align-items:stretch;display:flex;gap:var(--flow-gap-sm)}.timeline__point-wrap{align-items:center;display:flex;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__point{background-color:var(--color-surface);border:var(--border-width-strong) solid var(--color-accent);border-radius:999px;flex-shrink:0;height:var(--flow-timeline-point-sm);width:var(--flow-timeline-point-sm)}.timeline__point--upcoming{border-color:var(--color-border-subtle)}.timeline__point--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.timeline__point--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning))}.timeline__point--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success))}.timeline__point--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--info-soft-border,var(--color-info))}.timeline__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.timeline__icon--left{margin-right:var(--flow-gap-xs)}.timeline__icon--right{margin-left:var(--flow-gap-xs)}.timeline__icon--top{margin-bottom:var(--flow-gap-xs)}.timeline__line{background-color:var(--color-border-subtle);flex:1;width:var(--border-width-strong)}.timeline__content{display:flex;flex:1;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__label{align-items:center;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--space-2)}.timeline__note{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline--horizontal{align-items:flex-start;flex-direction:row}.timeline--horizontal .timeline__item{align-items:center;flex-direction:column}.timeline--horizontal .timeline__point-wrap{flex-direction:row}.timeline--horizontal .timeline__line{height:var(--border-width-strong);width:var(--component-gap-xl)}.timeline--compact .timeline__item{gap:var(--flow-gap-xs)}.timeline--compact .timeline__note{font-size:var(--text-xxs)}.timeline--compact .timeline__point{height:var(--flow-timeline-point-xs);width:var(--flow-timeline-point-xs)}.timeline--compact .timeline__icon{height:var(--flow-icon-size-sm);width:var(--flow-icon-size-sm)}.timeline--rich{display:flex;flex-direction:column;gap:var(--flow-gap-lg)}.timeline--rich .timeline__item{align-items:stretch;background-color:var(--flow-zebra-bg-alt);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);display:flex;gap:var(--flow-gap-md);padding:var(--flow-inset-sm)}.timeline--rich .timeline__item:nth-child(2n){background-color:var(--flow-zebra-bg)}.timeline--rich .timeline__item:nth-child(odd){background-color:var(--flow-zebra-bg-alt)}.timeline--rich .timeline__point-wrap{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:var(--flow-gap-xs)}.timeline--rich .timeline__point{height:var(--flow-timeline-point-md);width:var(--flow-timeline-point-md)}.timeline--rich .timeline__line{background-color:var(--color-border-subtle);border-radius:var(--radius-sm);flex:1;width:var(--border-width-strong)}.timeline--rich .timeline__item:last-child .timeline__line{display:none}.timeline-events{display:flex;flex-direction:column;gap:var(--space-4)}.timeline-events .timeline__item{align-items:flex-start;gap:var(--space-4)}.timeline__timestamp{color:var(--color-text-soft);font-size:var(--text-xxs)}.timeline__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline__body{color:var(--color-text);font-size:var(--text-sm);margin-top:var(--flow-gap-xs)}.timeline--audit .timeline__label{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.timeline--audit .timeline__body{font-size:var(--text-xs)}.journey{display:flex;flex-wrap:wrap;gap:var(--flow-gap-lg)}.journey--compact{gap:var(--flow-gap-md)}.journey__stage{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex:1 1 var(--flow-stage-min-width);flex-direction:column;gap:var(--flow-gap-sm);min-width:var(--flow-stage-min-width);padding:var(--flow-inset-md)}.journey__stage--clickable{cursor:pointer}.journey__stage--clickable:hover{border-color:var(--color-accent)}.journey__stage--clickable:active{opacity:.96;transform:translateY(1px)}.journey__stage--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.journey__stage--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.journey__stage--complete,.journey__stage--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.journey__stage--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.journey__stage--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.journey__stage--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.journey__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-lg);width:var(--flow-icon-size-lg)}.journey__marker{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.journey__title{font-size:var(--text-md);font-weight:600}.journey__details{color:var(--color-text-muted);font-size:var(--text-sm)}.process-flow{align-items:center;display:flex;flex-wrap:wrap;gap:var(--flow-gap-md)}.process-flow--compact{gap:var(--flow-gap-sm)}.process-flow__node{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-xs);min-width:var(--flow-node-min-width);padding:var(--flow-inset-sm) var(--flow-inset-md);text-align:center}.process-flow__node--clickable{cursor:pointer}.process-flow__node--clickable:hover{border-color:var(--color-accent)}.process-flow__node--clickable:active{opacity:.96;transform:translateY(1px)}.process-flow__node--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.process-flow__node--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.process-flow__node--complete,.process-flow__node--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.process-flow__node--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.process-flow__node--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.process-flow__node--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.process-flow__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);margin-bottom:0;width:var(--flow-icon-size-md)}.process-flow__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);width:var(--space-6)}.process-flow__arrow--error{background-color:var(--color-danger)}.process-flow__arrow--warning{background-color:var(--color-warning)}.process-flow--vertical{align-items:flex-start;flex-direction:column}.process-flow--vertical .process-flow__arrow{height:var(--space-6);margin-left:calc(var(--flow-node-min-width)/2 - var(--border-width)/2);width:var(--border-width)}.state-flow{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--flow-gap-sm)}.state-flow__item{background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);font-size:var(--text-xs);padding:var(--flow-inset-xs) var(--flow-inset-sm)}.state-flow__item--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.state-flow__item--complete{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.state-flow__item--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.state-flow__item--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.state-flow__item--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.form-flow{gap:var(--flow-gap-lg);justify-content:center}.form-flow,.form-flow__step{display:flex;flex-direction:column}.form-flow__step{gap:var(--flow-gap-md)}.form-flow__step--error{background-color:var(--color-danger-soft);border-left:var(--border-width-strong) solid var(--color-danger);padding-left:var(--flow-inset-sm)}.form-flow__step--warning{background-color:var(--color-warning-soft);border-left:var(--border-width-strong) solid var(--color-warning);padding-left:var(--flow-inset-sm)}.form-flow__step--success,.form-flow__step--valid{background-color:var(--color-success-soft);border-left:var(--border-width-strong) solid var(--color-success);padding-left:var(--flow-inset-sm)}.form-flow__actions{display:flex;gap:var(--flow-gap-md);justify-content:space-between}.form-flow__actions-right{display:inline-flex;gap:var(--flow-gap-md);margin-left:auto}.flow-branch{grid-gap:var(--flow-gap-lg);display:grid;gap:var(--flow-gap-lg);grid-template-columns:repeat(auto-fit,minmax(var(--flow-grid-min-md),1fr))}.flow-branch__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.flow-branch__title{color:var(--color-text);font-size:var(--text-md);font-weight:600}.flow-branch__details{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.flow-branch--compact{gap:var(--flow-gap-md)}.flow-branch--compact .flow-branch__title{font-size:var(--text-sm)}.flow-branch--compact .flow-branch__details{font-size:var(--text-xs)}.flow-branch__option{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-sm);padding:var(--flow-inset-md)}.flow-branch__option--clickable{cursor:pointer}.flow-branch__option--clickable:hover{border-color:var(--color-accent)}.flow-branch__option--clickable:active{opacity:.96;transform:translateY(1px)}.flow-branch__option--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow-branch__option--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.flow-branch__option--complete,.flow-branch__option--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.flow-branch__option--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.flow-branch__option--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.flow-branch__option--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.flow-branch__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);margin-left:auto;margin-right:auto;width:var(--space-6)}.flow-branch__arrow--error{background-color:var(--color-danger)}.flow-branch__arrow--warning{background-color:var(--color-warning)}@media (max-width:768px){.steps{flex-wrap:wrap}.process-flow{align-items:flex-start;flex-direction:column}.process-flow__arrow{height:var(--space-4);width:var(--border-width)}.journey{flex-direction:column}.journey__stage{width:100%}}
+.vds-flow,[data-vds-flow]{--flow-component-disabled-opacity:0.48;--flow-step-bullet-sm:var(--space-5);--flow-step-bullet-md:var(--space-5_5);--flow-step-bullet-lg:var(--space-6);--flow-timeline-point-sm:var(--space-2);--flow-timeline-point-md:var(--space-3);--flow-timeline-point-xs:var(--space-1_5);--flow-node-min-width:var(--space-40);--flow-stage-min-width:var(--space-48);--flow-grid-min-md:var(--flow-stage-min-width);--flow-icon-size-sm:var(--space-3);--flow-icon-size-md:var(--space-4);--flow-icon-size-lg:var(--space-5);--flow-gap-xs:var(--space-1);--flow-gap-sm:var(--space-2);--flow-gap-md:var(--space-3);--flow-gap-lg:var(--space-4);--flow-gap-xl:var(--space-8);--flow-inset-xs:var(--space-2);--flow-inset-sm:var(--space-3);--flow-inset-md:var(--space-4);--flow-inset-lg:var(--space-6);--flow-progress-stripe-size:var(--space-3);--flow-progress-stripe-speed:1.2s;--flow-progress-track:var(--color-muted-bg);--flow-progress-fill:var(--color-accent)}.flow--compact .flow,.flow--compact.flow{gap:var(--flow-gap-lg)}.flow--compact .flow__body{gap:var(--flow-gap-md)}.flow--compact .flow__nav,.flow--compact .steps,.flow--compact .timeline{gap:var(--flow-gap-sm)}.flow--compact .journey{gap:var(--flow-gap-md)}.flow--compact .process-flow{gap:var(--flow-gap-sm)}.flow--compact .state-flow{gap:var(--flow-gap-xs)}.flow--compact .form-flow{gap:var(--flow-gap-md)}.steps__item--upcoming{color:var(--color-text-soft)}.flow-branch__option--upcoming,.journey__stage--upcoming,.process-flow__node--upcoming,.state-flow__item--upcoming{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.flow-branch__option--clickable:focus-visible,.journey__stage--clickable:focus-visible,.process-flow__node--clickable:focus-visible,.steps__item--clickable:focus-visible,.steps__item:focus-visible{outline:var(--focus-ring-width) solid var(--color-accent);outline-offset:var(--focus-ring-offset)}.steps__item--disabled,.steps__item[aria-disabled=true]{cursor:not-allowed;opacity:var(--flow-component-disabled-opacity)}.flow-branch__option--disabled,.flow-branch__option[aria-disabled=true],.journey__stage--disabled,.journey__stage[aria-disabled=true],.process-flow__node--disabled,.process-flow__node[aria-disabled=true]{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow{gap:var(--space-8)}.flow,.flow__header{display:flex;flex-direction:column}.flow__header{gap:var(--space-2)}.flow__title{font-size:var(--text-lg);font-weight:600}.flow__subtitle{color:var(--color-text-muted);font-size:var(--text-sm)}.flow__body{display:flex;flex-direction:column;gap:var(--space-6)}.flow__nav{justify-content:flex-end}.flow__nav,.steps{display:flex;gap:var(--space-4)}.steps,.steps__item{align-items:center}.steps__item{color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--flow-gap-sm)}.steps__item--clickable{cursor:pointer}.steps__item--clickable:hover .steps__label{color:var(--color-text)}.steps__item--clickable:active{opacity:.95;transform:translateY(1px)}.steps__item--error{color:var(--color-danger-strong)}.steps__item--error .steps__bullet{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger));color:var(--danger-soft-on,var(--color-on-danger))}.steps__item--warning{color:var(--color-warning-strong)}.steps__item--warning .steps__bullet{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning));color:var(--warning-soft-on,var(--color-on-warning))}.steps__item[aria-current=step],.steps__item[aria-current=step] .steps__label{color:var(--color-text)}.steps__bullet{align-items:center;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);display:flex;flex-shrink:0;font-size:var(--text-xxs);height:var(--flow-step-bullet-md);justify-content:center;width:var(--flow-step-bullet-md)}.steps__label{white-space:nowrap}.steps__line{background-color:var(--color-border-subtle);flex:1;height:var(--border-width)}.steps__item--active .steps__bullet{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));color:var(--accent-soft-on,var(--color-on-accent))}.steps__item--complete .steps__bullet{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success));color:var(--success-soft-on,var(--color-on-success));opacity:.7}.steps__item--active,.steps__item--complete{color:var(--color-text)}.steps--a .steps__bullet{height:var(--flow-step-bullet-lg);width:var(--flow-step-bullet-lg)}.steps--c .steps__bullet{font-size:var(--text-xxs);height:var(--flow-step-bullet-sm);width:var(--flow-step-bullet-sm)}.steps--vertical{flex-direction:column}.steps--vertical,.steps--vertical .steps__item{align-items:flex-start}.steps--vertical .steps__line{background-color:var(--color-border-subtle);flex:auto;height:auto;margin-left:calc(var(--flow-step-bullet-md)/2 - var(--border-width)/2);min-height:var(--flow-gap-xl);width:var(--border-width)}.steps--vertical .steps__label{white-space:normal}.flow-progress{background-color:var(--flow-progress-track);border-radius:var(--radius-sm);height:var(--border-width-strong);overflow:hidden;width:100%}.flow-progress__bar{background-color:var(--flow-progress-fill,var(--color-accent));height:100%;transition:width var(--transition-normal);width:0}.flow-progress__bar--success{--flow-progress-fill:var(--color-success)}.flow-progress__bar--warning{--flow-progress-fill:var(--color-warning)}.flow-progress__bar--error{--flow-progress-fill:var(--color-danger)}.flow-progress__bar--info{--flow-progress-fill:var(--color-info)}@media (prefers-reduced-motion:reduce){.flow-progress__bar{transition:none}}.flow-progress--striped .flow-progress__bar,.flow-progress--striped-right .flow-progress__bar{animation:flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;background-image:linear-gradient(45deg,hsla(0,0%,100%,.22) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.22) 0,hsla(0,0%,100%,.22) 75%,transparent 0,transparent);background-size:calc(var(--flow-progress-stripe-size)*2) calc(var(--flow-progress-stripe-size)*2)}.flow-progress--striped-right .flow-progress__bar{animation-direction:reverse}@keyframes flow-progress-stripes{0%{background-position:calc(var(--flow-progress-stripe-size)*2) 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.flow-progress--striped .flow-progress__bar,.flow-progress--striped-right .flow-progress__bar{animation:none;background-position:0 0}}.flow-progress--segments{border-radius:var(--radius-sm);display:flex;height:var(--border-width-strong);overflow:hidden}.flow-progress__segment{background-color:var(--color-muted-bg);flex:1}.flow-progress__segment--complete{background-color:var(--color-success)}.flow-progress__segment--error{background-color:var(--color-danger)}.flow-progress__segment--warning{background-color:var(--color-warning)}.flow-progress__segment--info{background-color:var(--color-info)}.timeline{display:flex;flex-direction:column;gap:var(--flow-gap-md)}.timeline__item{align-items:stretch;display:flex;gap:var(--flow-gap-sm)}.timeline__point-wrap{align-items:center;display:flex;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__point{background-color:var(--color-surface);border:var(--border-width-strong) solid var(--color-accent);border-radius:999px;flex-shrink:0;height:var(--flow-timeline-point-sm);width:var(--flow-timeline-point-sm)}.timeline__point--upcoming{border-color:var(--color-border-subtle)}.timeline__point--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.timeline__point--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning))}.timeline__point--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success))}.timeline__point--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--info-soft-border,var(--color-info))}.timeline__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.timeline__icon--left{margin-right:var(--flow-gap-xs)}.timeline__icon--right{margin-left:var(--flow-gap-xs)}.timeline__icon--top{margin-bottom:var(--flow-gap-xs)}.timeline__line{background-color:var(--color-border-subtle);flex:1;width:var(--border-width-strong)}.timeline__content{display:flex;flex:1;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__label{align-items:center;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--space-2)}.timeline__note{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline--horizontal{align-items:flex-start;flex-direction:row}.timeline--horizontal .timeline__item{align-items:center;flex-direction:column}.timeline--horizontal .timeline__point-wrap{flex-direction:row}.timeline--horizontal .timeline__line{height:var(--border-width-strong);width:var(--component-gap-xl)}.timeline--compact .timeline__item{gap:var(--flow-gap-xs)}.timeline--compact .timeline__note{font-size:var(--text-xxs)}.timeline--compact .timeline__point{height:var(--flow-timeline-point-xs);width:var(--flow-timeline-point-xs)}.timeline--compact .timeline__icon{height:var(--flow-icon-size-sm);width:var(--flow-icon-size-sm)}.timeline--rich{display:flex;flex-direction:column;gap:var(--flow-gap-lg)}.timeline--rich .timeline__item{align-items:stretch;background-color:var(--flow-zebra-bg-alt);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);display:flex;gap:var(--flow-gap-md);padding:var(--flow-inset-sm)}.timeline--rich .timeline__item:nth-child(2n){background-color:var(--flow-zebra-bg)}.timeline--rich .timeline__item:nth-child(odd){background-color:var(--flow-zebra-bg-alt)}.timeline--rich .timeline__point-wrap{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:var(--flow-gap-xs)}.timeline--rich .timeline__point{height:var(--flow-timeline-point-md);width:var(--flow-timeline-point-md)}.timeline--rich .timeline__line{background-color:var(--color-border-subtle);border-radius:var(--radius-sm);flex:1;width:var(--border-width-strong)}.timeline--rich .timeline__item:last-child .timeline__line{display:none}.timeline-events{display:flex;flex-direction:column;gap:var(--space-4)}.timeline-events .timeline__item{align-items:flex-start;gap:var(--space-4)}.timeline__timestamp{color:var(--color-text-soft);font-size:var(--text-xxs)}.timeline__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline__body{color:var(--color-text);font-size:var(--text-sm);margin-top:var(--flow-gap-xs)}.timeline--audit .timeline__label{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.timeline--audit .timeline__body{font-size:var(--text-xs)}.journey{display:flex;flex-wrap:wrap;gap:var(--flow-gap-lg)}.journey--compact{gap:var(--flow-gap-md)}.journey__stage{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex:1 1 var(--flow-stage-min-width);flex-direction:column;gap:var(--flow-gap-sm);min-width:var(--flow-stage-min-width);padding:var(--flow-inset-md)}.journey__stage--clickable{cursor:pointer}.journey__stage--clickable:hover{border-color:var(--color-accent)}.journey__stage--clickable:active{opacity:.96;transform:translateY(1px)}.journey__stage--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.journey__stage--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.journey__stage--complete,.journey__stage--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.journey__stage--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.journey__stage--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.journey__stage--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.journey__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-lg);width:var(--flow-icon-size-lg)}.journey__marker{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.journey__title{font-size:var(--text-md);font-weight:600}.journey__details{color:var(--color-text-muted);font-size:var(--text-sm)}.process-flow{align-items:center;display:flex;flex-wrap:wrap;gap:var(--flow-gap-md)}.process-flow--compact{gap:var(--flow-gap-sm)}.process-flow__node{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-xs);min-width:var(--flow-node-min-width);padding:var(--flow-inset-sm) var(--flow-inset-md);text-align:center}.process-flow__node--clickable{cursor:pointer}.process-flow__node--clickable:hover{border-color:var(--color-accent)}.process-flow__node--clickable:active{opacity:.96;transform:translateY(1px)}.process-flow__node--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.process-flow__node--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.process-flow__node--complete,.process-flow__node--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.process-flow__node--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.process-flow__node--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.process-flow__node--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.process-flow__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);margin-bottom:0;width:var(--flow-icon-size-md)}.process-flow__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);width:var(--space-6)}.process-flow__arrow--error{background-color:var(--color-danger)}.process-flow__arrow--warning{background-color:var(--color-warning)}.process-flow--vertical{align-items:flex-start;flex-direction:column}.process-flow--vertical .process-flow__arrow{height:var(--space-6);margin-left:calc(var(--flow-node-min-width)/2 - var(--border-width)/2);width:var(--border-width)}.state-flow{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--flow-gap-sm)}.state-flow__item{background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);font-size:var(--text-xs);padding:var(--flow-inset-xs) var(--flow-inset-sm)}.state-flow__item--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.state-flow__item--complete{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.state-flow__item--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.state-flow__item--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.state-flow__item--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.form-flow{gap:var(--flow-gap-lg);justify-content:center}.form-flow,.form-flow__step{display:flex;flex-direction:column}.form-flow__step{gap:var(--flow-gap-md)}.form-flow__step--error{background-color:var(--color-danger-soft);border-left:var(--border-width-strong) solid var(--color-danger);padding-left:var(--flow-inset-sm)}.form-flow__step--warning{background-color:var(--color-warning-soft);border-left:var(--border-width-strong) solid var(--color-warning);padding-left:var(--flow-inset-sm)}.form-flow__step--success,.form-flow__step--valid{background-color:var(--color-success-soft);border-left:var(--border-width-strong) solid var(--color-success);padding-left:var(--flow-inset-sm)}.form-flow__actions{display:flex;gap:var(--flow-gap-md);justify-content:space-between}.form-flow__actions-right{display:inline-flex;gap:var(--flow-gap-md);margin-left:auto}.flow-branch{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--flow-grid-min-md),1fr));grid-gap:var(--flow-gap-lg);gap:var(--flow-gap-lg)}.flow-branch__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.flow-branch__title{color:var(--color-text);font-size:var(--text-md);font-weight:600}.flow-branch__details{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.flow-branch--compact{gap:var(--flow-gap-md)}.flow-branch--compact .flow-branch__title{font-size:var(--text-sm)}.flow-branch--compact .flow-branch__details{font-size:var(--text-xs)}.flow-branch__option{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-sm);padding:var(--flow-inset-md)}.flow-branch__option--clickable{cursor:pointer}.flow-branch__option--clickable:hover{border-color:var(--color-accent)}.flow-branch__option--clickable:active{opacity:.96;transform:translateY(1px)}.flow-branch__option--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow-branch__option--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.flow-branch__option--complete,.flow-branch__option--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.flow-branch__option--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.flow-branch__option--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.flow-branch__option--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.flow-branch__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);margin-left:auto;margin-right:auto;width:var(--space-6)}.flow-branch__arrow--error{background-color:var(--color-danger)}.flow-branch__arrow--warning{background-color:var(--color-warning)}@media (max-width:768px){.steps{flex-wrap:wrap}.process-flow{align-items:flex-start;flex-direction:column}.process-flow__arrow{height:var(--space-4);width:var(--border-width)}.journey{flex-direction:column}.journey__stage{width:100%}}