vanduo-framework 1.1.8

package/css/components/tabs.css

@@ -0,0 +1,327 @@
+/**
+ * Vanduo Framework - Tabs
+ * Tabbed content navigation component
+ */
+
+:root {
+  /* Tab Sizing (Fibonacci pairs: x/y ratio ~ phi) */
+  --tab-padding-x: 1.3125rem;     /* 21px - fib */
+  --tab-padding-y: 0.8125rem;     /* 13px - fib */
+  --tab-padding-x-sm: 0.8125rem;  /* 13px - fib */
+  --tab-padding-y-sm: 0.5rem;     /* 8px  - fib */
+  --tab-padding-x-lg: 2.125rem;   /* 34px - fib */
+  --tab-padding-y-lg: 1.3125rem;  /* 21px - fib */
+  --tab-gap: 0;
+  --tab-border-width: 2px; /* fib(2) */
+
+  /* Tab Colors */
+  --tab-text: var(--text-secondary);
+  --tab-text-hover: var(--text-primary);
+  --tab-text-active: var(--color-primary);
+  --tab-border: var(--border-color);
+  --tab-border-active: var(--color-primary);
+  --tab-bg-hover: var(--bg-secondary);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --tab-bg-hover: var(--color-gray-800);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --tab-bg-hover: var(--color-gray-800);
+  }
+}
+
+/* Base Tabs Container */
+.vd-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Tab List */
+.vd-tab-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--tab-gap);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border-bottom: 1px solid var(--tab-border);
+}
+
+/* Tab Item */
+.vd-tab-item {
+  margin-bottom: -1px;
+}
+
+/* Tab Link/Button */
+.vd-tab-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: var(--tab-padding-y) var(--tab-padding-x);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--tab-text);
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  border-bottom: var(--tab-border-width) solid transparent;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+}
+
+.vd-tab-link:hover {
+  color: var(--tab-text-hover);
+  background-color: var(--tab-bg-hover);
+}
+
+.vd-tab-link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+/* Active Tab */
+.vd-tab-link.is-active,
+.vd-tab-item.is-active .vd-tab-link {
+  color: var(--tab-text-active);
+  border-bottom-color: var(--tab-border-active);
+}
+
+/* Disabled Tab */
+.vd-tab-link.disabled,
+.vd-tab-link:disabled,
+.vd-tab-item.disabled .vd-tab-link {
+  color: var(--text-muted);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Tab Content */
+.vd-tab-content {
+  padding-top: 1rem;
+}
+
+/* Tab Pane */
+.vd-tab-pane {
+  display: none;
+}
+
+.vd-tab-pane.is-active {
+  display: block;
+}
+
+/* Fade Animation */
+.vd-tabs-fade .vd-tab-pane {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.vd-tabs-fade .vd-tab-pane.is-active {
+  opacity: 1;
+}
+
+/* Tab Variants - Boxed */
+.vd-tabs-boxed .vd-tab-list {
+  background-color: var(--bg-secondary);
+  padding: 0.25rem;
+  border-radius: var(--btn-border-radius);
+  border-bottom: none;
+  gap: 0.25rem;
+}
+
+.vd-tabs-boxed .vd-tab-link {
+  border-radius: var(--btn-border-radius);
+  border-bottom: none;
+}
+
+.vd-tabs-boxed .vd-tab-link:hover {
+  background-color: var(--color-gray-200);
+}
+
+.vd-tabs-boxed .vd-tab-link.is-active,
+.vd-tabs-boxed .vd-tab-item.is-active .vd-tab-link {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="dark"] .vd-tabs-boxed .vd-tab-link:hover {
+  background-color: var(--color-gray-700);
+}
+
+/* Tab Variants - Pills */
+.vd-tabs-pills .vd-tab-list {
+  border-bottom: none;
+  gap: 0.5rem;
+}
+
+.vd-tabs-pills .vd-tab-link {
+  border-radius: var(--btn-border-radius);
+  border-bottom: none;
+}
+
+.vd-tabs-pills .vd-tab-link.is-active,
+.vd-tabs-pills .vd-tab-item.is-active .vd-tab-link {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+/* Tab Variants - Bordered */
+.vd-tabs-bordered .vd-tab-list {
+  border: 1px solid var(--tab-border);
+  border-radius: var(--btn-border-radius) var(--btn-border-radius) 0 0;
+  border-bottom: none;
+}
+
+.vd-tabs-bordered .vd-tab-link {
+  border: 1px solid transparent;
+  border-bottom: none;
+  margin: -1px -1px 0 -1px;
+}
+
+.vd-tabs-bordered .vd-tab-link.is-active,
+.vd-tabs-bordered .vd-tab-item.is-active .vd-tab-link {
+  border-color: var(--tab-border);
+  background-color: var(--bg-primary);
+  border-bottom-color: var(--bg-primary);
+  border-radius: var(--btn-border-radius) var(--btn-border-radius) 0 0;
+}
+
+.vd-tabs-bordered .vd-tab-content {
+  border: 1px solid var(--tab-border);
+  border-top: none;
+  border-radius: 0 0 var(--btn-border-radius) var(--btn-border-radius);
+  padding: 1rem;
+}
+
+/* Tab Variants - Underline Only */
+.vd-tabs-underline .vd-tab-list {
+  border-bottom: 2px solid var(--tab-border);
+}
+
+.vd-tabs-underline .vd-tab-link {
+  margin-bottom: -2px;
+}
+
+/* Tab Sizes */
+.vd-tabs-sm .vd-tab-link {
+  padding: var(--tab-padding-y-sm) var(--tab-padding-x-sm);
+  font-size: var(--font-size-sm);
+}
+
+.vd-tabs-lg .vd-tab-link {
+  padding: var(--tab-padding-y-lg) var(--tab-padding-x-lg);
+  font-size: var(--font-size-lg);
+}
+
+/* Full Width Tabs */
+.vd-tabs-full .vd-tab-list {
+  width: 100%;
+}
+
+.vd-tabs-full .vd-tab-item {
+  flex: 1;
+}
+
+.vd-tabs-full .vd-tab-link {
+  width: 100%;
+  justify-content: center;
+}
+
+/* Centered Tabs */
+.vd-tabs-center .vd-tab-list {
+  justify-content: center;
+}
+
+/* Right Aligned Tabs */
+.vd-tabs-end .vd-tab-list {
+  justify-content: flex-end;
+}
+
+/* Vertical Tabs */
+.vd-tabs-vertical {
+  flex-direction: row;
+}
+
+.vd-tabs-vertical .vd-tab-list {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--tab-border);
+  width: auto;
+  flex-shrink: 0;
+}
+
+.vd-tabs-vertical .vd-tab-item {
+  margin-bottom: 0;
+  margin-right: -1px;
+}
+
+.vd-tabs-vertical .vd-tab-link {
+  border-bottom: none;
+  border-right: var(--tab-border-width) solid transparent;
+  justify-content: flex-start;
+}
+
+.vd-tabs-vertical .vd-tab-link.is-active,
+.vd-tabs-vertical .vd-tab-item.is-active .vd-tab-link {
+  border-bottom-color: transparent;
+  border-right-color: var(--tab-border-active);
+}
+
+.vd-tabs-vertical .vd-tab-content {
+  padding-top: 0;
+  padding-left: 1rem;
+  flex: 1;
+}
+
+/* Tab with Icon */
+.vd-tab-link .icon,
+.vd-tab-link svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* Tab with Badge/Count */
+.vd-tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  background-color: var(--color-gray-200);
+  border-radius: 9999px;
+}
+
+.vd-tab-link.is-active .vd-tab-badge {
+  background-color: var(--color-primary-alpha-20);
+  color: var(--color-primary);
+}
+
+/* Scrollable Tabs (for many tabs) */
+.vd-tabs-scrollable .vd-tab-list {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.vd-tabs-scrollable .vd-tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .vd-tab-link,
+  .vd-tabs-fade .vd-tab-pane {
+    transition: none;
+  }
+}