@24vlh/vds 0.3.4 → 0.3.5

package/dist/components/forms.css

@@ -17,7 +17,6 @@
 /* ---------------------------------------------------------
    1. TOKENS & SHARED ANIMATIONS
 --------------------------------------------------------- */
-
 [data-vds-form],
 .vds-form {
     --form-flow-textarea-min-height: 5rem;
@@ -39,7 +38,6 @@
 /* ---------------------------------------------------------
    2. BASE CONTROL PRIMITIVE
 --------------------------------------------------------- */
-
 .form-control {
     position: relative;
     z-index: 0;
@@ -60,7 +58,6 @@
 }
 
 /* Native control normalization (only when used as UFAL control) */
-
 input.form-control,
 select.form-control,
 textarea.form-control {
@@ -81,7 +78,6 @@ select.form-control {
 }
 
 /* Select dropdown affordance */
-
 select.form-control:not([multiple]):not([size]) {
     padding-right: calc(var(--space-7) + var(--space-2));
     background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
@@ -118,7 +114,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* ARIA validation */
-
 .form-control[aria-invalid="true"] {
     border-color: var(--color-danger);
 }
@@ -130,7 +125,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    2A. FIELD SHELL (LABEL + HELP)
 --------------------------------------------------------- */
-
 .form-field {
     display: flex;
     flex-direction: column;
@@ -213,7 +207,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    2B. CHOICE CONTROLS (CHECKBOX / RADIO)
 --------------------------------------------------------- */
-
 .choice-group {
     display: flex;
     flex-direction: column;
@@ -384,7 +377,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    3. WRAPPERS & GROUPING
 --------------------------------------------------------- */
-
 .form-control-wrapper {
     position: relative;
     width: 100%;
@@ -400,7 +392,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    4. STATE MODIFIERS
 --------------------------------------------------------- */
-
 .form-control--loading {
     cursor: progress;
     opacity: .55;
@@ -434,7 +425,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Native disabled / readonly */
-
 .form-control:disabled,
 .form-control[disabled] {
     background-color: var(--color-muted-bg);
@@ -455,7 +445,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    5. ICONS / PREFIX / SUFFIX
 --------------------------------------------------------- */
-
 .form-control-wrapper[data-icon="left"] .form-control {
     padding-left: calc(var(--space-7) + var(--space-2));
 }
@@ -495,7 +484,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Prefix / suffix */
-
 .form-control-prefix,
 .form-control-suffix {
     position: static;
@@ -524,7 +512,6 @@ select.form-control:not([multiple]):not([size]) {
    - Group draws internal dividers (always present, any child type)
    - Works for: .form-control, .form-control-wrapper (icons), .button
 --------------------------------------------------------- */
-
 .form-control-group {
     position: relative;
     display: flex;
@@ -537,7 +524,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Outer rounding is applied to slots, to preserve radius even when children are wrappers */
-
 .form-control-group > * {
     position: relative;
     border-radius: 0;
@@ -545,7 +531,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Default flex behavior: controls/wrappers flex, buttons stay auto-sized below */
-
 .form-control-group > .form-control,
 .form-control-group > .form-control-wrapper {
     flex: 1 1 auto;
@@ -556,7 +541,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Edge radii */
-
 .form-control-group > :first-child {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
@@ -568,13 +552,11 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Internal divider (single source of truth) */
-
 .form-control-group > * + * {
     box-shadow: inset var(--border-width) 0 0 var(--color-border-subtle);
 }
 
 /* Suppress per-control focus ring inside groups (prevents double focus visuals) */
-
 .form-control-group .form-control:focus-visible {
     border-color: var(--focus-ring-color);
     box-shadow: inset var(--border-width) 0 0 var(--color-border-subtle),
@@ -582,7 +564,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Children inside group should not draw their own outer borders */
-
 .form-control-group > .form-control,
 .form-control-group > .form-control-wrapper > .form-control {
     border: none;
@@ -590,7 +571,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Action button integration inside groups */
-
 .form-control-group > .button {
     border: none;
     background: transparent;
@@ -609,7 +589,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    6. LOADING OVERLAYS
 --------------------------------------------------------- */
-
 .form-control--loading::after {
     content: "";
     position: absolute;
@@ -638,7 +617,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    7. FILE UPLOAD PRIMITIVES
 --------------------------------------------------------- */
-
 .form-control--file {
     position: relative;
     padding: var(--space-3);
@@ -657,7 +635,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Drop surface */
-
 .form-control-file-surface {
     position: relative;
     display: flex;
@@ -720,7 +697,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Inline upload */
-
 .file-upload-inline {
     display: inline-flex;
     align-items: center;
@@ -740,7 +716,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Loading shimmer on surface */
-
 .form-control-file-surface.form-control--loading::after {
     content: "";
     position: absolute;
@@ -762,7 +737,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    8. LAYOUT PRIMITIVES
 --------------------------------------------------------- */
-
 .form-row {
     display: flex;
     flex-wrap: wrap;
@@ -798,7 +772,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    9. FORM-LEVEL MESSAGES
 --------------------------------------------------------- */
-
 .form-message {
     width: 100%;
     padding: var(--space-4) var(--space-6);
@@ -850,7 +823,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    10. FORM SECTION STATES
 --------------------------------------------------------- */
-
 .form-section--error,
 .form-section--warning,
 .form-section--success,

package/dist/components/guidance.css

@@ -15,7 +15,6 @@
 /* ---------------------------------------------------------
    1. TOKENS
 --------------------------------------------------------- */
-
 [data-vds-guidance],
 .vds-guidance {
     --guidance-padding-sm: var(--space-3);
@@ -50,7 +49,6 @@
 }
 
 /* Semantic variants (shared) */
-
 :where(.guidance,
 .guidance-card,
 .guidance-strip,
@@ -144,7 +142,6 @@
 /* ---------------------------------------------------------
    2. GUIDANCE PANEL (DO / DO NOT / HOW / WHY)
 --------------------------------------------------------- */
-
 .guidance {
     position: relative;
     display: flex;
@@ -291,7 +288,6 @@
 /* ---------------------------------------------------------
    3. GUIDANCE GRID
 --------------------------------------------------------- */
-
 .guidance-grid {
     display: grid;
     grid-gap: var(--space-3);
@@ -302,7 +298,6 @@
 /* ---------------------------------------------------------
    4. GUIDANCE CARD (EDUCATION BLOCK)
 --------------------------------------------------------- */
-
 .guidance-card {
     display: flex;
     flex-direction: column;
@@ -350,7 +345,6 @@
 /* ---------------------------------------------------------
    5. GUIDANCE STRIP (INLINE CALLOUT)
 --------------------------------------------------------- */
-
 .guidance-strip {
     position: relative;
     display: grid;
@@ -414,7 +408,6 @@
 /* ---------------------------------------------------------
    6. GUIDANCE STEPS (INSTRUCTION)
 --------------------------------------------------------- */
-
 .guidance-steps {
     display: grid;
     grid-gap: var(--space-3);
@@ -468,7 +461,6 @@
 /* ---------------------------------------------------------
    7. GUIDANCE BRIEF (DECISION SUMMARY)
 --------------------------------------------------------- */
-
 .guidance-brief {
     position: relative;
     display: grid;
@@ -605,7 +597,6 @@
 /* ---------------------------------------------------------
    8. GUIDANCE COMPARE (CONTRAST)
 --------------------------------------------------------- */
-
 .guidance-compare {
     display: grid;
     grid-gap: var(--space-3);
@@ -679,7 +670,6 @@
 /* ---------------------------------------------------------
    9. GUIDANCE ROW (INBOX STYLE)
 --------------------------------------------------------- */
-
 .guidance-row {
     position: relative;
     display: grid;
@@ -782,7 +772,6 @@
 /* ---------------------------------------------------------
    10. GUIDANCE FIELD (FORM EDUCATION)
 --------------------------------------------------------- */
-
 .guidance-field {
     display: grid;
     grid-gap: 0;
@@ -877,7 +866,6 @@
 /* ---------------------------------------------------------
    11. GUIDANCE SCOPE (IN / OUT)
 --------------------------------------------------------- */
-
 .guidance-scope {
     display: grid;
     grid-gap: var(--space-3);
@@ -938,7 +926,6 @@
 /* ---------------------------------------------------------
    12. GUIDANCE CHECKLIST
 --------------------------------------------------------- */
-
 .guidance-checklist {
     list-style: none;
     margin: 0;
@@ -974,7 +961,6 @@
 /* ---------------------------------------------------------
    12. DENSITY
 --------------------------------------------------------- */
-
 [data-density="compact"] .guidance,
 [data-density="compact"] .guidance-card,
 [data-density="compact"] .guidance-strip,

package/dist/components/header-footer.css

@@ -21,7 +21,6 @@
 /* ---------------------------------------------------------
    1. HEADER & FOOTER TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-header-footer],
 .vds-header-footer {
     --header-height: var(--space-16);
@@ -47,7 +46,6 @@
 /* ---------------------------------------------------------
    2. GLOBAL HEADER CONTAINER
 --------------------------------------------------------- */
-
 .header {
     width: 100%;
     background-color: var(--color-header-bg);
@@ -133,7 +131,6 @@
 /* ---------------------------------------------------------
    3. LOGO HANDLING IN HEADER
 --------------------------------------------------------- */
-
 .header .logo {
     display: inline-flex;
     align-items: center;
@@ -156,7 +153,6 @@
 /* ---------------------------------------------------------
    4. PRIMARY NAVIGATION (DESKTOP)
 --------------------------------------------------------- */
-
 .header .nav {
     display: flex;
     align-items: center;
@@ -214,7 +210,6 @@
 /* ---------------------------------------------------------
    5. MOBILE NAVIGATION (CSS-ONLY HOOKS)
 --------------------------------------------------------- */
-
 .header .header__toggle {
     display: none;
     cursor: pointer;
@@ -318,7 +313,6 @@
 /* ---------------------------------------------------------
    6. SKIP-LINK (ACCESSIBILITY)
 --------------------------------------------------------- */
-
 .skip-link,
 .header .skip-link {
     position: absolute;
@@ -344,7 +338,6 @@
 /* ---------------------------------------------------------
    7. GLOBAL FOOTER CONTAINER
 --------------------------------------------------------- */
-
 .footer {
     width: 100%;
     background-color: var(--color-footer-bg);
@@ -404,7 +397,6 @@
 /* ---------------------------------------------------------
    8. FOOTER COLUMN SYSTEM
 --------------------------------------------------------- */
-
 .footer__col {
     display: flex;
     flex-direction: column;
@@ -448,7 +440,6 @@
 /* ---------------------------------------------------------
    9. FOOTER LOGO HANDLING
 --------------------------------------------------------- */
-
 .footer .logo {
     display: inline-flex;
     align-items: center;
@@ -475,7 +466,6 @@
 /* ---------------------------------------------------------
    10. FOOTER META / COPYRIGHT
 --------------------------------------------------------- */
-
 .footer__meta {
     margin-top: var(--space-8);
     font-size: var(--text-xs);

package/dist/components/hero.css

@@ -21,7 +21,6 @@
 /*---------------------------------------------------------
   1. HERO TOKEN DEFINITIONS
 ---------------------------------------------------------*/
-
 [data-vds-hero],
 .vds-hero {
     --hero-skeleton-speed: 1.2s;
@@ -61,7 +60,6 @@
 /* ---------------------------------------------------------
    2. GLOBAL HERO CONTAINER
 --------------------------------------------------------- */
-
 .hero {
     width: 100%;
     background-color: var(--color-surface);
@@ -162,7 +160,6 @@
 /*---------------------------------------------------------
   3. DENSITY VARIANTS (MUTUALLY EXCLUSIVE)
 ---------------------------------------------------------*/
-
 .hero.hero--a,
 .hero--a .hero {
     padding-top: var(--space-20);
@@ -259,7 +256,6 @@
 /*---------------------------------------------------------
   4. LAYOUT VARIANTS (MUTUALLY EXCLUSIVE)
 ---------------------------------------------------------*/
-
 .hero--split .hero__inner {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -343,7 +339,6 @@
 /*---------------------------------------------------------*
   5. FULL-BLEED VARIANT
 *---------------------------------------------------------*/
-
 .hero--full {
     position: relative;
     background-color: var(--color-bg-elevated);
@@ -390,7 +385,6 @@
 /*---------------------------------------------------------*
   6. INSET VARIANT
 *---------------------------------------------------------*/
-
 .hero--inset {
     background: var(--color-bg);
     padding: var(--space-8);
@@ -407,7 +401,6 @@
 /*---------------------------------------------------------*
   7. ACCENT LINE (TOKENIZED)
 *---------------------------------------------------------*/
-
 .hero__accent-line {
     width: var(--hero-accent-line-thickness);
     height: var(--space-20);
@@ -418,7 +411,6 @@
 /*---------------------------------------------------------*
   8. METRICS BLOCK
 *---------------------------------------------------------*/
-
 .hero__metrics {
     display: grid;
     grid-gap: var(--space-6);
@@ -485,7 +477,6 @@
 /*---------------------------------------------------------*
   8B. HERO POINTS (SUPPORTING BULLETS)
 *---------------------------------------------------------*/
-
 .hero__points {
     display: flex;
     flex-wrap: wrap;
@@ -519,7 +510,6 @@
 /*---------------------------------------------------------*
   9. LOADING STATE (TOKENIZED ANIMATION)
 *---------------------------------------------------------*/
-
 .hero--loading .hero__body {
     visibility: hidden;
 }
@@ -571,7 +561,6 @@
 /*---------------------------------------------------------*
   10. ERROR STATE
 *---------------------------------------------------------*/
-
 .hero--error .hero__body {
     opacity: 0.4;
 }
@@ -603,7 +592,6 @@
 /*---------------------------------------------------------*
   11. RESPONSIVE
 *---------------------------------------------------------*/
-
 @media (max-width: 1024px) {
     .hero--split .hero__inner,
     .hero--with-media .hero__inner {

package/dist/components/icons.css

@@ -20,7 +20,6 @@
 /* ---------------------------------------------------------
    1. BASE ICON (INLINE SVG)
 --------------------------------------------------------- */
-
 .icon {
     display: inline-block;
     width: var(--icon-md);
@@ -71,7 +70,6 @@
      - used together with .icon
      - colour driven by currentColor
 --------------------------------------------------------- */
-
 .icon--mask {
     background-color: currentColor;
     mask-mode: luminance;
@@ -95,7 +93,6 @@
    3. CORE STATE ICONS (GLYPHS)
    Usage: <span class="icon icon--mask icon--STATE"></span>
 --------------------------------------------------------- */
-
 .icon--info {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.4' y='7.0' width='1.2' height='3.5' fill='white'/%3E%3Ccircle cx='8' cy='5.0' r='0.70' fill='white'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.4' y='7.0' width='1.2' height='3.5' fill='white'/%3E%3Ccircle cx='8' cy='5.0' r='0.70' fill='white'/%3E%3C/svg%3E");
@@ -149,7 +146,6 @@
 /* ---------------------------------------------------------
    4. GENERAL UI ICONS (GLYPHS)
 --------------------------------------------------------- */
-
 .icon--chevron-left {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='10 3 5 8 10 13'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='10 3 5 8 10 13'/%3E%3C/svg%3E");
@@ -408,7 +404,6 @@
 /* ---------------------------------------------------------
    5. LOADER ICONS (GLYPHS ONLY)
 --------------------------------------------------------- */
-
 .icon--spinner {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a6.5 6.5 0 016.5 6.5h-2A4.5 4.5 0 008 3.5v-2z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a6.5 6.5 0 016.5 6.5h-2A4.5 4.5 0 008 3.5v-2z'/%3E%3C/svg%3E");
@@ -427,7 +422,6 @@
 /* ---------------------------------------------------------
    5.1 MONEY
 --------------------------------------------------------- */
-
 .icon--money {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2' fill='black'/%3E%3Cpath d='M8 6.5v3M7 7.5h2M7 8.5h2' stroke='white' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2' fill='black'/%3E%3Cpath d='M8 6.5v3M7 7.5h2M7 8.5h2' stroke='white' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
@@ -441,7 +435,6 @@
 /* ---------------------------------------------------------
    5.2 STATUS
 --------------------------------------------------------- */
-
 .icon--check {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -485,7 +478,6 @@
 /* ---------------------------------------------------------
    5.3 EMAIL
 --------------------------------------------------------- */
-
 .icon--email {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3C/svg%3E");
@@ -686,6 +678,26 @@
     mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9h4V5M19 9h-4V5M5 15h4v4M19 15h-4v4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
+.icon--panel-expand {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='4.2' y1='11.8' x2='11.8' y2='4.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='9.6,4.2 11.8,4.2 11.8,6.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='4.2' y1='11.8' x2='11.8' y2='4.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='9.6,4.2 11.8,4.2 11.8,6.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--panel-minimize {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='11.8' y1='4.2' x2='4.2' y2='11.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='4.2,9.6 4.2,11.8 6.4,11.8' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='11.8' y1='4.2' x2='4.2' y2='11.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='4.2,9.6 4.2,11.8 6.4,11.8' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--expand-panel {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='6.6' x2='8' y2='9.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,8.4 8,10.2 9.8,8.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='6.6' x2='8' y2='9.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,8.4 8,10.2 9.8,8.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--minimize-panel {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='9.4' x2='8' y2='6.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,7.6 8,5.8 9.8,7.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='9.4' x2='8' y2='6.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,7.6 8,5.8 9.8,7.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .icon--attach-outline {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.5l6.8-6.8a3 3 0 114.2 4.2l-8.6 8.6a5 5 0 11-7.1-7.1l8.3-8.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.5l6.8-6.8a3 3 0 114.2 4.2l-8.6 8.6a5 5 0 11-7.1-7.1l8.3-8.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -819,7 +831,6 @@
 /* ---------------------------------------------------------
    5A. LOADER ANIMATION - ROTATION (SPINNER)
 --------------------------------------------------------- */
-
 @keyframes icon-spin {
     from {
         transform: rotate(0deg);
@@ -836,7 +847,6 @@
 /* ---------------------------------------------------------
    5B. LOADER ANIMATION - PULSE (DOT / icon--pulse)
 --------------------------------------------------------- */
-
 @keyframes icon-pulse {
     0% {
         transform: scale(1);
@@ -859,7 +869,6 @@
 /* ---------------------------------------------------------
    5C. UNIFIED LOADER SYSTEM
 --------------------------------------------------------- */
-
 .icon--loader.icon--spinner,
 .icon--loader.icon--spinner-dots {
     animation: icon-spin 0.85s linear infinite;
@@ -890,7 +899,6 @@
 /* ---------------------------------------------------------
    6. ICON CONTAINERS
 --------------------------------------------------------- */
-
 .icon-container {
     display: inline-flex;
     align-items: center;
@@ -980,7 +988,6 @@
 /* ---------------------------------------------------------
    7. ICON COLOUR UTILITIES
 --------------------------------------------------------- */
-
 .icon-color--accent {
     color: var(--color-accent);
 }
@@ -1036,7 +1043,6 @@
 /* ---------------------------------------------------------
    8. ICON IN BUTTONS
 --------------------------------------------------------- */
-
 .button .icon,
 .button--icon .icon {
     width: var(--icon-sm);
@@ -1074,7 +1080,6 @@
 /* ---------------------------------------------------------
    9. ICON BADGES (NOTIFICATION DOTS)
 --------------------------------------------------------- */
-
 .icon-badge {
     position: relative;
     display: inline-flex;
@@ -1120,7 +1125,6 @@
 /* ---------------------------------------------------------
    10. ICON DENSITY LAYERS (A/B/C)
 --------------------------------------------------------- */
-
 .icon--a {
     width: var(--icon-lg);
     height: var(--icon-lg);
@@ -1156,7 +1160,6 @@
 /* ---------------------------------------------------------
    11. AUTO-CONTRAST ON DARK/LIGHT SURFACES
 --------------------------------------------------------- */
-
 .surface-on-dark .icon,
 .bg-dark .icon {
     color: var(--color-text-on-strong);
@@ -1182,7 +1185,6 @@
 /* ---------------------------------------------------------
    12. INTEGRATION WITH OTHER COMPONENTS
 --------------------------------------------------------- */
-
 .list-group__icon,
 .media__icon svg,
 .steps__bullet svg,
@@ -1208,7 +1210,6 @@
 /* ---------------------------------------------------------
    13. ICON UTILITIES
 --------------------------------------------------------- */
-
 .icon--rotate-90 {
     transform: rotate(90deg);
 }