@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/tabs.css

@@ -1,307 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Tabs System
- *
- *  Responsibilities:
- *    - Provide horizontal and vertical tab interfaces with full tab-list,
- *      tab, and tab-panel architecture
- *    - Implement underline indicator active state, icon and badge support,
- *      and alignment modes (inline / center / right / stretch)
- *    - Support density variants (A / default / C) and optional muted-surface
- *      colour adaptations
- *    - Enable responsive horizontal scroll for overflowed tab-lists
- *    - Ensure accessible focus-visible states, disabled states, and hidden
- *      panel behaviour
- *
- *  System Notes:
- *    - Fully token-driven: spacing, text scales, indicator height, transitions
- *    - Pure CSS; JS only toggles tab--active and associated tab-panel visibility
- *    - Namespace and behaviour are isolated from navigation.css tab-like
- *      patterns to avoid collisions
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. TABS TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-[data-vds-tabs],
-.vds-tabs {
-    --tabs-component-disabled-opacity: 0.48;
-}
-
-/* ---------------------------------------------------------
-   2. TABS CONTAINER
---------------------------------------------------------- */
-
-.tabs {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-    width: 100%;
-}
-
-.tabs--center {
-    align-items: center;
-}
-
-.tabs--right {
-    align-items: flex-end;
-}
-
-/* ---------------------------------------------------------
-   3. TAB LIST (HORIZONTAL UNDERLINE BASELINE)
---------------------------------------------------------- */
-
-.tab-list {
-    position: relative;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    gap: 0;
-    border-bottom: var(--border-width) solid var(--color-border-subtle);
-    width: 100%;
-}
-
-.tabs--inline .tab-list {
-    width: auto;
-}
-
-.tabs--stretch .tab-list {
-    width: 100%;
-}
-
-.tabs--stretch .tab {
-    flex: 1 1 0;
-}
-
-/* ---------------------------------------------------------
-   4. TAB (BASE)
-   Pattern: <button class="tab">Label</button>
---------------------------------------------------------- */
-
-.tab {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding-left: var(--space-3);
-
-    padding-right: var(--space-3);
-    padding-top: var(--space-2);
-    padding-bottom: var(--space-2);
-
-    font-size: var(--text-sm);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.2;
-    letter-spacing: var(--letter-normal);
-
-    border: none;
-    border-radius: 0;
-    background: none;
-    color: var(--color-text-muted);
-
-    cursor: pointer;
-    white-space: nowrap;
-
-    transition: color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
-}
-
-.tab__icon {
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-    margin-right: var(--space-2);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.tab__badge {
-    margin-left: var(--space-2);
-    font-size: var(--text-xxs);
-    padding: 0 var(--space-2);
-    border-radius: var(--radius-full);
-    background-color: var(--color-muted-bg);
-    color: var(--color-text-soft);
-}
-
-.tab:hover {
-    color: var(--color-text);
-    background-color: var(--color-surface-subtle);
-}
-
-.tab:focus-visible {
-    outline: none;
-    color: var(--color-text);
-    box-shadow: 0 var(--tab-indicator-height) 0 0 var(--focus-ring-color);
-}
-
-.tab[disabled],
-.tab--disabled {
-    cursor: not-allowed;
-    opacity: var(--tabs-component-disabled-opacity);
-    box-shadow: none;
-    background: none;
-}
-
-/* ---------------------------------------------------------
-   5. ACTIVE STATE - UNDERLINE INDICATOR
---------------------------------------------------------- */
-
-.tab--active {
-    color: var(--color-text);
-    font-weight: var(--font-weight-semibold);
-    box-shadow: 0 var(--tab-indicator-height) 0 0 var(--color-accent);
-}
-
-.tabs--on-muted .tab--active {
-    box-shadow: 0 var(--tab-indicator-height) 0 0 var(--color-accent-strong);
-}
-
-.tab--active:hover {
-    background-color: transparent;
-}
-
-/* ---------------------------------------------------------
-   6. DENSITY VARIANTS (A / default / C)
---------------------------------------------------------- */
-
-.tabs--a .tab {
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-    padding-top: var(--space-3);
-    padding-bottom: var(--space-3);
-    font-size: var(--text-md);
-}
-
-.tabs--c .tab {
-    padding-left: var(--space-2);
-    padding-right: var(--space-2);
-    padding-top: var(--space-1_5);
-    padding-bottom: var(--space-1_5);
-    font-size: var(--text-xs);
-}
-
-/* ---------------------------------------------------------
-   7. VERTICAL ORIENTATION
-   Pattern:
-   <div class="tabs tabs--vertical">
-     <div class="tab-list">...</div>
-     <div class="tab-panel">...</div>
-   </div>
---------------------------------------------------------- */
-
-.tabs--vertical {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: var(--space-6);
-}
-
-.tabs--vertical .tab-list {
-    flex-direction: column;
-    align-items: stretch;
-    border-bottom: none;
-    border-right: var(--border-width) solid var(--color-border-subtle);
-    width: auto;
-    min-width: var(--sidebar-width-md);
-}
-
-.tabs--vertical .tab {
-    justify-content: flex-start;
-    text-align: left;
-    width: 100%;
-    padding-left: var(--space-3);
-    padding-right: var(--space-3);
-    padding-top: var(--space-2);
-    padding-bottom: var(--space-2);
-}
-
-.tabs--vertical .tab--active {
-    box-shadow: var(--tab-indicator-height) 0 0 0 var(--color-accent);
-}
-
-.tabs--vertical .tab:focus-visible {
-    box-shadow: var(--tab-indicator-height) 0 0 0 var(--focus-ring-color);
-}
-
-.tabs--vertical.tabs--c .tab {
-    padding-left: var(--space-2);
-    padding-right: var(--space-2);
-    padding-top: var(--space-1_5);
-    padding-bottom: var(--space-1_5);
-}
-
-.tabs--vertical.tabs--a .tab {
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-    padding-top: var(--space-3);
-    padding-bottom: var(--space-3);
-}
-
-/* ---------------------------------------------------------
-   8. TAB PANELS
---------------------------------------------------------- */
-
-.tab-panel {
-    width: 100%;
-    padding-top: var(--space-2);
-}
-
-.tab-panel[hidden],
-.tab-panel.is-hidden {
-    display: none;
-}
-
-.tab-panel--padded {
-    padding-top: var(--space-4);
-}
-
-.tabs--vertical .tab-panel,
-.tabs--vertical .tab-panels {
-    flex: 1 1 0;
-}
-
-.tab-panels {
-    width: 100%;
-    padding-top: var(--space-2);
-}
-
-/* ---------------------------------------------------------
-   9. RESPONSIVE BEHAVIOUR
---------------------------------------------------------- */
-
-@media (max-width: 768px) {
-    .tab-list {
-        overflow-x: auto;
-        scrollbar-width: thin;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .tab-list::-webkit-scrollbar {
-        height: 6px;
-    }
-
-    .tabs--vertical {
-        flex-direction: column;
-        gap: var(--space-3);
-    }
-
-    .tabs--vertical .tab-list {
-        flex-direction: row;
-        width: 100%;
-        min-width: 0;
-        border-right: none;
-        border-bottom: var(--border-width) solid var(--color-border-subtle);
-    }
-
-    .tabs--vertical .tab {
-        justify-content: center;
-        text-align: center;
-    }
-
-    .tabs--vertical .tab--active {
-        box-shadow: 0 var(--tab-indicator-height) 0 0 var(--color-accent);
-    }
-
-    .tabs--vertical .tab:focus-visible {
-        box-shadow: 0 var(--tab-indicator-height) 0 0 var(--focus-ring-color);
-    }
-}
+.vds-tabs,[data-vds-tabs]{--tabs-component-disabled-opacity:0.48}.tabs{display:flex;flex-direction:column;gap:var(--space-3);width:100%}.tabs--center{align-items:center}.tabs--right{align-items:flex-end}.tab-list{border-bottom:var(--border-width) solid var(--color-border-subtle);display:inline-flex;flex-wrap:nowrap;gap:0;position:relative;width:100%}.tabs--inline .tab-list{width:auto}.tabs--stretch .tab-list{width:100%}.tabs--stretch .tab{flex:1 1 0}.tab{background:none;border:none;border-radius:0;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-normal);line-height:1.2;padding:var(--space-2) var(--space-3);position:relative;transition:color var(--transition-normal),background-color var(--transition-normal),box-shadow var(--transition-normal);white-space:nowrap}.tab,.tab__icon{align-items:center;display:inline-flex;justify-content:center}.tab__icon{height:var(--icon-sm);margin-right:var(--space-2);width:var(--icon-sm)}.tab__badge{background-color:var(--color-muted-bg);border-radius:var(--radius-full);color:var(--color-text-soft);font-size:var(--text-xxs);margin-left:var(--space-2);padding:0 var(--space-2)}.tab:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.tab:focus-visible{box-shadow:0 var(--tab-indicator-height) 0 0 var(--focus-ring-color);color:var(--color-text);outline:none}.tab--disabled,.tab[disabled]{background:none;box-shadow:none;cursor:not-allowed;opacity:var(--tabs-component-disabled-opacity)}.tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent);color:var(--color-text);font-weight:var(--font-weight-semibold)}.tabs--on-muted .tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent-strong)}.tab--active:hover{background-color:transparent}.tabs--a .tab{font-size:var(--text-md);padding:var(--space-3) var(--space-4)}.tabs--c .tab{font-size:var(--text-xs);padding:var(--space-1_5) var(--space-2)}.tabs--vertical{align-items:flex-start;flex-direction:row;gap:var(--space-6)}.tabs--vertical .tab-list{align-items:stretch;border-bottom:none;border-right:var(--border-width) solid var(--color-border-subtle);flex-direction:column;min-width:var(--sidebar-width-md);width:auto}.tabs--vertical .tab{justify-content:flex-start;padding:var(--space-2) var(--space-3);text-align:left;width:100%}.tabs--vertical .tab--active{box-shadow:var(--tab-indicator-height) 0 0 0 var(--color-accent)}.tabs--vertical .tab:focus-visible{box-shadow:var(--tab-indicator-height) 0 0 0 var(--focus-ring-color)}.tabs--vertical.tabs--c .tab{padding:var(--space-1_5) var(--space-2)}.tabs--vertical.tabs--a .tab{padding:var(--space-3) var(--space-4)}.tab-panel{padding-top:var(--space-2);width:100%}.tab-panel.is-hidden,.tab-panel[hidden]{display:none}.tab-panel--padded{padding-top:var(--space-4)}.tabs--vertical .tab-panel,.tabs--vertical .tab-panels{flex:1 1 0}.tab-panels{padding-top:var(--space-2);width:100%}@media (max-width:768px){.tab-list{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:thin}.tab-list::-webkit-scrollbar{height:6px}.tabs--vertical{flex-direction:column;gap:var(--space-3)}.tabs--vertical .tab-list{border-bottom:var(--border-width) solid var(--color-border-subtle);border-right:none;flex-direction:row;min-width:0;width:100%}.tabs--vertical .tab{justify-content:center;text-align:center}.tabs--vertical .tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent)}.tabs--vertical .tab:focus-visible{box-shadow:0 var(--tab-indicator-height) 0 0 var(--focus-ring-color)}}