@24vlh/vds 0.1.0

package/dist/components/navigation.min.css

@@ -0,0 +1 @@
+.nav{align-items:center;display:flex;gap:var(--space-6)}.nav__item,.nav__link{align-items:center;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);gap:var(--space-2);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__item:hover,.nav__link:hover{color:var(--color-text-muted)}.nav__item:active,.nav__link:active{background-color:var(--color-surface-subtle);color:var(--color-text)}.nav__item:focus-visible,.nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__item--active,.nav__item--active:hover,.nav__link--active,.nav__link--active:hover{color:var(--link-text-hover);font-weight:600;-webkit-text-decoration:none;text-decoration:none}.nav__item--disabled,.nav__link--disabled{cursor:not-allowed;opacity:.45;pointer-events:none}.nav__item svg,.nav__link svg{stroke:currentColor;fill:currentColor;height:1em;width:1em}.nav--a .nav__item,.nav--a .nav__link{padding:var(--space-2) var(--space-2)}.nav--b .nav__item,.nav--b .nav__link{padding:var(--space-1) var(--space-1)}.nav--c .nav__item,.nav--c .nav__link{font-size:var(--text-xs);gap:var(--space-1);padding:0 var(--space-1)}.nav--c .nav__item svg,.nav--c .nav__link svg{height:.875em;width:.875em}.nav-section{gap:var(--space-6)}.nav-section,.nav__brand{align-items:center;display:inline-flex}.nav__brand{gap:var(--space-3)}.nav__brand--compact{gap:var(--space-2)}.nav__logo{align-items:center;display:inline-flex;justify-content:center}.nav__logo .logo{padding:0}.nav__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.nav__toggle{background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__toggle svg{stroke:currentColor;height:24px;width:24px}.nav__toggle:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav__toggle:active{background-color:var(--color-muted-bg)}.nav__toggle:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__toggle--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--primary{align-items:center;display:flex;gap:var(--space-6)}.nav--primary .nav__item,.nav--primary .nav__link{border-radius:var(--radius-sm);padding:var(--space-2) var(--space-2)}.nav--primary .nav__item:hover,.nav--primary .nav__link:hover{background-color:var(--color-surface-subtle)}.nav--primary .nav__item--active,.nav--primary .nav__link--active{background-color:var(--color-accent-soft);color:var(--color-text)}.nav--sub{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);margin-bottom:var(--space-8)}.nav--sub,.nav--sub .nav__item,.nav--sub .nav__link{padding-bottom:var(--space-2)}.nav--sub .nav__item--active:after,.nav--sub .nav__link--active:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav--sub .nav__item--disabled,.nav--sub .nav__link--disabled{opacity:.45;pointer-events:none}.nav--sub .nav__item:focus-visible,.nav--sub .nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}.nav--pills .nav__item,.nav--pills .nav__link{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.nav--pills .nav__item:hover,.nav--pills .nav__link:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav--pills .nav__item--active,.nav--pills .nav__link--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--pills .nav__item--disabled,.nav--pills .nav__link--disabled{opacity:.45;pointer-events:none}.nav--pills .nav__item:focus-visible,.nav--pills .nav__link:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--vertical{display:flex;flex-direction:column;gap:var(--space-2)}.nav--vertical .nav__item,.nav--vertical .nav__link{padding:var(--space-1) 0}.nav--vertical .nav__item--depth-2,.nav--vertical .nav__link--depth-2{padding-left:var(--space-4)}.nav--vertical .nav__item--depth-3,.nav--vertical .nav__link--depth-3{padding-left:var(--space-6)}.sidebar{gap:var(--space-4)}.sidebar,.sidebar__section{display:flex;flex-direction:column}.sidebar__section{gap:var(--space-2)}.sidebar__section--collapsible .sidebar__section-header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.sidebar__section-title{color:var(--color-text-muted);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}.sidebar__section-toggle-icon{align-items:center;display:inline-flex;justify-content:center;transition:transform .15s ease}.sidebar__section--expanded .sidebar__section-toggle-icon{transform:rotate(90deg)}.sidebar__section--collapsed .sidebar__nav{display:none}.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar__nav .nav__item,.sidebar__nav .nav__link{border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;font-size:var(--text-sm);padding:var(--space-1) 0;-webkit-text-decoration:underline;text-decoration:underline}.sidebar__nav .nav__item:hover,.sidebar__nav .nav__link:hover{background-color:var(--color-surface-subtle);color:var(--color-text-muted);-webkit-text-decoration:none;text-decoration:none}.sidebar__nav .nav__item--active,.sidebar__nav .nav__link--active{color:var(--color-accent);font-weight:600}.sidebar__section--collapsible .sidebar__section-header{cursor:pointer}.sidebar__nav .nav__item:focus-visible,.sidebar__nav .nav__link:focus-visible{outline:2px solid var(--focus-ring-color,var(--color-accent-soft));outline-offset:var(--space-1)}.announcement{background-color:var(--color-muted-bg);border-bottom:var(--border-width) solid var(--color-muted-border);color:var(--color-text-muted);padding:var(--space-2) 0;width:100%}.announcement__inner{align-items:center;display:flex;gap:var(--space-4);justify-content:space-between;margin:0 auto;max-width:var(--content-width-xl);padding:0 var(--space-6)}.announcement__content{align-items:center;display:flex;gap:var(--space-2)}.announcement__icon{align-items:center;display:inline-flex;font-size:var(--text-sm);justify-content:center}.announcement__link,.announcement__text{font-size:var(--text-xs)}.announcement__link{color:var(--color-text);-webkit-text-decoration:none;text-decoration:none}.announcement__link:hover{-webkit-text-decoration:underline;text-decoration:underline}.announcement__close{align-items:center;background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.announcement__close:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.announcement__close:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.announcement--info{background-color:var(--color-info-soft);color:var(--color-info-strong)}.announcement--success{background-color:var(--color-success-soft);color:var(--color-success-strong)}.announcement--warning{background-color:var(--color-warning-soft);color:var(--color-warning-strong)}.announcement--danger{background-color:var(--color-danger-soft);color:var(--color-danger-strong)}.breadcrumbs{align-items:center;color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.breadcrumbs__item{align-items:center;display:inline-flex;gap:var(--space-1);max-width:100%}.breadcrumbs__link{color:var(--color-text);max-width:16rem;overflow:hidden;-webkit-text-decoration:underline;text-decoration:underline;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs__link:hover{color:var(--color-text-muted)}.breadcrumbs__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.breadcrumbs__separator{color:var(--color-text-soft)}.pagination{font-size:var(--text-xs);gap:var(--space-1)}.pagination,.pagination__item{align-items:center;display:inline-flex}.pagination__item{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;height:2rem;justify-content:center;min-width:2rem;padding:0 var(--space-2);-webkit-text-decoration:none;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}.pagination__item:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text)}.pagination__item:active{background-color:var(--color-muted-bg)}.pagination__item:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.pagination__item--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.pagination__item--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.pagination__next,.pagination__prev{min-width:auto;padding:0 var(--space-2)}.pagination__ellipsis{background-color:transparent;border:none;cursor:default;min-width:auto}.toolbar{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-3) var(--space-4)}.toolbar--dense{padding:var(--space-2) var(--space-3)}.toolbar--spacious{padding:var(--space-4) var(--space-5)}.toolbar__section{align-items:center;display:flex;gap:var(--space-3)}.toolbar__title{font-size:var(--text-sm);font-weight:500}.toolbar__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.footer .nav{display:flex;flex-direction:column;gap:var(--space-2)}.footer .nav.nav--vertical{align-items:flex-start}.footer .nav__item,.footer .nav__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;padding-left:0;padding-right:0;text-align:left}.footer .nav__item:hover,.footer .nav__link:hover{opacity:1}.footer .nav__item--active,.footer .nav__link--active{font-weight:500;opacity:1}.nav-panel{background-color:var(--color-bg-elevated);border-left:var(--border-width) solid var(--color-border-subtle);bottom:0;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:var(--space-4);max-width:100%;opacity:0;padding:var(--space-4);pointer-events:none;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .2s ease,opacity .2s ease;width:18rem;z-index:40}.nav-panel--open{opacity:1;pointer-events:auto;transform:translateX(0)}.nav-backdrop{background-color:var(--overlay-backdrop-default);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .2s ease;z-index:30}.nav-backdrop--visible{opacity:1;pointer-events:auto}.nav--mobile{display:flex;flex-direction:column;gap:var(--space-4)}.nav--mobile .nav__item,.nav--mobile .nav__link{font-size:var(--text-md);padding:var(--space-2) 0}@media (max-width:768px){.nav__toggle{align-items:center;display:inline-flex}}.nav-tabs{align-items:center;border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);padding-bottom:var(--space-2)}.nav-tabs__item{align-items:center;background:none;border:none;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);font-weight:500;justify-content:center;padding:var(--space-1) var(--space-2);position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.nav-tabs__item:hover{color:var(--color-text-muted)}.nav-tabs__item:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav-tabs__item--active,.nav-tabs__item[aria-selected=true]{color:var(--color-text);font-weight:600}.nav-tabs__item--active:after,.nav-tabs__item[aria-selected=true]:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav-tabs__item--disabled,.nav-tabs__item[disabled]{cursor:not-allowed;opacity:.45;pointer-events:none}.nav-tabs__item:hover:not(.nav-tabs__item--active):not([aria-selected=true]){background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text)}.nav-tabs--compact{gap:var(--space-4);padding-bottom:var(--space-1)}.nav-tabs--compact .nav-tabs__item{font-size:var(--text-xs);padding:var(--space-0_5) 0}.nav-tabs__item{gap:var(--space-2)}.nav-tabs__icon{flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.nav-tabs__badge{align-items:center;background-color:var(--accent-soft-surface,var(--color-accent-soft));border-radius:var(--radius-pill);color:var(--accent-soft-on,var(--color-on-accent));display:inline-flex;flex-shrink:0;font-size:var(--text-xs);font-weight:500;height:1.25rem;justify-content:center;line-height:1;min-width:1.25rem;padding-left:var(--space-1);padding-right:var(--space-1)}.nav-tabs__item--active .nav-tabs__badge,.nav-tabs__item[aria-selected=true] .nav-tabs__badge{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface));color:var(--accent-soft-on,var(--color-on-accent))}

