@ansiversa/components 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/AvBreadcrumb.astro

@@ -99,9 +99,9 @@ const rootClassAttr = rootClasses.join(" ");
   }
 
   .av-breadcrumb__current {
-    font-weight: 500;
-    color: var(--ans-fg, #111827);
-  }
+  font-weight: 500;
+  color: var(--ans-text, var(--ans-fg, #e5e7eb));
+}
 
   .av-breadcrumb__separator {
     margin-inline: 0.125rem;

package/src/AvPageHeader.astro

@@ -2,10 +2,12 @@
 import AvButton from "./AvButton.astro";
 import AvContainer from "./AvContainer.astro";
 
+type ButtonVariant = "primary" | "ghost" | "outline";
+
 interface Action {
   label: string;
   href: string;
-  variant?: string;
+  variant?: ButtonVariant;
 }
 
 interface Props {
@@ -21,22 +23,26 @@ const { title, description, primaryAction, secondaryAction } = Astro.props as Pr
 <section class="av-page-header">
   <AvContainer className="av-page-header__container">
     <div class="av-page-header__body">
-      <h1 class="av-page-header__title">{title}</h1>
+      <div class="av-page-header__top">
+        <h1 class="av-page-header__title">{title}</h1>
+
+        {(primaryAction || secondaryAction) && (
+          <div class="av-page-header__actions">
+            {primaryAction && (
+              <AvButton href={primaryAction.href} variant={primaryAction.variant ?? "primary"}>
+                {primaryAction.label}
+              </AvButton>
+            )}
+            {secondaryAction && (
+              <AvButton href={secondaryAction.href} variant={secondaryAction.variant ?? "ghost"}>
+                {secondaryAction.label}
+              </AvButton>
+            )}
+          </div>
+        )}
+      </div>
+
       {description && <p class="av-page-header__description">{description}</p>}
-      {(primaryAction || secondaryAction) && (
-        <div class="av-page-header__actions">
-          {primaryAction && (
-            <AvButton href={primaryAction.href} variant={primaryAction.variant ?? "primary"}>
-              {primaryAction.label}
-            </AvButton>
-          )}
-          {secondaryAction && (
-            <AvButton href={secondaryAction.href} variant={secondaryAction.variant ?? "ghost"}>
-              {secondaryAction.label}
-            </AvButton>
-          )}
-        </div>
-      )}
     </div>
   </AvContainer>
 </section>

package/src/styles/global.css

@@ -1003,6 +1003,11 @@
     @apply whitespace-nowrap;
   }
 
+  .av-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
   /* --- USER AVATAR BUTTON --- */
 .av-user-avatar-button {
   position: relative;
@@ -1056,6 +1061,45 @@
   pointer-events: none;
 }
 
+/* AvPageHeader */
+.av-page-header__top {
+  display: flex;
+  flex-direction: column;   /* mobile: stacked */
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.av-page-header__actions {
+  display: flex;
+  flex-direction: column;   /* mobile: buttons one-per-row */
+  gap: 0.5rem;
+  width: 100%;              /* mobile: full width so buttons align nicely */
+}
+
+.av-page-header__actions .av-btn {
+  width: 100%;              /* mobile: full-width buttons */
+}
+
+/* Desktop */
+@media (min-width: 640px) {
+  .av-page-header__top {
+    flex-direction: row;    /* desktop: title left, actions right */
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .av-page-header__actions {
+    flex-direction: row;    /* desktop: inline actions */
+    width: auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .av-page-header__actions .av-btn {
+    width: auto;
+  }
+}
+
 /* Hover state */
 .av-user-avatar-button:hover::before {
   opacity: 1;
@@ -1107,6 +1151,42 @@
   stroke-width: 1.75;
 }
 
+/* Grid utility */
+.av-card-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+/* Status pill utility */
+.av-status-pill {
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.15);
+  color: var(--av-fg, #e2e8f0);
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+.av-status-pill--primary {
+  background: rgba(34, 211, 238, 0.18);
+  color: var(--av-fg, #e2e8f0);
+}
+
+/* Loading bar utility */
+.av-loading-bar {
+  height: 4px;
+  width: 100%;
+  background: linear-gradient(90deg, #22d3ee, #6366f1);
+  animation: av-shimmer 1.6s linear infinite;
+  margin-bottom: 1rem;
+  background-size: 200% 100%;
+}
+
+@keyframes av-shimmer {
+  0% { background-position: 0 0; }
+  100% { background-position: 200% 0; }
+}
+
 }