@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/overlays.css

@@ -1,498 +1 @@
-/************************************************************
- * 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);
-}
-
+.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)}