@vifui/styles 0.4.0-alpha.6 → 0.6.0-alpha.8

package/README.md

@@ -23,17 +23,17 @@ npm install @vifui/styles
 
 ```js
 // In your main.js or main entry file
-import '@vifui/styles'
+import "@vifui/styles";
 ```
 
 ### Import Specific Components
 
 ```js
 // Import only what you need for better tree-shaking
-import '@vifui/styles/base'
-import '@vifui/styles/components/button'
-import '@vifui/styles/components/card'
-import '@vifui/styles/themes/default'
+import "@vifui/styles/base";
+import "@vifui/styles/components/button";
+import "@vifui/styles/components/card";
+import "@vifui/styles/themes/default";
 ```
 
 ## Structure
@@ -66,10 +66,10 @@ import '@vifui/styles/themes/default'
 
 ```css
 /* Primary palette (Vuesax authentic) */
---vuesax-primary: oklch(0.61 0.2 263.6);    /* Blue */
---vuesax-success: oklch(0.77 0.2 145.5);    /* Green */
---vuesax-warning: oklch(0.82 0.18 83.7);    /* Yellow */
---vuesax-danger: oklch(0.62 0.22 10);       /* Red */
+--vuesax-primary: oklch(0.61 0.2 263.6); /* Blue */
+--vuesax-success: oklch(0.77 0.2 145.5); /* Green */
+--vuesax-warning: oklch(0.82 0.18 83.7); /* Yellow */
+--vuesax-danger: oklch(0.62 0.22 10); /* Red */
 
 /* Semantic tokens */
 --primary: var(--vuesax-primary);
@@ -101,9 +101,12 @@ import '@vifui/styles/themes/default'
 ```css
 --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
---shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
---shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
---shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+--shadow-md:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+--shadow-lg:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+--shadow-xl:
+  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 ```
 
 ### Transitions
@@ -150,15 +153,15 @@ Dark mode is automatically supported. The theme switches based on:
 
 ```css
 /* In your global CSS file */
-@import '@vifui/styles';
+@import "@vifui/styles";
 
 :root {
   /* Customize primary color */
   --primary: oklch(0.7 0.25 270);
-  
+
   /* Customize radius */
   --radius: 0.5rem;
-  
+
   /* Customize transitions */
   --transition-base: 300ms;
 }
@@ -168,8 +171,8 @@ Dark mode is automatically supported. The theme switches based on:
 
 ```css
 /* custom-theme.css */
-@import '@vifui/styles/base';
-@import '@vifui/styles/utilities';
+@import "@vifui/styles/base";
+@import "@vifui/styles/utilities";
 
 :root {
   /* Your custom colors */
@@ -179,8 +182,8 @@ Dark mode is automatically supported. The theme switches based on:
 }
 
 /* Import only needed components */
-@import '@vifui/styles/components/button';
-@import '@vifui/styles/components/card';
+@import "@vifui/styles/components/button";
+@import "@vifui/styles/components/card";
 ```
 
 ## Tailwind CSS Integration
@@ -190,12 +193,9 @@ This package requires Tailwind CSS 4.0+. Make sure your project is configured:
 ```js
 // tailwind.config.js
 export default {
-  content: [
-    './index.html',
-    './src/**/*.{vue,js,ts,jsx,tsx}',
-  ],
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   // VifUI uses theme colors automatically
-}
+};
 ```
 
 ## Browser Support
