@tempots/beatui 0.39.0 → 0.41.0

package/dist/beatui.css

@@ -1241,14 +1241,20 @@ a:focus-visible {
   }
 }
 
-/* Animated Toggle Component */
+/* Animated Toggle Component - Composable Animation System */
 .bc-animated-toggle {
-  transition-property: all;
-  transition-duration: 1s;
-  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  --animation-duration: 1s;
+  --animation-easing: cubic-bezier(0.2, 0, 0, 1);
+  --scale-factor: 0.95;
+  --transform-origin: center;
+
+  transition-property: opacity, transform;
+  transition-duration: var(--animation-duration);
+  transition-timing-function: var(--animation-easing);
+  transform-origin: var(--transform-origin);
 }
 
-/* Status: closed and start-closing - element is hidden */
+/* Status: closed - element is hidden */
 .bc-animated-toggle--closed {
   display: none;
 }
@@ -1261,178 +1267,243 @@ a:focus-visible {
 /* Animation: NONE - no animation, just show/hide */
 .bc-animated-toggle--none {
   transition-property: none;
+  transition-duration: 0s;
 }
 
 /* Animation: FADE */
 .bc-animated-toggle--fade.bc-animated-toggle--closing,
-.bc-animated-toggle--fade.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-opening,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--closing,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--start-opening,
-.bc-animated-toggle--flyout-top.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-top.bc-animated-toggle--start-opening,
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-opening,
-.bc-animated-toggle--flyout-left.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-left.bc-animated-toggle--start-opening,
-.bc-animated-toggle--flyout-right.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-right.bc-animated-toggle--start-opening {
+.bc-animated-toggle--fade.bc-animated-toggle--start-opening {
   opacity: 0;
 }
 
 .bc-animated-toggle--fade.bc-animated-toggle--opening,
-.bc-animated-toggle--fade.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-closing,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--opening,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--start-closing,
-.bc-animated-toggle--flyout-top.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-top.bc-animated-toggle--start-closing,
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-closing,
-.bc-animated-toggle--flyout-left.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-left.bc-animated-toggle--start-closing,
-.bc-animated-toggle--flyout-right.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-right.bc-animated-toggle--start-closing {
+.bc-animated-toggle--fade.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--start-closing {
   opacity: 1;
 }
 
-/* Animation: slide-right */
+/* Animation: SLIDE - individual directions */
 .bc-animated-toggle--slide-right.bc-animated-toggle--closing,
-.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-opening {
+.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
   transform: translateX(-100%);
 }
 
 .bc-animated-toggle--slide-right.bc-animated-toggle--opening,
-.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-closing {
+.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
   transform: translateX(0);
 }
 
-/* Animation: slide-left */
 .bc-animated-toggle--slide-left.bc-animated-toggle--closing,
-.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-opening {
+.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
   transform: translateX(100%);
 }
 
 .bc-animated-toggle--slide-left.bc-animated-toggle--opening,
-.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-closing {
+.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
   transform: translateX(0);
 }
 
-/* Animation: slide-up */
 .bc-animated-toggle--slide-up.bc-animated-toggle--closing,
-.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-opening {
+.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
   transform: translateY(100%);
 }
 
 .bc-animated-toggle--slide-up.bc-animated-toggle--opening,
-.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-closing {
+.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
   transform: translateY(0);
 }
 
-/* Animation: slide-down */
 .bc-animated-toggle--slide-down.bc-animated-toggle--closing,
-.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--closing,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-opening {
+.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
   transform: translateY(-100%);
 }
 
 .bc-animated-toggle--slide-down.bc-animated-toggle--opening,
-.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--opening,
-.bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-closing {
+.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
   transform: translateY(0);
 }
 
-/* Animation: scale */
+/* Animation: SCALE */
 .bc-animated-toggle--scale.bc-animated-toggle--closing,
-.bc-animated-toggle--scale.bc-animated-toggle--start-opening,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--closing,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--start-opening {
-  transform: scale(0.8);
+.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: scale(var(--scale-factor));
 }
 
 .bc-animated-toggle--scale.bc-animated-toggle--opening,
-.bc-animated-toggle--scale.bc-animated-toggle--start-closing,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--opening,
-.bc-animated-toggle--scale-fade.bc-animated-toggle--start-closing {
+.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: scale(1);
+}
+
+/* Composable animations: fade + slide combinations */
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Composable animations: fade + scale */
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
   transform: scale(1);
 }
 
-/* Animation: flyout-top */
-.bc-animated-toggle--flyout-top.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-top.bc-animated-toggle--start-opening {
-  transform: translateY(-1rem) scale(0.95);
+/* Composable animations: slide + scale combinations */
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateX(-100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: translateX(0) scale(1);
+}
+
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateX(100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: translateX(0) scale(1);
+}
+
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateY(100%) scale(var(--scale-factor));
 }
 
-.bc-animated-toggle--flyout-top.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-top.bc-animated-toggle--start-closing {
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
   transform: translateY(0) scale(1);
 }
 
-/* Animation: flyout-bottom */
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-opening {
-  transform: translateY(1rem) scale(0.95);
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateY(-100%) scale(var(--scale-factor));
 }
 
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-closing {
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
   transform: translateY(0) scale(1);
 }
 
-/* Animation: flyout-left */
-.bc-animated-toggle--flyout-left.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-left.bc-animated-toggle--start-opening {
+/* Composable animations: fade + slide + scale (all three) */
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
   opacity: 0;
-  transform: translateX(-1rem) scale(0.95);
+  transform: translateX(-100%) scale(var(--scale-factor));
 }
 
-.bc-animated-toggle--flyout-left.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-left.bc-animated-toggle--start-closing {
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
   opacity: 1;
   transform: translateX(0) scale(1);
 }
 
-/* Animation: flyout-right */
-.bc-animated-toggle--flyout-right.bc-animated-toggle--closing,
-.bc-animated-toggle--flyout-right.bc-animated-toggle--start-opening {
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
   opacity: 0;
-  transform: translateX(1rem) scale(0.95);
+  transform: translateX(100%) scale(var(--scale-factor));
 }
 
-.bc-animated-toggle--flyout-right.bc-animated-toggle--opening,
-.bc-animated-toggle--flyout-right.bc-animated-toggle--start-closing {
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
   opacity: 1;
   transform: translateX(0) scale(1);
 }
 
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(-100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
 /* Accessibility: Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .bc-animated-toggle {
@@ -2282,9 +2353,9 @@ a:focus-visible {
   height: var(--collapse-height);
 }
 
-/* Color Input Component (SVG blob preview overlaying native input) */
+/* Color Swatch Input Component (SVG blob preview overlaying native input) */
 
-.bc-color-input__control {
+.bc-color-swatch-input__control {
   position: relative;
   display: inline-block;
   border-radius: var(--radius-control, var(--radius-md));
@@ -2293,7 +2364,12 @@ a:focus-visible {
   border: 1px solid var(--color-neutral-300);
 }
 
-.bc-color-input__control--alpha {
+.bc-input-container .bc-color-input__swatch {
+  width: 2.2rem;
+  cursor: pointer;
+}
+
+.bc-color-swatch-input__control--alpha {
   /* subtle checkerboard background to visualize transparency */
   background-image:
     linear-gradient(
@@ -2324,12 +2400,12 @@ a:focus-visible {
     -5px 0px;
 }
 
-.bc-color-input__control:focus-within {
+.bc-color-swatch-input__control:focus-within {
   outline: 2px solid var(--interactive-focus-light);
   outline-offset: 2px;
 }
 
-.bc-color-input__svg {
+.bc-color-swatch-input__svg {
   display: block;
   width: 100%;
   height: 100%;
@@ -2339,11 +2415,11 @@ a:focus-visible {
   );
 }
 
-.bc-input-container--error .bc-color-input__control:focus-within {
+.bc-input-container--error .bc-color-swatch-input__control:focus-within {
   outline: 2px solid var(--color-danger-600);
 }
 
-.bc-color-input__native {
+.bc-color-swatch-input__native {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -2358,32 +2434,34 @@ a:focus-visible {
   cursor: pointer;
 }
 
-.bc-color-input__native:disabled {
+.bc-color-swatch-input__native:disabled {
   cursor: not-allowed;
 }
 
-.bc-color-input__rgb {
+.bc-color-swatch-input__rgb {
   font-size: var(--font-size-sm);
   color: var(--color-gray-700);
 }
 
-.bc-color-input__alpha {
+.bc-color-swatch-input__alpha {
   width: 5rem;
   margin-inline-start: calc(var(--spacing-base) * 2);
 }
 
 /* Dark mode */
-.b-dark .bc-color-input__control:focus-within {
+.b-dark .bc-color-swatch-input__control:focus-within {
   outline: 2px solid var(--interactive-focus-dark);
 }
 
-.b-dark .bc-input-container--error .bc-color-input__control:focus-within {
+.b-dark
+  .bc-input-container--error
+  .bc-color-swatch-input__control:focus-within {
   outline: 2px solid var(--color-danger-400);
 }
 
 /* Responsive styles */
 @media (width >=var(--breakpoint-sm)) {
-  .bc-color-input__control {
+  .bc-color-swatch-input__control {
     width: 2.75rem;
     height: 2.25rem;
   }
@@ -2451,7 +2529,7 @@ a:focus-visible {
   border-radius: var(--radius-popover, var(--radius-md));
   box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: 0;
-  z-index: var(--z-index-popover);
+  z-index: var(--z-index-navigation);
   min-width: 12rem;
   max-height: 20rem;
   overflow-y: auto;
@@ -2703,7 +2781,7 @@ a:focus-visible {
 }
 
 .bc-control--text-size-md {
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-md);
 }
 
 .bc-control--text-size-lg {
@@ -3642,6 +3720,10 @@ a:focus-visible {
   display: block;
 }
 
+.bc-flyout-container {
+  z-index: var(--z-index-popover);
+}
+
 .bc-flyout {
   /* Base flyout styles */
   background-color: var(--color-neutral-50);
@@ -3649,7 +3731,6 @@ a:focus-visible {
   border-radius: var(--radius-popover, var(--radius-md));
   box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: var(--spacing-sm);
-  z-index: var(--z-index-popover);
 }
 
 /* Transform origins for placement-aware animations */
@@ -3819,8 +3900,6 @@ a:focus-visible {
 
 .bc-input-container {
   width: 100%;
-  /* Horizontal padding only; vertical padding comes from size classes */
-  padding-inline: calc(var(--spacing-base) * 4);
   /* Add a transparent border to match button height math */
   border: 1.5px solid transparent;
   border-radius: var(--radius-control, var(--radius-md));
@@ -3829,6 +3908,7 @@ a:focus-visible {
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  align-items: stretch;
 }
 
 /* Default state */
@@ -3867,7 +3947,7 @@ a:focus-visible {
 
 /* Focus within state */
 .bc-input-container:focus-within {
-  z-index: 10;
+  z-index: var(--z-index-navigation);
   outline: 2px solid var(--interactive-focus-light);
   outline-offset: -2px;
 }
@@ -3888,8 +3968,7 @@ a:focus-visible {
 .bc-input-container__after {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  z-index: 10;
+  z-index: var(--z-index-navigation);
 }
 
 /* Input wrapper */
@@ -3898,6 +3977,8 @@ a:focus-visible {
   flex-direction: row;
   align-items: center;
   overflow: hidden;
+  /* Horizontal padding only; vertical padding comes from size classes */
+  padding-inline: calc(var(--spacing-base) * 4);
 }
 
 .bc-input-container__input--grow {
@@ -3929,13 +4010,14 @@ a:focus-visible {
   font-size: var(--font-size-sm);
   fill: var(--color-gray-400);
   border-radius: var(--radius-full);
-  padding: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
   background: transparent;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  /* aspect-ratio: 1 / 1; */
 }
 
 .bc-input-container__password-toggle:hover {
@@ -3978,6 +4060,13 @@ a:focus-visible {
   flex-grow: 1;
 }
 
+.bc-input-container__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
 /* Dark mode styles */
 .b-dark .bc-input-container--default {
   background-color: var(--bg-surface-dark);
@@ -5522,11 +5611,9 @@ a:focus-visible {
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-}
 
-.bc-number-input-steppers-button .bc-icon {
-  width: 0.6rem;
-  height: 0.6rem;
+  width: 1rem;
+  height: 50%;
 }
 
 .bc-number-input-steppers-button:hover {