package/dist/components/overlays.css

@@ -0,0 +1,498 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Navigation
+ *
+ *  Responsibilities:
+ *    - Provide the entire navigation architecture: primary/secondary nav,
+ *      mobile nav, vertical nav, sidebar, pills, tabs, pagination,
+ *      breadcrumbs, toolbars, and announcement bars
+ *    - Define interactive states: hover, active, disabled, focus-visible,
+ *      depth indentation, collapsed/expanded sections
+ *    - Expose brand/logo slots and action areas for headers & sidebars
+ *    - Supply panel + backdrop patterns for mobile overlay navigation
+ *
+ *  System Notes:
+ *    - Fully token-driven: spacing, radii, borders, colours, z-index, motion
+ *    - Pure CSS; JS only toggles `.nav-panel--open` and `.nav-backdrop--visible`
+ *    - Safe namespacing: can embed in header/footer/sidebars without collisions
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. OVERLAYS TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+[data-vds-overlay],
+.vds-overlay {
+    --modal-width-sm: 26.25rem;
+    --modal-width-md: 40rem;
+    --modal-width-lg: 51.25rem;
+    --modal-width-xl: 65rem;
+    --modal-loader-size-lg: 2.5rem;
+
+    --drawer-width: 22.5rem;
+}
+
+/* ---------------------------------------------------------
+   2. OVERLAY BACKDROP
+--------------------------------------------------------- */
+
+.backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background-color: var(--overlay-backdrop-default);
+
+    backdrop-filter: none;
+
+    z-index: 80;
+
+    z-index: var(--z-backdrop, 80);
+
+    pointer-events: none;
+    opacity: 0;
+}
+
+.backdrop--light {
+    background-color: var(--overlay-backdrop-light);
+}
+
+.backdrop--heavy {
+    background-color: var(--overlay-backdrop-heavy);
+}
+
+.backdrop--active {
+    pointer-events: auto;
+    opacity: 1;
+}
+
+/* ---------------------------------------------------------
+   3. BASE MODAL (NO ANIMATION)
+--------------------------------------------------------- */
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    z-index: 90;
+
+    z-index: var(--z-modal, 90);
+
+    pointer-events: none;
+    opacity: 0;
+
+    transform: none;
+
+    transition: none;
+}
+
+.modal--active {
+    pointer-events: auto;
+    opacity: 1;
+}
+
+.modal__inner {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border-subtle);
+
+    box-shadow: var(--shadow-3);
+
+    width: 100%;
+    max-width: var(--modal-width-md);
+    max-height: calc(100vh - var(--space-20));
+
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden;
+    pointer-events: auto;
+
+    transition: none;
+}
+
+/* ---------------------------------------------------------
+   4. MODAL HEADER / BODY / FOOTER
+--------------------------------------------------------- */
+
+.modal__header {
+    padding: var(--space-6) var(--space-8);
+    border-bottom: 1px solid var(--color-border-subtle);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.modal__title {
+    font-size: var(--text-lg);
+    font-weight: 600;
+}
+
+.modal__close {
+    background: none;
+    border: none;
+    padding: var(--space-2);
+    display: inline-flex;
+    cursor: pointer;
+    color: var(--color-text-muted);
+}
+
+.modal__body {
+    padding: var(--space-8);
+    overflow-y: auto;
+    flex: 1;
+}
+
+.modal__footer {
+    padding: var(--space-6) var(--space-8);
+    border-top: 1px solid var(--color-border-subtle);
+
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-4);
+}
+
+/* ---------------------------------------------------------
+   5. MODAL DENSITY VARIANTS
+--------------------------------------------------------- */
+
+.modal--a .modal__header,
+.modal--a .modal__footer {
+    padding: var(--space-8) var(--space-10);
+}
+
+.modal--a .modal__body {
+    padding: var(--space-10);
+}
+
+.modal--b .modal__header,
+.modal--b .modal__footer {
+    padding: var(--space-6) var(--space-8);
+}
+
+.modal--b .modal__body {
+    padding: var(--space-8);
+}
+
+.modal--c .modal__header,
+.modal--c .modal__footer {
+    padding: var(--space-4) var(--space-6);
+}
+
+.modal--c .modal__body {
+    padding: var(--space-6);
+}
+
+/* ---------------------------------------------------------
+   6. MODAL SIZES
+--------------------------------------------------------- */
+
+.modal--sm .modal__inner {
+    max-width: var(--modal-width-sm);
+}
+
+.modal--md .modal__inner {
+    max-width: var(--modal-width-md);
+}
+
+.modal--lg .modal__inner {
+    max-width: var(--modal-width-lg);
+}
+
+.modal--xl .modal__inner {
+    max-width: var(--modal-width-xl);
+}
+
+.modal--full .modal__inner {
+    max-width: none;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+}
+
+/* ---------------------------------------------------------
+   7. MOBILE FULL-SCREEN & BOTTOM-SHEET (NO ANIMATIONS)
+--------------------------------------------------------- */
+
+@media (max-width: 768px) {
+
+    .modal--fullscreen-mobile .modal__inner {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+        max-width: none;
+        max-height: none;
+    }
+
+    .modal--sheet {
+        align-items: flex-end;
+    }
+
+    .modal--sheet .modal__inner {
+        width: 100%;
+        max-width: none;
+        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+        max-height: 80vh;
+    }
+
+    body.modal-open {
+        overflow: hidden;
+    }
+}
+
+/* ---------------------------------------------------------
+   8. MODAL STATES
+--------------------------------------------------------- */
+
+.modal--success .modal__header {
+    border-bottom-color: var(--color-success);
+    background-color: var(--color-success-soft);
+    color: var(--semantic-success-text-strong, var(--color-success-strong));
+}
+
+.modal--danger .modal__header {
+    border-bottom-color: var(--color-danger);
+    background-color: var(--color-danger-soft);
+    color: var(--semantic-error-text-strong, var(--color-danger-strong));
+}
+
+.modal--info .modal__header {
+    border-bottom-color: var(--color-info);
+    background-color: var(--color-info-soft);
+    color: var(--semantic-info-text-strong, var(--color-info-strong));
+}
+
+.modal--warning .modal__header {
+    border-bottom-color: var(--color-warning);
+    background-color: var(--color-warning-soft);
+    color: var(--semantic-warning-text-strong, var(--color-warning-strong));
+}
+
+/* ---------------------------------------------------------
+   9. LOADING OVERLAY (NO BLUR)
+--------------------------------------------------------- */
+
+.modal--loading .modal__inner {
+    position: relative;
+}
+
+.modal--loading .modal__loader {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    backdrop-filter: none;
+    background-color: var(--overlay-backdrop-loading);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    z-index: 2;
+}
+
+.modal--loading .modal__loader-icon {
+    width: var(--modal-loader-size-lg);
+    height: var(--modal-loader-size-lg);
+    stroke: var(--color-accent);
+    fill: none;
+}
+
+/* ---------------------------------------------------------
+   10. DRAWERS (NO ANIMATIONS)
+--------------------------------------------------------- */
+
+.drawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+
+    width: var(--drawer-width);
+    max-width: 90vw;
+
+    background-color: var(--color-surface);
+
+    border-left: 1px solid var(--color-border-subtle);
+    border-right: 1px solid var(--color-border-subtle);
+
+    box-shadow: var(--shadow-3);
+
+    z-index: 95;
+
+    z-index: var(--z-drawer, 95);
+
+    display: flex;
+    flex-direction: column;
+
+    transition: none;
+}
+
+.drawer--left {
+    left: 0;
+}
+
+.drawer--right {
+    right: 0;
+}
+
+.drawer--hidden {
+    display: none;
+}
+
+.drawer:not(.drawer--hidden) {
+    display: flex;
+}
+
+.drawer__header,
+.drawer__footer {
+    padding: var(--space-6);
+    border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.drawer__footer {
+    border-top: 1px solid var(--color-border-subtle);
+    border-bottom: none;
+}
+
+.drawer__body {
+    padding: var(--space-6);
+    overflow-y: auto;
+    flex: 1;
+}
+
+/* ---------------------------------------------------------
+   11. INLINE OVERLAY PANEL
+--------------------------------------------------------- */
+
+.overlay-inline-container {
+    position: relative;
+}
+
+.overlay-inline {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    z-index: 10;
+
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border-subtle);
+    background-color: var(--color-surface);
+    box-shadow: var(--shadow-1);
+
+    display: none;
+}
+
+.overlay-inline--active {
+    display: block;
+}
+
+.overlay-inline__header {
+    padding: var(--space-4) var(--space-6);
+    border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.overlay-inline__body {
+    padding: var(--space-6);
+}
+
+.overlay-inline--info {
+    border-color: var(--semantic-info-border);
+    background-color: var(--semantic-info-bg);
+    color: var(--semantic-info-text);
+}
+
+.overlay-inline--success {
+    border-color: var(--semantic-success-border);
+    background-color: var(--semantic-success-bg);
+    color: var(--semantic-success-text);
+}
+
+.overlay-inline--warning {
+    border-color: var(--semantic-warning-border);
+    background-color: var(--semantic-warning-bg);
+    color: var(--semantic-warning-text);
+}
+
+.overlay-inline--danger {
+    border-color: var(--semantic-danger-border);
+    background-color: var(--semantic-danger-bg);
+    color: var(--semantic-danger-text);
+}
+
+/* ---------------------------------------------------------
+   12. SPLIT MODAL
+--------------------------------------------------------- */
+
+.modal--split .modal__inner {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+}
+
+.modal__side {
+    border-left: 1px solid var(--color-border-subtle);
+    padding: var(--space-8);
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+    .modal--split .modal__inner {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .modal__side {
+        border-left: none;
+        border-top: 1px solid var(--color-border-subtle);
+    }
+}
+
+/* ---------------------------------------------------------
+   13. OPTIONAL MODAL CHROME REMOVAL
+--------------------------------------------------------- */
+
+.modal--no-header .modal__header {
+    display: none;
+}
+
+.modal--no-footer .modal__footer {
+    display: none;
+}
+
+/* ---------------------------------------------------------
+   14. STACKING LEVELS
+--------------------------------------------------------- */
+
+.modal--level-2 {
+    z-index: calc(90 + 10);
+    z-index: calc(var(--z-modal, 90) + 10);
+}
+
+.modal--level-3 {
+    z-index: calc(90 + 20);
+    z-index: calc(var(--z-modal, 90) + 20);
+}
+
+.backdrop--level-2 {
+    z-index: calc(80 + 10);
+    z-index: calc(var(--z-backdrop, 80) + 10);
+}
+
+.backdrop--level-3 {
+    z-index: calc(80 + 20);
+    z-index: calc(var(--z-backdrop, 80) + 20);
+}
+

package/dist/components/overlays.min.css

@@ -0,0 +1 @@
+.vds-overlay,[data-vds-overlay]{--modal-width-sm:26.25rem;--modal-width-md:40rem;--modal-width-lg:51.25rem;--modal-width-xl:65rem;--modal-loader-size-lg:2.5rem;--drawer-width:22.5rem}.backdrop{backdrop-filter:none;background-color:var(--overlay-backdrop-default);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;z-index:80;z-index:var(--z-backdrop,80)}.backdrop--light{background-color:var(--overlay-backdrop-light)}.backdrop--heavy{background-color:var(--overlay-backdrop-heavy)}.backdrop--active{opacity:1;pointer-events:auto}.modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transform:none;transition:none;z-index:90;z-index:var(--z-modal,90)}.modal--active{opacity:1;pointer-events:auto}.modal__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);display:flex;flex-direction:column;max-height:calc(100vh - var(--space-20));max-width:var(--modal-width-md);overflow:hidden;pointer-events:auto;transition:none;width:100%}.modal__header{align-items:center;border-bottom:1px solid var(--color-border-subtle);display:flex;justify-content:space-between;padding:var(--space-6) var(--space-8)}.modal__title{font-size:var(--text-lg);font-weight:600}.modal__close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;display:inline-flex;padding:var(--space-2)}.modal__body{flex:1;overflow-y:auto;padding:var(--space-8)}.modal__footer{border-top:1px solid var(--color-border-subtle);display:flex;gap:var(--space-4);justify-content:flex-end;padding:var(--space-6) var(--space-8)}.modal--a .modal__footer,.modal--a .modal__header{padding:var(--space-8) var(--space-10)}.modal--a .modal__body{padding:var(--space-10)}.modal--b .modal__footer,.modal--b .modal__header{padding:var(--space-6) var(--space-8)}.modal--b .modal__body{padding:var(--space-8)}.modal--c .modal__footer,.modal--c .modal__header{padding:var(--space-4) var(--space-6)}.modal--c .modal__body{padding:var(--space-6)}.modal--sm .modal__inner{max-width:var(--modal-width-sm)}.modal--md .modal__inner{max-width:var(--modal-width-md)}.modal--lg .modal__inner{max-width:var(--modal-width-lg)}.modal--xl .modal__inner{max-width:var(--modal-width-xl)}.modal--full .modal__inner{border-radius:0;height:100%;max-width:none;width:100%}@media (max-width:768px){.modal--fullscreen-mobile .modal__inner{border-radius:0;height:100%;max-height:none;max-width:none;width:100%}.modal--sheet{align-items:flex-end}.modal--sheet .modal__inner{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:80vh;max-width:none;width:100%}body.modal-open{overflow:hidden}}.modal--success .modal__header{background-color:var(--color-success-soft);border-bottom-color:var(--color-success);color:var(--semantic-success-text-strong,var(--color-success-strong))}.modal--danger .modal__header{background-color:var(--color-danger-soft);border-bottom-color:var(--color-danger);color:var(--semantic-error-text-strong,var(--color-danger-strong))}.modal--info .modal__header{background-color:var(--color-info-soft);border-bottom-color:var(--color-info);color:var(--semantic-info-text-strong,var(--color-info-strong))}.modal--warning .modal__header{background-color:var(--color-warning-soft);border-bottom-color:var(--color-warning);color:var(--semantic-warning-text-strong,var(--color-warning-strong))}.modal--loading .modal__inner{position:relative}.modal--loading .modal__loader{align-items:center;backdrop-filter:none;background-color:var(--overlay-backdrop-loading);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}.modal--loading .modal__loader-icon{stroke:var(--color-accent);fill:none;height:var(--modal-loader-size-lg);width:var(--modal-loader-size-lg)}.drawer{background-color:var(--color-surface);border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle);bottom:0;box-shadow:var(--shadow-3);display:flex;flex-direction:column;max-width:90vw;position:fixed;top:0;transition:none;width:var(--drawer-width);z-index:95;z-index:var(--z-drawer,95)}.drawer--left{left:0}.drawer--right{right:0}.drawer--hidden{display:none}.drawer:not(.drawer--hidden){display:flex}.drawer__footer,.drawer__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-6)}.drawer__footer{border-bottom:none;border-top:1px solid var(--color-border-subtle)}.drawer__body{flex:1;overflow-y:auto;padding:var(--space-6)}.overlay-inline-container{position:relative}.overlay-inline{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);bottom:0;box-shadow:var(--shadow-1);display:none;left:0;position:absolute;right:0;top:0;z-index:10}.overlay-inline--active{display:block}.overlay-inline__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-4) var(--space-6)}.overlay-inline__body{padding:var(--space-6)}.overlay-inline--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.overlay-inline--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.overlay-inline--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.overlay-inline--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.modal--split .modal__inner{display:grid;grid-template-columns:2fr 1fr}.modal__side{border-left:1px solid var(--color-border-subtle);overflow-y:auto;padding:var(--space-8)}@media (max-width:768px){.modal--split .modal__inner{display:flex;flex-direction:column}.modal__side{border-left:none;border-top:1px solid var(--color-border-subtle)}}.modal--no-footer .modal__footer,.modal--no-header .modal__header{display:none}.modal--level-2{z-index:100;z-index:calc(var(--z-modal, 90) + 10)}.modal--level-3{z-index:110;z-index:calc(var(--z-modal, 90) + 20)}.backdrop--level-2{z-index:90;z-index:calc(var(--z-backdrop, 80) + 10)}.backdrop--level-3{z-index:100;z-index:calc(var(--z-backdrop, 80) + 20)}