@24vlh/vds 0.3.3 → 0.3.5

package/dist/components/content-blocks.css

@@ -21,7 +21,6 @@
 /* ---------------------------------------------------------
    1. CONTENT BLOCK TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-content-block],
 .vds-content-block {
     --content-block-tag-size-sm: var(--space-4);
@@ -85,7 +84,6 @@
 /* ---------------------------------------------------------
    2. GENERIC INTERACTIVE / DISABLED
 --------------------------------------------------------- */
-
 .interactive {
     cursor: pointer;
     transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
@@ -115,7 +113,6 @@
 /* ---------------------------------------------------------
    3. CARD
 --------------------------------------------------------- */
-
 .card {
     background-color: var(--color-surface);
     border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
@@ -217,7 +214,6 @@
 /* ---------------------------------------------------------
    4. CARD GRID
 --------------------------------------------------------- */
-
 .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--content-block-card-min-width), 1fr));
@@ -240,7 +236,6 @@
 /* ---------------------------------------------------------
    5. MEDIA BLOCK
 --------------------------------------------------------- */
-
 .media {
     display: flex;
     align-items: center;
@@ -313,7 +308,6 @@
 /* ---------------------------------------------------------
    6. LIST GROUP
 --------------------------------------------------------- */
-
 .list-group {
     display: flex;
     flex-direction: column;
@@ -370,7 +364,6 @@
 /* ---------------------------------------------------------
    7. CALLOUTS (Semantic Variants)
 --------------------------------------------------------- */
-
 .callout {
     border-radius: var(--radius-md);
     padding: var(--content-block-component-pad-md);
@@ -446,7 +439,6 @@
 /* ---------------------------------------------------------
    8. EMPTY STATE
 --------------------------------------------------------- */
-
 .empty {
     text-align: center;
     background-color: var(--color-surface);
@@ -496,7 +488,6 @@
 /* ---------------------------------------------------------
    9. STATS BLOCK
 --------------------------------------------------------- */
-
 .stats {
     display: flex;
     flex-wrap: wrap;
@@ -533,7 +524,6 @@
 /* ---------------------------------------------------------
    10. METRIC TITLE
 --------------------------------------------------------- */
-
 .metric-title {
     font-size: var(--text-xs);
     letter-spacing: 0.04em;
@@ -545,7 +535,6 @@
 /* ---------------------------------------------------------
    11. TAGS / CHIPS / BADGES + INTERACTIVE
 --------------------------------------------------------- */
-
 .tag,
 .chip,
 .badge {
@@ -647,7 +636,6 @@
 /* ---------------------------------------------------------
    11b. CHIP GROUPS (LABEL + ACTIONS)
 --------------------------------------------------------- */
-
 .chip-group {
     display: inline-flex;
     align-items: center;
@@ -756,7 +744,6 @@
 /* ---------------------------------------------------------
    12. AVATAR + STATUS
 --------------------------------------------------------- */
-
 .avatar {
     position: relative;
     width: var(--avatar-size-md);
@@ -794,7 +781,6 @@
 /* ---------------------------------------------------------
    13. FEATURE BLOCK
 --------------------------------------------------------- */
-
 .feature {
     display: flex;
     flex-direction: column;
@@ -846,7 +832,6 @@
 /* ---------------------------------------------------------
    14. PROCESS BLOCK
 --------------------------------------------------------- */
-
 .process {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--content-block-process-step-min-width), 1fr));
@@ -892,7 +877,6 @@
 /* ---------------------------------------------------------
    15. HIGHLIGHT BLOCK
 --------------------------------------------------------- */
-
 .highlight {
     background-color: var(--color-surface-subtle);
     border-left: var(--content-block-highlight-border-width) solid var(--color-accent);
@@ -927,7 +911,6 @@
 /* ---------------------------------------------------------
    16. FACT BLOCK
 --------------------------------------------------------- */
-
 .fact {
     text-align: center;
     background-color: var(--color-surface);
@@ -973,7 +956,6 @@
 /* ---------------------------------------------------------
    17. CONTENT BLOCK (NEW STRUCTURAL BLOCK)
    --------------------------------------------------------- */
-
 .content-block {
     --content-block-pad: 0;
     --content-block-title-size: var(--content-block-title-size-base);
@@ -1026,7 +1008,6 @@
 /* ---------------------------------------------------------
    17.1 CONTENT BLOCK - VARIANTS
    --------------------------------------------------------- */
-
 .content-block[data-variant="info"] {
     --content-block-variant-rail: var(--semantic-info-border, var(--color-info));
     --content-block-variant-tint: var(--semantic-info-bg, var(--color-info-soft));
@@ -1154,7 +1135,6 @@
 /* ---------------------------------------------------------
    17.2 CONTENT BLOCK - REGIONS
    --------------------------------------------------------- */
-
 .content-block__header {
     display: flex;
     flex-direction: column;
@@ -1243,7 +1223,6 @@
 /* ---------------------------------------------------------
    17.3 CONTENT BLOCK - LISTS, GRIDS, KPIS
    --------------------------------------------------------- */
-
 .content-block__grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--content-block-grid-min), 1fr));

package/dist/components/description-list.css

@@ -14,7 +14,6 @@
 /* ---------------------------------------------------------
    1. TOKENS
 --------------------------------------------------------- */
-
 [data-vds-description-list],
 .vds-description-list {
     --dl-gap: var(--space-4);
@@ -29,7 +28,6 @@
 /* ---------------------------------------------------------
    2. BASE LIST
 --------------------------------------------------------- */
-
 .description-list {
     display: grid;
     grid-gap: var(--dl-gap);
@@ -58,7 +56,6 @@
 /* ---------------------------------------------------------
    3. LAYOUT VARIANTS
 --------------------------------------------------------- */
-
 .description-list--inline .description-list__item {
     grid-template-columns: minmax(0, var(--dl-term-width)) 1fr;
     align-items: start;
@@ -79,7 +76,6 @@
 /* ---------------------------------------------------------
    4. STYLE VARIANTS
 --------------------------------------------------------- */
-
 .description-list--bordered .description-list__item {
     padding: var(--dl-pad);
     border: 1px solid var(--dl-border);
@@ -99,7 +95,6 @@
 /* ---------------------------------------------------------
    5. DENSITY
 --------------------------------------------------------- */
-
 .description-list--compact {
     --dl-gap: var(--space-2);
     --dl-pad: var(--space-3);

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/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,7 +727,6 @@
    13. STATIC TOAST (Documentation / In-Flow Demo Only)
    Does not float to viewport. Does not autohide.
 --------------------------------------------------------- */
-
 .feedback-toast--static {
     position: relative !important;
     transform: none !important;
@@ -751,7 +737,6 @@
     opacity: 1 !important;
     animation: none !important;
 }
-
 .feedback-toast--static {
     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/forms-advanced.css

@@ -31,7 +31,6 @@
 /* ---------------------------------------------------------
    2. MULTI-SELECT (chips + dropdown)
 --------------------------------------------------------- */
-
 .multi-select {
     position: relative;
     width: 100%;
@@ -163,7 +162,6 @@
 /* ---------------------------------------------------------
    3. TAG INPUT (chip builder)
 --------------------------------------------------------- */
-
 .tag-input {
     display: flex;
     flex-wrap: wrap;
@@ -236,7 +234,6 @@
 /* ---------------------------------------------------------
    4. CHOICE BUTTON GROUPS
 --------------------------------------------------------- */
-
 .choice-buttons {
     display: flex;
     flex-wrap: wrap;
@@ -310,7 +307,6 @@
 /* ---------------------------------------------------------
    5. CHOICE CARDS
 --------------------------------------------------------- */
-
 .choice-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
@@ -383,7 +379,6 @@
 /* ---------------------------------------------------------
    6. CHOICE CHIPS (CHECKBOX / RADIO)
 --------------------------------------------------------- */
-
 .choice-chips {
     display: flex;
     flex-wrap: wrap;
@@ -524,7 +519,6 @@
 /* ---------------------------------------------------------
    7. CHIP CHOICE (SELECTED)
 --------------------------------------------------------- */
-
 .chip-choice {
     --chip-choice-bg: var(--color-surface);
     --chip-choice-border: var(--color-border-subtle);
@@ -589,7 +583,6 @@
 /* ---------------------------------------------------------
    8. CHIP FIELD LAYOUT
 --------------------------------------------------------- */
-
 .chip-field {
     display: flex;
     flex-direction: column;
@@ -620,7 +613,6 @@
 /* ---------------------------------------------------------
    9. SEGMENTED CONTROL
 --------------------------------------------------------- */
-
 .segmented-control {
     display: inline-flex;
     border: var(--border-width) solid var(--color-border-subtle);
@@ -670,7 +662,6 @@
 /* ---------------------------------------------------------
    10. TOGGLE SWITCH
 --------------------------------------------------------- */
-
 .toggle {
     --toggle-width: 2.75rem;
     --toggle-height: 1.5rem;
@@ -743,7 +734,6 @@
 /* ---------------------------------------------------------
    11. STEPPER CONTROL
 --------------------------------------------------------- */
-
 .stepper {
     display: inline-flex;
     width: 100%;
@@ -813,7 +803,6 @@
 /* ---------------------------------------------------------
    12. NATIVE DATE/TIME INPUT NORMALIZATION
 --------------------------------------------------------- */
-
 .input[type="date"],
 .input[type="time"],
 .input[type="datetime-local"] {
@@ -829,7 +818,6 @@
 /* ---------------------------------------------------------
    13. CALENDAR BASE STRUCTURE (JS-driven scaffold)
 --------------------------------------------------------- */
-
 .calendar {
     width: 100%;
     background-color: var(--color-surface);
@@ -943,7 +931,6 @@
 /* ---------------------------------------------------------
    14. DENSITY LAYER OVERRIDES (A and C)
 --------------------------------------------------------- */
-
 .form--a .multi-select__control,
 .form--a .tag-input,
 .form--a .stepper {