@rokkit/themes 1.0.0-next.145 → 1.0.0-next.147

package/dist/rokkit.css

@@ -292,6 +292,12 @@
   border-left-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
 }[data-mode="dark"][data-style="rokkit"] [data-toolbar][data-toolbar-position="right"],[data-mode="dark"] [data-style="rokkit"] [data-toolbar][data-toolbar-position="right"]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
 
+/* Compact item spacing for small toolbars */
+[data-style='rokkit'] [data-toolbar][data-toolbar-size='sm'],
+[data-style='rokkit'] [data-toolbar][data-size='sm'] {
+  gap: 1px;
+}
+
 /* =============================================================================
    Toolbar Items
    ============================================================================= */
@@ -370,7 +376,7 @@
 [data-style='rokkit']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-list] {
-  border-right-width:0px;border-left-width:2px;
+  border-top-width:0px;border-right-width:0px;border-left-width:2px;
 }
 
 [data-style='rokkit'] [data-tabs-list]:focus-within {
@@ -389,6 +395,30 @@
   border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0.25rem;border-bottom-right-radius:0.25rem;
 }
 
+[data-style='rokkit'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
+  border-radius:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;
+}
+
+[data-style='rokkit']
+  [data-tabs][data-orientation='vertical']
+  [data-tabs-list]:focus-within
+  [data-tabs-trigger][data-selected] {
+  --un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+[data-style='rokkit']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger] {
+  border-radius:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;
+}
+
+[data-style='rokkit']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-list]:focus-within
+  [data-tabs-trigger][data-selected] {
+  --un-gradient-shape:to left in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
 [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="rokkit"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
@@ -1118,6 +1148,77 @@
   --un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
 }
 
+/**
+ * Dropdown - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Trigger
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-trigger] {
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) {
+  --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-dropdown-trigger]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;
+}
+
+[data-style='rokkit'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
+  --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown][data-open="true"] [data-dropdown-trigger],[data-mode="dark"] [data-style="rokkit"] [data-dropdown][data-open="true"] [data-dropdown-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
+
+[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-icon],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-arrow],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+/* =============================================================================
+   Panel
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-panel] {
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-panel],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-panel]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);}
+
+/* =============================================================================
+   Options
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-option] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-option],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-dropdown-option]:hover:not(:disabled),
+[data-style='rokkit'] [data-dropdown-option]:focus:not(:disabled) {
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"][data-style="rokkit"] [data-dropdown-option]:focus:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option]:focus:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-dropdown-option][data-active='true'] {
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-dropdown-option][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-separator] {
+  --un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
 /**
  * FloatingAction - Rokkit Theme Styles
  *
@@ -1873,3 +1974,228 @@
   --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
 
+* Card - Rokkit Theme Styles
+ *
+ * Rich gradients, elevated shadows, and vibrant surface styling.
+ */
+
+/* =============================================================================
+   Base Card Styles
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card] {
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+}* Card - Rokkit Theme Styles
+ *
+ * Rich gradients, elevated shadows, and vibrant surface styling.
+ */
+
+/* =============================================================================
+   Base Card Styles
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
+
+/* Interactive cards (buttons) */
+[data-style='rokkit'] [data-card][data-card-interactive] {
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+[data-style='rokkit'] [data-card][data-card-interactive]:hover {
+  --un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  transform: translateY(-2px);
+}
+
+[data-style='rokkit'] [data-card][data-card-interactive]:active {
+  --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  transform: translateY(0);
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card-header] {
+  border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-card-header],[data-mode="dark"] [data-style="rokkit"] [data-card-header]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
+
+[data-style='rokkit'] [data-card-body] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [data-card-body]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-card-footer] {
+  border-top-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-card-footer],[data-mode="dark"] [data-style="rokkit"] [data-card-footer]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
+
+/* =============================================================================
+   Focus States
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card][data-card-interactive]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-card][data-card-interactive]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-card][data-card-interactive]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));}
+
+/* =============================================================================
+   Disabled State
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card][data-card-interactive][data-disabled],
+[data-style='rokkit'] [data-card][data-card-interactive]:disabled {
+  cursor:not-allowed;opacity:0.5;
+  transform: none;
+}
+
+/* =============================================================================
+   Variants
+   ============================================================================= */
+
+/* Primary — gradient from primary to secondary */
+[data-style='rokkit'] [data-card][data-variant='primary'] {
+  --un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+}[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
+
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-header],
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-footer] {
+  border-color:rgba(var(--color-primary-400),0.4);
+}[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"] [data-card-header],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"] [data-card-header],[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"] [data-card-footer],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"] [data-card-footer]{border-color:rgba(var(--color-primary-600),0.4);}
+
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
+  @apply text-on-primary/80;
+}
+
+/* Secondary — muted secondary surface */
+[data-style='rokkit'] [data-card][data-variant='secondary'] {
+  --un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+}[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-700),1) var(--un-gradient-to-position);}
+
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-header],
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-footer] {
+  border-color:rgba(var(--color-secondary-400),0.4);
+}[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-header],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-header],[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-footer],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-footer]{border-color:rgba(var(--color-secondary-600),0.4);}
+
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
+  @apply text-on-secondary/80;
+}
+
+/* Tertiary — elevated surface, no color accent */
+[data-style='rokkit'] [data-card][data-variant='tertiary'] {
+  --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+}[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="tertiary"],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="tertiary"]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
+
+/**
+ * Message - Rokkit Theme Styles
+ */
+
+/* Type colors */
+[data-style='rokkit'] [data-message-root][data-type='error'] {
+  --un-border-opacity:1;border-color:rgba(var(--color-error-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-error-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="error"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="error"]{--un-border-opacity:1;border-color:rgba(var(--color-error-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-error-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error-200),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='error'] [data-message-icon] {
+  --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="error"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="error"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='error'] [data-message-dismiss] {
+  --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="error"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="error"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-message-root][data-type='warning'] {
+  --un-border-opacity:1;border-color:rgba(var(--color-warning-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-warning-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-warning-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="warning"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="warning"]{--un-border-opacity:1;border-color:rgba(var(--color-warning-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-warning-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-warning-200),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-icon] {
+  --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-dismiss] {
+  --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-message-root][data-type='info'] {
+  --un-border-opacity:1;border-color:rgba(var(--color-info-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-info-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-info-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="info"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="info"]{--un-border-opacity:1;border-color:rgba(var(--color-info-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-info-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-info-200),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='info'] [data-message-icon] {
+  --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="info"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="info"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='info'] [data-message-dismiss] {
+  --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="info"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="info"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
+
+[data-style='rokkit'] [data-message-root][data-type='success'] {
+  --un-border-opacity:1;border-color:rgba(var(--color-success-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-success-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-success-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="success"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="success"]{--un-border-opacity:1;border-color:rgba(var(--color-success-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-success-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-success-200),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='success'] [data-message-icon] {
+  --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="success"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="success"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-message-root][data-type='success'] [data-message-dismiss] {
+  --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="success"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="success"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
+
+/**
+ * StatusList - Rokkit Theme Styles
+ */
+
+/* ── @rokkit/ui StatusList: icon colors by status (pass/fail/warn/unknown) ── */
+
+[data-style='rokkit'] [data-status-item][data-status='pass'] span {
+  --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="pass"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="pass"] span{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='fail'] span {
+  --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="fail"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="fail"] span{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='warn'] span {
+  --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="warn"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="warn"] span{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='unknown'] span {
+  --un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="unknown"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="unknown"] span{--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));}
+
+/* ── @rokkit/ui StatusList: text color by status ── */
+
+[data-style='rokkit'] [data-status-item][data-status='pass'] {
+  --un-text-opacity:1;color:rgba(var(--color-success-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="pass"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="pass"]{--un-text-opacity:1;color:rgba(var(--color-success-300),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='fail'] {
+  --un-text-opacity:1;color:rgba(var(--color-error-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="fail"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="fail"]{--un-text-opacity:1;color:rgba(var(--color-error-300),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='warn'] {
+  --un-text-opacity:1;color:rgba(var(--color-warning-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="warn"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="warn"]{--un-text-opacity:1;color:rgba(var(--color-warning-300),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='unknown'] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="unknown"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="unknown"]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+/* ── @rokkit/forms StatusList: group headers by severity ── */
+
+[data-style='rokkit'] [data-status-group][data-severity='error'] [data-status-header] {
+  --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="error"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="error"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-group][data-severity='warning'] [data-status-header] {
+  --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="warning"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="warning"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-group][data-severity='info'] [data-status-header] {
+  --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="info"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="info"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-group][data-severity='success'] [data-status-header] {
+  --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="success"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="success"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
+
+/* ── @rokkit/forms StatusList: item colors by severity ── */
+
+[data-style='rokkit'] [data-status-item][data-status='error'] {
+  --un-text-opacity:1;color:rgba(var(--color-error-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="error"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="error"]{--un-text-opacity:1;color:rgba(var(--color-error-300),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='warning'] {
+  --un-text-opacity:1;color:rgba(var(--color-warning-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="warning"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="warning"]{--un-text-opacity:1;color:rgba(var(--color-warning-300),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='info'] {
+  --un-text-opacity:1;color:rgba(var(--color-info-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="info"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="info"]{--un-text-opacity:1;color:rgba(var(--color-info-300),var(--un-text-opacity));}
+[data-style='rokkit'] [data-status-item][data-status='success'] {
+  --un-text-opacity:1;color:rgba(var(--color-success-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="success"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="success"]{--un-text-opacity:1;color:rgba(var(--color-success-300),var(--un-text-opacity));}
+
+/* Count badge */
+[data-style='rokkit'] [data-status-count] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));font-weight:600;
+}[data-mode="dark"][data-style="rokkit"] [data-status-count],[data-mode="dark"] [data-style="rokkit"] [data-status-count]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.145",
+  "version": "1.0.0-next.147",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -21,6 +21,7 @@
     "./minimal.css": "./dist/minimal.css",
     "./material.css": "./dist/material.css",
     "./glass.css": "./dist/glass.css",
+    "./grada-ui.css": "./dist/grada-ui.css",
     "./base": "./src/base/index.css",
     "./base/*": "./src/base/*.css",
     "./rokkit": "./src/rokkit/index.css",
@@ -30,7 +31,9 @@
     "./material": "./src/material/index.css",
     "./material/*": "./src/material/*.css",
     "./glass": "./src/glass/index.css",
-    "./glass/*": "./src/glass/*.css"
+    "./glass/*": "./src/glass/*.css",
+    "./grada-ui": "./src/grada-ui/index.css",
+    "./grada-ui/*": "./src/grada-ui/*.css"
   },
   "files": [
     "src",

package/src/base/alert-list.css

@@ -0,0 +1,91 @@
+/* AlertList — base structural styles for the fixed toast container */
+
+[data-alert-list] {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  max-width: 24rem;
+  width: calc(100% - 2rem);
+  padding: 1rem;
+  pointer-events: none;
+}
+
+/* Each toast wrapper: handles enter animation, spacing, and dismiss collapse */
+[data-alert-list] > * {
+  pointer-events: auto;
+  overflow: hidden;
+  max-height: 12rem;
+  margin-bottom: 0.5rem;
+  transition:
+    max-height 0.25s ease-out,
+    margin-bottom 0.25s ease-out;
+}
+
+/* Collapse height + spacing when dismissing — CSS drives the animation */
+[data-alert-list] > *[data-dismissing] {
+  max-height: 0;
+  margin-bottom: 0;
+}
+
+/* Message enter animation */
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateX(2rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Message exit transition */
+[data-alert-list] > * > [data-message-root] {
+  animation: toast-enter 0.2s ease-out;
+  transition:
+    opacity 0.2s ease-out,
+    transform 0.2s ease-out;
+}
+
+[data-alert-list] > *[data-dismissing] > [data-message-root] {
+  opacity: 0;
+  transform: translateX(2rem);
+}
+
+/* Top positions */
+[data-alert-list][data-position='top-right'] {
+  top: 0;
+  right: 0;
+}
+
+[data-alert-list][data-position='top-center'] {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-alert-list][data-position='top-left'] {
+  top: 0;
+  left: 0;
+}
+
+/* Bottom positions — reverse stack so newest appears at bottom edge */
+[data-alert-list][data-position='bottom-right'] {
+  bottom: 0;
+  right: 0;
+  flex-direction: column-reverse;
+}
+
+[data-alert-list][data-position='bottom-center'] {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+}
+
+[data-alert-list][data-position='bottom-left'] {
+  bottom: 0;
+  left: 0;
+  flex-direction: column-reverse;
+}