@@ -206,6 +206,7 @@ export default {
 - Edge (latest)
 
 Modern CSS features used:
+
 - CSS Variables
 - `oklch()` color space
 - CSS Grid

package/components/accordion.css

@@ -22,13 +22,14 @@
 .vif-accordion__item {
   @apply relative;
   border: 0;
+  border-radius: 50px;
 }
 
 /* Divider between items */
 .vif-accordion__item::after {
   content: "";
   @apply absolute inset-x-0 bottom-0 h-px;
-  border-bottom: 1px solid var(--divider);
+  background: var(--divider);
 }
 
 /* Remove divider from last item */
@@ -54,23 +55,32 @@
   @apply px-4 py-4;
   @apply text-left text-sm font-medium;
 
-  /* Cursor */
+  color: var(--foreground);
+  background: transparent;
+
   cursor: var(--cursor-interactive);
 
-  /* Transitions - smooth like Vuesax */
   transition:
     background-color 150ms var(--ease-smooth),
     opacity 150ms var(--ease-smooth);
 
-  /* Hover state - only when closed */
   &:hover:not([data-state="open"]) {
-    background: color-mix(in srgb, var(--foreground) 2%, transparent);
+    background: var(--default-accordion-hover);
     border-radius: var(--radius);
   }
 
+  &:active {
+    background: transparent !important;
+  }
+
+  /* Open state */
+  &[data-state="open"] {
+    background: transparent;
+  }
+
   /* Focus state */
   &:focus-visible {
-    outline: 1px solid var(--focus);
+    outline: 2px solid var(--focus);
     outline-offset: -2px;
   }
 
@@ -128,7 +138,7 @@
 .vif-accordion__body {
   @apply px-4 pb-4 pt-0;
   @apply text-sm;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 
 /* ============================================ */
@@ -137,7 +147,8 @@
 
 .vif-accordion--bordered {
   .vif-accordion__item {
-    @apply border border-default rounded-lg mb-2;
+    @apply rounded-lg mb-2;
+    border: 1px solid var(--border);
 
     &::after {
       content: none;
@@ -152,7 +163,7 @@
 .vif-accordion--shadow {
   .vif-accordion__item {
     @apply rounded-lg mb-2;
-    box-shadow: 0 2px 8px 0
+    box-shadow: 0 2px 3px 0
       color-mix(in srgb, var(--foreground) 8%, transparent);
 
     &::after {
@@ -167,7 +178,8 @@
 
 .vif-accordion--flat {
   .vif-accordion__item {
-    @apply bg-default rounded-lg mb-2;
+    @apply rounded-lg mb-2;
+    background: var(--default);
 
     &::after {
       content: none;

package/components/alert.css

@@ -16,7 +16,7 @@
 /* Close */
 /* ============================================ */
 .vif-alert__close {
-  @apply absolute right-4 top-4 hover:bg-none! p-0 h-min;
+  @apply absolute right-4 top-4 hover:bg-none! p-1 h-min;
 }
 
 /* ============================================ */
@@ -211,3 +211,82 @@
   opacity: 1;
   transform: translateY(0);
 }
+
+/* ============================================ */
+/* Close Button Styles */
+/* ============================================ */
+
+/* Primary/Solid variants - light close button on dark bg */
+.vif-alert-brand-primary .vif-alert__close,
+.vif-alert-success-primary .vif-alert__close,
+.vif-alert-danger-primary .vif-alert__close,
+.vif-alert-neutral-primary .vif-alert__close {
+  @apply text-current opacity-70 hover:opacity-100 hover:bg-white/10;
+}
+
+.vif-alert-warning-primary .vif-alert__close {
+  @apply text-current opacity-70 hover:opacity-100 hover:bg-black/10;
+}
+
+/* Soft variants - colored close button on light bg */
+.vif-alert-brand-soft .vif-alert__close {
+  @apply hover:bg-primary/10;
+}
+
+.vif-alert-success-soft .vif-alert__close {
+  @apply hover:bg-success/10;
+}
+
+.vif-alert-warning-soft .vif-alert__close {
+  @apply hover:bg-warning/10;
+}
+
+.vif-alert-danger-soft .vif-alert__close {
+  @apply hover:bg-danger/10;
+}
+
+.vif-alert-neutral-soft .vif-alert__close {
+  @apply hover:bg-default/20;
+}
+
+/* Secondary variants - colored with ring */
+.vif-alert-brand-secondary .vif-alert__close {
+  @apply hover:bg-primary/10;
+}
+
+.vif-alert-success-secondary .vif-alert__close {
+  @apply hover:bg-success/10;
+}
+
+.vif-alert-warning-secondary .vif-alert__close {
+  @apply hover:bg-warning/10;
+}
+
+.vif-alert-danger-secondary .vif-alert__close {
+  @apply hover:bg-danger/10;
+}
+
+.vif-alert-neutral-secondary .vif-alert__close {
+  @apply hover:bg-default/20;
+}
+
+/* Outline variants - colored close button */
+.vif-alert-brand-outline .vif-alert__close {
+  @apply hover:bg-primary/10;
+}
+
+.vif-alert-success-outline .vif-alert__close {
+  @apply hover:bg-success/10;
+}
+
+.vif-alert-warning-outline .vif-alert__close {
+  @apply hover:bg-warning/10;
+}
+
+.vif-alert-danger-outline .vif-alert__close {
+  @apply hover:bg-danger/10;
+}
+
+.vif-alert-neutral-outline .vif-alert__close {
+  @apply hover:bg-default/20;
+}

package/components/avatar.css

@@ -137,4 +137,4 @@
 
 .vif-avatar-group > .vif-avatar:not(:first-child):hover {
   @apply -translate-x-1;
-}
+}

package/components/button.css

@@ -19,6 +19,12 @@
   @apply h-10 px-4;
   @apply text-sm font-medium;
 
+  /* fixes --tw-leading variable not defined */
+  @apply leading-0;
+
+  /* fixes button being squashed up when the screen size is at its smallest */
+  @apply min-w-max;
+
   /* Borders */
   border-radius: var(--radius);
   border: 0;

package/components/index.css

@@ -6,5 +6,8 @@
 @import "./card.css";
 @import "./checkbox.css";
 @import "./divider.css";
+@import "./list.css";
 @import "./spinner.css";
 @import "./alert.css";
+@import "./tooltip.css";
+@import "./tabs.css";

package/components/list.css

@@ -0,0 +1,304 @@
+/**
+ * List Component
+ *
+ * Architecture inspired by Vuesax v3 (MIT License)
+ * Built with modern Tailwind CSS and CSS variables
+ */
+
+/* ============================================ */
+/* Base List */
+/* ============================================ */
+
+.vif-list {
+  @apply relative w-full;
+  padding: 5px;
+}
+
+/* ============================================ */
+/* List Header */
+/* ============================================ */
+
+.vif-list__header {
+  @apply flex items-center justify-start;
+  @apply font-semibold;
+  padding: 8px 0;
+  margin-bottom: 5px;
+  box-shadow: 0px 7px 7px -5px rgba(0, 0, 0, 0.08);
+  color: var(--foreground);
+}
+
+/* Dark mode shadow */
+.dark .vif-list__header {
+  box-shadow: 0px 7px 7px -5px rgba(0, 0, 0, 0.3);
+}
+
+/* Header color variants */
+.vif-list__header--brand {
+  color: var(--primary);
+}
+
+.vif-list__header--success {
+  color: var(--success);
+}
+
+.vif-list__header--warning {
+  color: var(--warning);
+}
+
+.vif-list__header--danger {
+  color: var(--danger);
+}
+
+.vif-list__header--neutral {
+  color: var(--muted-foreground);
+}
+
+/* ============================================ */
+/* List Item */
+/* ============================================ */
+
+.vif-list__item {
+  @apply flex items-center justify-start;
+  padding: 5px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  transition: background-color 150ms var(--ease-smooth);
+}
+
+/* Dark mode border */
+.dark .vif-list__item {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* Remove border from last item */
+.vif-list__item:last-child {
+  border-bottom: none;
+}
+
+/* Hoverable items */
+.vif-list__item--hoverable {
+  cursor: var(--cursor-interactive);
+}
+
+.vif-list__item--hoverable:hover {
+  background: var(--default);
+  border-radius: var(--radius);
+}
+
+/* Active/Selected item */
+.vif-list__item--active {
+  background: var(--default);
+  border-radius: var(--radius);
+}
+
+/* Interactive button items */
+.vif-list__item[role="listitem"]:is(button) {
+  @apply w-full text-left;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  outline: none;
+}
+
+/* Keyboard focus */
+.vif-list__item:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: -2px;
+  border-radius: var(--radius);
+}
+
+/* Disabled state */
+.vif-list__item[aria-disabled="true"],
+.vif-list__item:disabled {
+  opacity: var(--disabled-opacity);
+  cursor: var(--cursor-disabled);
+  pointer-events: none;
+}
+
+/* ============================================ */
+/* List Icon */
+/* ============================================ */
+
+.vif-list__icon {
+  @apply flex items-center justify-center;
+  @apply shrink-0;
+  padding: 6px;
+
+  /* Icon sizing */
+  & > * {
+    @apply size-5;
+  }
+}
+
+/* ============================================ */
+/* List Avatar */
+/* ============================================ */
+
+.vif-list__avatar {
+  @apply flex items-center justify-center;
+  @apply shrink-0;
+  margin-right: 12px;
+}
+
+/* ============================================ */
+/* List Content */
+/* ============================================ */
+
+.vif-list__content {
+  @apply flex flex-1 flex-col;
+  @apply min-w-0; /* Allow text truncation */
+}
+
+/* ============================================ */
+/* List Title */
+/* ============================================ */
+
+.vif-list__title {
+  @apply font-semibold;
+  @apply text-sm;
+  color: var(--foreground);
+}
+
+/* ============================================ */
+/* List Subtitle */
+/* ============================================ */
+
+.vif-list__subtitle {
+  @apply text-xs;
+  color: var(--muted-foreground);
+  margin-top: 2px;
+}
+
+/* ============================================ */
+/* List Slot (End Content) */
+/* ============================================ */
+
+.vif-list__slot {
+  @apply ml-auto flex items-center;
+  @apply shrink-0;
+}
+
+/* ============================================ */
+/* Variant: Bordered */
+/* ============================================ */
+
+.vif-list--outline {
+  @apply rounded-lg;
+  border: 1px solid var(--border);
+  padding: 8px;
+}
+
+.vif-list--outline .vif-list__item {
+  border-bottom: none;
+  margin-bottom: 4px;
+  padding: 8px;
+  border-radius: var(--radius);
+}
+
+.vif-list--outline .vif-list__item:last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================ */
+/* Variant: Shadow */
+/* ============================================ */
+
+.vif-list--shadow {
+  @apply rounded-lg;
+  box-shadow: var(--shadow-md);
+  background: var(--surface);
+  padding: 8px;
+}
+
+.vif-list--shadow .vif-list__item {
+  border-bottom: none;
+  margin-bottom: 4px;
+  padding: 8px;
+  border-radius: var(--radius);
+}
+
+.vif-list--shadow .vif-list__item:last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================ */
+/* Variant: Flat */
+/* ============================================ */
+
+.vif-list--flat {
+  @apply rounded-lg;
+  background: var(--default-accordion-hover);
+  padding: 8px;
+}
+
+.vif-list--flat .vif-list__item {
+  border-bottom: none;
+  margin-bottom: 4px;
+  padding: 8px;
+  border-radius: var(--radius);
+}
+
+.vif-list--flat .vif-list__item:last-child {
+  margin-bottom: 0;
+}
+
+.vif-list--flat .vif-list__item--hoverable:hover {
+  background: var(--default-hover);
+}
+
+/* ============================================ */
+/* Size Variants */
+/* ============================================ */
+
+.vif-list--sm {
+  padding: 4px;
+}
+
+.vif-list--sm .vif-list__item {
+  padding: 4px;
+}
+
+.vif-list--sm .vif-list__title {
+  @apply text-xs;
+}
+
+.vif-list--sm .vif-list__subtitle {
+  @apply text-[10px];
+}
+
+.vif-list--sm .vif-list__icon > * {
+  @apply size-4;
+}
+
+.vif-list--lg {
+  padding: 8px;
+}
+
+.vif-list--lg .vif-list__item {
+  padding: 12px;
+}
+
+.vif-list--lg .vif-list__title {
+  @apply text-base;
+}
+
+.vif-list--lg .vif-list__subtitle {
+  @apply text-sm;
+}
+
+.vif-list--lg .vif-list__icon > * {
+  @apply size-6;
+}
+
+/* ============================================ */
+/* Divider Variant */
+/* ============================================ */
+
+.vif-list--divided .vif-list__item {
+  border-bottom: 1px solid var(--divider);
+  padding: 12px 5px;
+}
+
+.vif-list--divided .vif-list__item:last-child {
+  border-bottom: none;
+}

package/components/tabs.css

@@ -0,0 +1,212 @@
+/**
+ * Tab Component - Tailwind v4 + Modern CSS
+ */
+
+/* ROOT */
+.vif-tabs__root {
+  @apply w-full overflow-hidden relative flex;
+}
+
+/* ROOT ORIENTATION*/
+.vif-tabs__root[data-orientation="vertical"] {
+  @apply flex-row;
+
+  .vif-tabs__indicator {
+    @apply h-(--reka-tabs-indicator-size) left-0 w-0.5 translate-y-(--reka-tabs-indicator-position) translate-x-0.5;
+  }
+
+  .vif-tabs__list {
+    @apply flex flex-col;
+  }
+
+  .vif-tabs__list::after {
+    @apply w-0.5 left-0 translate-x-0.5 h-full;
+  }
+
+  /* Vertical Pill Indicator - confined to trigger */
+  .vif-tabs__indicator:has(~ .vif-tabs__trigger[data-variant="pill"]) {
+    @apply inset-0 w-auto h-(--reka-tabs-indicator-size);
+    @apply translate-y-(--reka-tabs-indicator-position) translate-x-0;
+    @apply mx-1 my-0;
+  }
+
+  .vif-tabs__trigger {
+    @apply min-w-full;
+  }
+}
+
+.vif-tabs__root[data-orientation="horizontal"] {
+  @apply flex-col;
+
+  .vif-tabs__indicator {
+    @apply w-(--reka-tabs-indicator-size) bottom-0 h-0.5 translate-x-(--reka-tabs-indicator-position) translate-y-0.5;
+  }
+
+  .vif-tabs__list::after {
+    @apply w-full bottom-0 translate-y-0.5 h-0.5;
+  }
+
+  /* Horizontal Pill Indicator - confined to trigger */
+  .vif-tabs__indicator:has(~ .vif-tabs__trigger[data-variant="pill"]) {
+    @apply inset-0 w-(--reka-tabs-indicator-size) h-auto;
+    @apply translate-x-(--reka-tabs-indicator-position) translate-y-0;
+    @apply mx-0 my-1;
+  }
+}
+
+/* LIST */
+.vif-tabs__list {
+  @apply relative shrink-0 flex;
+}
+
+.vif-tabs__list::after {
+  @apply absolute content-[''] z-[-1] bg-(--divider) rounded-full;
+}
+
+/* LIST - Pill Variant */
+.vif-tabs__list:has(.vif-tabs__trigger[data-variant="pill"]) {
+  @apply after:hidden gap-1 p-1 bg-(--muted)/10 rounded-lg;
+}
+
+/* INDICATOR - Base */
+.vif-tabs__indicator {
+  @apply absolute transition-all z-0;
+}
+
+/* INDICATOR - Link variant keeps rounded-full */
+.vif-tabs__indicator:not(:has(~ .vif-tabs__trigger[data-variant="pill"])) {
+  @apply rounded-full;
+}
+
+/* INDICATOR - Pill Variant (acts as background) - matches trigger radius */
+.vif-tabs__indicator:has(~ .vif-tabs__trigger[data-variant="pill"]) {
+  @apply bg-(--background) rounded-md;
+}
+
+/* INDICATOR - Color Variants for Link */
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger[data-variant="link"][data-color="brand"][data-state="active"]:not(
+      [data-disabled]
+    )
+),
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger:not(
+      [data-variant]
+    )[data-color="brand"][data-state="active"]:not([data-disabled])
+) {
+  @apply bg-(--primary);
+}
+
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger[data-variant="link"][data-color="danger"][data-state="active"]:not(
+      [data-disabled]
+    )
+),
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger:not(
+      [data-variant]
+    )[data-color="danger"][data-state="active"]:not([data-disabled])
+) {
+  @apply bg-(--danger);
+}
+
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger[data-variant="link"][data-color="success"][data-state="active"]:not(
+      [data-disabled]
+    )
+),
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger:not(
+      [data-variant]
+    )[data-color="success"][data-state="active"]:not([data-disabled])
+) {
+  @apply bg-(--success);
+}
+
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger[data-variant="link"][data-color="neutral"][data-state="active"]:not(
+      [data-disabled]
+    )
+),
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger:not(
+      [data-variant]
+    )[data-color="neutral"][data-state="active"]:not([data-disabled])
+) {
+  @apply bg-(--foreground);
+}
+
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger[data-variant="link"][data-color="warning"][data-state="active"]:not(
+      [data-disabled]
+    )
+),
+.vif-tabs__indicator:has(
+  ~ .vif-tabs__trigger:not(
+      [data-variant]
+    )[data-color="warning"][data-state="active"]:not([data-disabled])
+) {
+  @apply bg-(--warning);
+}
+
+/* TRIGGER - Base Styles */
+.vif-tabs__trigger {
+  @apply relative p-2.5 gap-2 cursor-(--cursor-interactive) flex items-center text-sm leading-none flex-1;
+  @apply data-[state=inactive]:not-data-disabled:text-(--muted-foreground);
+  @apply data-disabled:cursor-(--cursor-disabled) data-disabled:text-(--muted);
+  @apply data-[orientation=vertical]:justify-start;
+  @apply data-[orientation=horizontal]:justify-center;
+}
+
+/* TRIGGER - Link Variant Colors */
+.vif-tabs__trigger[data-variant="link"],
+.vif-tabs__trigger:not([data-variant]) {
+  @apply data-[color=brand]:data-[state=active]:not-data-disabled:text-(--primary);
+  @apply data-[color=warning]:data-[state=active]:not-data-disabled:text-(--warning);
+  @apply data-[color=neutral]:data-[state=active]:not-data-disabled:text-(--foreground);
+  @apply data-[color=success]:data-[state=active]:not-data-disabled:text-(--success);
+  @apply data-[color=danger]:data-[state=active]:not-data-disabled:text-(--danger);
+}
+
+/* TRIGGER - Pill Variant */
+.vif-tabs__trigger[data-variant="pill"] {
+  @apply rounded-md transition-all z-10;
+  @apply data-[state=inactive]:not-data-disabled:hover:bg-(--muted)/5;
+  @apply data-[state=inactive]:not-data-disabled:hover:text-(--foreground);
+}
+
+/* TRIGGER - Pill Variant Active States (text color only, bg handled by indicator) */
+.vif-tabs__trigger[data-variant="pill"][data-color="brand"][data-state="active"]:not(
+    [data-disabled]
+  ) {
+  @apply text-(--primary);
+}
+
+.vif-tabs__trigger[data-variant="pill"][data-color="warning"][data-state="active"]:not(
+    [data-disabled]
+  ) {
+  @apply text-(--warning);
+}
+
+.vif-tabs__trigger[data-variant="pill"][data-color="neutral"][data-state="active"]:not(
+    [data-disabled]
+  ) {
+  @apply text-(--foreground);
+}
+
+.vif-tabs__trigger[data-variant="pill"][data-color="success"][data-state="active"]:not(
+    [data-disabled]
+  ) {
+  @apply text-(--success);
+}
+
+.vif-tabs__trigger[data-variant="pill"][data-color="danger"][data-state="active"]:not(
+    [data-disabled]
+  ) {
+  @apply text-(--danger);
+}
+
+/* CONTENT */
+.vif-tabs__content {
+  @apply relative w-full block p-2.5 flex-1;
+}

