@24vlh/vds 0.1.0

package/dist/components/tabs.css

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

package/dist/components/tabs.min.css

@@ -0,0 +1 @@
+.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)}}