@a4ui/core 0.24.3 → 0.26.0

package/README.md

@@ -186,17 +186,17 @@ mode switch — a theme recolors underneath either mode.
 **[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
 full list):
 
-| Category       | Representative components                                                                                                                                                                                                                                                       |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`                                                                                                                                                                                     |
-| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`                                                                                                                                                                                              |
-| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `CalendarHeatmap`                                                                                                                                       |
-| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`                                                                                                                                                                                          |
-| Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                            |
-| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`                                                                                                                                                                                         |
-| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                           |
-| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                |
-| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
+| Category       | Representative components                                                                                                                                                                                                                                                                                          |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch`                                                                                                                                                                        |
+| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`                                                                                                                                                                                                                                 |
+| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `CalendarHeatmap`                                                                                                                         |
+| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`                                                                                                                                                                                                            |
+| Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                                               |
+| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail`                                                                                                                                                                        |
+| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                                                              |
+| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                                                   |
+| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `StreamingText`, `PageTransition`, `flyToCart` |
 
 Domain-specific sets ship as **subpath entries** so the base package stays lean —
 e.g. commerce and chart components import from their own paths:

package/dist/elements.css

@@ -1355,6 +1355,9 @@ video {
     max-width: 1536px;
   }
 }
+.pressed {
+  box-shadow: inset 0 1px 2px hsl(var(--shadow) / 0.18);
+}
 .card {
   position: relative;
   background: hsl(var(--card) / 0.55);
@@ -1561,6 +1564,9 @@ html.calm .tile-glass {
 .left-0 {
   left: 0px;
 }
+.left-1\/2 {
+  left: 50%;
+}
 .left-1\/3 {
   left: 33.333333%;
 }
@@ -1609,6 +1615,9 @@ html.calm .tile-glass {
 .top-3\.5 {
   top: 0.875rem;
 }
+.top-4 {
+  top: 1rem;
+}
 .top-\[14vh\] {
   top: 14vh;
 }
@@ -1815,6 +1824,9 @@ html.calm .tile-glass {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[1\.1em\] {
+  height: 1.1em;
+}
 .h-\[12\.5\%\] {
   height: 12.5%;
 }
@@ -1875,12 +1887,18 @@ html.calm .tile-glass {
 .max-h-\[85vh\] {
   max-height: 85vh;
 }
+.min-h-0 {
+  min-height: 0px;
+}
 .min-h-4 {
   min-height: 1rem;
 }
 .min-h-9 {
   min-height: 2.25rem;
 }
+.min-h-\[24px\] {
+  min-height: 24px;
+}
 .min-h-\[80px\] {
   min-height: 80px;
 }
@@ -2013,6 +2031,9 @@ html.calm .tile-glass {
 .min-w-56 {
   min-width: 14rem;
 }
+.min-w-\[1\.1em\] {
+  min-width: 1.1em;
+}
 .min-w-\[1\.5rem\] {
   min-width: 1.5rem;
 }
@@ -2025,6 +2046,9 @@ html.calm .tile-glass {
 .min-w-\[4rem\] {
   min-width: 4rem;
 }
+.min-w-\[6\.5rem\] {
+  min-width: 6.5rem;
+}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -2040,6 +2064,9 @@ html.calm .tile-glass {
 .max-w-7xl {
   max-width: 80rem;
 }
+.max-w-\[12rem\] {
+  max-width: 12rem;
+}
 .max-w-\[520px\] {
   max-width: 520px;
 }
@@ -2109,6 +2136,16 @@ html.calm .tile-glass {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95 {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-\[1\.03\] {
   --tw-scale-x: 1.03;
   --tw-scale-y: 1.03;
@@ -2176,6 +2213,9 @@ html.calm .tile-glass {
 .select-none {
   user-select: none;
 }
+.resize-none {
+  resize: none;
+}
 .resize-y {
   resize: vertical;
 }
@@ -2345,6 +2385,9 @@ html.calm .tile-glass {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -2372,6 +2415,10 @@ html.calm .tile-glass {
 .rounded-xl {
   border-radius: 1rem;
 }
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -2400,6 +2447,9 @@ html.calm .tile-glass {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-b-2 {
+  border-bottom-width: 2px;
+}
 .border-l {
   border-left-width: 1px;
 }
@@ -2435,6 +2485,10 @@ html.calm .tile-glass {
 .border-emerald-500\/30 {
   border-color: rgb(16 185 129 / 0.3);
 }
+.border-foreground {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--foreground) / var(--tw-border-opacity, 1));
+}
 .border-input {
   --tw-border-opacity: 1;
   border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
@@ -2462,6 +2516,9 @@ html.calm .tile-glass {
 .border-sky-500\/30 {
   border-color: rgb(14 165 233 / 0.3);
 }
+.border-transparent {
+  border-color: transparent;
+}
 .bg-accent {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
@@ -2624,6 +2681,9 @@ html.calm .tile-glass {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -2740,6 +2800,9 @@ html.calm .tile-glass {
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2758,9 +2821,15 @@ html.calm .tile-glass {
 .pr-1 {
   padding-right: 0.25rem;
 }
+.pr-1\.5 {
+  padding-right: 0.375rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -2788,6 +2857,9 @@ html.calm .tile-glass {
 .align-middle {
   vertical-align: middle;
 }
+.align-super {
+  vertical-align: super;
+}
 .font-mono {
   font-family: "IBM Plex Mono", ui-monospace, monospace;
 }
@@ -2807,6 +2879,9 @@ html.calm .tile-glass {
   font-size: 3rem;
   line-height: 1;
 }
+.text-\[0\.65rem\] {
+  font-size: 0.65rem;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -2863,6 +2938,9 @@ html.calm .tile-glass {
 .capitalize {
   text-transform: capitalize;
 }
+.italic {
+  font-style: italic;
+}
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
@@ -2870,6 +2948,9 @@ html.calm .tile-glass {
 .leading-none {
   line-height: 1;
 }
+.leading-relaxed {
+  line-height: 1.625;
+}
 .leading-tight {
   line-height: 1.25;
 }
@@ -2940,6 +3021,9 @@ html.calm .tile-glass {
 .text-muted-foreground\/60 {
   color: hsl(var(--muted-foreground) / 0.6);
 }
+.text-muted-foreground\/70 {
+  color: hsl(var(--muted-foreground) / 0.7);
+}
 .text-primary {
   --tw-text-opacity: 1;
   color: hsl(var(--primary) / var(--tw-text-opacity, 1));
@@ -2972,9 +3056,15 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: rgb(14 165 233 / var(--tw-text-opacity, 1));
 }
+.underline {
+  text-decoration-line: underline;
+}
 .line-through {
   text-decoration-line: line-through;
 }
+.decoration-border {
+  text-decoration-color: hsl(var(--border) / 1);
+}
 .underline-offset-2 {
   text-underline-offset: 2px;
 }
@@ -3130,11 +3220,21 @@ html.calm .tile-glass {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.backdrop-blur-xl {
+  --tw-backdrop-blur: blur(24px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .backdrop-filter {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -3169,11 +3269,21 @@ html.calm .tile-glass {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[opacity\2c transform\] {
+  transition-property: opacity,transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-\[transform\2c opacity\] {
   transition-property: transform,opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[width\] {
+  transition-property: width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3206,6 +3316,9 @@ html.calm .tile-glass {
 .duration-500 {
   transition-duration: 500ms;
 }
+.ease-\[\2026\] {
+  transition-timing-function: …;
+}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3215,6 +3328,9 @@ html.calm .tile-glass {
 .will-change-transform {
   will-change: transform;
 }
+.\[scrollbar-width\:none\] {
+  scrollbar-width: none;
+}
 .placeholder\:text-muted-foreground::placeholder {
   --tw-text-opacity: 1;
   color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -3288,6 +3404,10 @@ html.calm .tile-glass {
 .hover\:bg-accent\/90:hover {
   background-color: hsl(var(--accent) / 0.9);
 }
+.hover\:bg-background:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-muted:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
@@ -3295,9 +3415,15 @@ html.calm .tile-glass {
 .hover\:bg-muted\/40:hover {
   background-color: hsl(var(--muted) / 0.4);
 }
+.hover\:bg-muted\/60:hover {
+  background-color: hsl(var(--muted) / 0.6);
+}
 .hover\:bg-muted\/70:hover {
   background-color: hsl(var(--muted) / 0.7);
 }
+.hover\:bg-primary\/15:hover {
+  background-color: hsl(var(--primary) / 0.15);
+}
 .hover\:bg-primary\/5:hover {
   background-color: hsl(var(--primary) / 0.05);
 }
@@ -3311,6 +3437,10 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
 }
+.hover\:text-primary:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+}
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -3491,6 +3621,10 @@ html.calm .tile-glass {
 }
 @media (prefers-reduced-motion: reduce) {
 
+  .motion-reduce\:animate-none {
+    animation: none;
+  }
+
   .motion-reduce\:transition-none {
     transition-property: none;
   }
@@ -3501,6 +3635,10 @@ html.calm .tile-glass {
     display: block;
   }
 
+  .sm\:max-h-\[28rem\] {
+    max-height: 28rem;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3509,6 +3647,10 @@ html.calm .tile-glass {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-\[16rem_1fr\] {
+    grid-template-columns: 16rem 1fr;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3600,6 +3742,9 @@ html.calm .tile-glass {
 .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
   display: none;
 }
+.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+  display: none;
+}
 .\[\&\[data-expanded\]\>svg\]\:rotate-90[data-expanded]>svg {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));