package/components/tooltip.css

@@ -0,0 +1,32 @@
+/**
+ * Tooltip component styles
+ *
+ * Architecture inspired by Vuesax v3 (MIT License)
+ * Built with modern Tailwind CSS and CSS variables
+ */
+
+/* TRIGGER */
+.vif-tooltip__trigger {
+  @apply relative;
+}
+
+/* CONTENT */
+.vif-tooltip__content {
+  @apply select-none leading-none will-change-[transform,opacity];
+  @apply shadow-sm rounded-sm ring ring-default pointer-events-auto;
+  @apply bg-default px-2.5 py-1 text-xs origin-(--reka-tooltip-content-transform-origin);
+}
+
+/* CONTENT ANIMATIONS */
+.vif-tooltip__content[data-state="delayed-open"] {
+  animation: vif-scale-in var(--transition-base) var(--ease-out);
+}
+
+.vif-tooltip__content[data-state="closed"] {
+  animation: vif-scale-out var(--transition-base) var(--ease-in);
+}
+
+/* ARROW */
+.vif-tooltip__arrow {
+  @apply fill-default;
+}

package/index.css

@@ -21,4 +21,3 @@
 
 /* Component styles */
 @import "./components/index.css" layer(components);
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vifui/styles",
-  "version": "0.4.0-alpha.6",
+  "version": "0.6.0-alpha.8",
   "description": "CSS styles and design tokens for VifUI",
   "license": "MIT",
   "type": "module",
@@ -68,6 +68,10 @@
       "default": "./components/divider.css",
       "style": "./components/divider.css"
     },
+    "./components/list": {
+      "default": "./components/list.css",
+      "style": "./components/list.css"
+    },
     "./components/spinner": {
       "default": "./components/spinner.css",
       "style": "./components/spinner.css"

package/themes/default.css

@@ -68,6 +68,7 @@
 
     /* Default/Secondary elements */
     --default: var(--color-neutral-100);
+    --default-accordion-hover: var(--color-neutral-50);
     --default-foreground: var(--eclipse);
     --default-hover: var(--color-neutral-200);
 
@@ -202,6 +203,7 @@
   /* ============================================ */
 
   .dark,
+  .htw-dark,
   [data-theme="dark"] {
     color-scheme: dark;