@tempots/beatui 0.65.0 → 0.66.0

package/dist/beatui.css

@@ -2333,6 +2333,15 @@ a:focus-visible {
   color: var(--text-normal-dark);
 }
 
+/* Error state */
+.bc-input-container--error:has(*.bc-checkbox-input) {
+  outline: none;
+}
+
+.bc-input-container--error:focus-within:has(*.bc-checkbox-input) {
+  outline: none;
+}
+
 .bc-collapse {
   overflow: hidden;
   transition: height
@@ -4333,31 +4342,32 @@ a:focus-visible {
   width: 100%;
 }
 
-/* Horizontal layout variants */
+/* Horizontal layout variants - use grid for proper error positioning */
 .bc-input-wrapper--horizontal,
 .bc-input-wrapper--horizontal-label-right,
 .bc-input-wrapper--horizontal-fixed {
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: center;
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
-}
-
-.bc-input-wrapper--horizontal > *,
-.bc-input-wrapper--horizontal-label-right > *,
-.bc-input-wrapper--horizontal-fixed > * {
-    min-width: min-content;
+  gap: var(--spacing-sm, calc(var(--spacing-base) * 4));
 }
 
 /* Horizontal with label on right */
 .bc-input-wrapper--horizontal-label-right {
-  flex-direction: row-reverse;
+  grid-template-columns: 1fr auto;
+}
+
+.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
+  order: 2;
+}
+
+.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content {
+  order: 1;
 }
 
 /* Horizontal with fixed-width label */
-.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__header {
-  width: var(--input-wrapper-label-width, 12rem);
-  flex-shrink: 0;
+.bc-input-wrapper--horizontal-fixed {
+  grid-template-columns: var(--input-wrapper-label-width, 12rem) 1fr;
 }
 
 /* Label header container */
@@ -4411,26 +4421,15 @@ a:focus-visible {
   vertical-align: top;
 }
 
-/* Horizontal layout adjustments (all variants) */
-.bc-input-wrapper--horizontal .bc-input-wrapper__header,
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
-  flex-shrink: 0;
-  min-width: 0;
-  /* Allow text to wrap if needed */
-}
-
-.bc-input-wrapper--horizontal .bc-input-wrapper__content,
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content,
-.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__content {
-  flex: 1;
-  min-width: 0; /* Prevent overflow issues */
-}
-
-/* Error messages in horizontal mode should always appear on their own line */
+/* Error messages in horizontal mode span full width on their own row */
 .bc-input-wrapper--horizontal .bc-input-wrapper__error,
 .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error,
 .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__error {
-  flex-basis: 100%;
+  grid-column: 1 / -1;
+}
+
+.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
+  order: 3;
 }
 
 /* Description text */

package/dist/beatui.tailwind.css

@@ -2008,6 +2008,15 @@ a:focus-visible {
   color: var(--text-normal-dark);
 }
 
+/* Error state */
+.bc-input-container--error:has(*.bc-checkbox-input) {
+  outline: none;
+}
+
+.bc-input-container--error:focus-within:has(*.bc-checkbox-input) {
+  outline: none;
+}
+
 .bc-collapse {
   overflow: hidden;
   transition: height
@@ -4008,31 +4017,32 @@ a:focus-visible {
   width: 100%;
 }
 
-/* Horizontal layout variants */
+/* Horizontal layout variants - use grid for proper error positioning */
 .bc-input-wrapper--horizontal,
 .bc-input-wrapper--horizontal-label-right,
 .bc-input-wrapper--horizontal-fixed {
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: center;
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
-}
-
-.bc-input-wrapper--horizontal > *,
-.bc-input-wrapper--horizontal-label-right > *,
-.bc-input-wrapper--horizontal-fixed > * {
-    min-width: min-content;
+  gap: var(--spacing-sm, calc(var(--spacing-base) * 4));
 }
 
 /* Horizontal with label on right */
 .bc-input-wrapper--horizontal-label-right {
-  flex-direction: row-reverse;
+  grid-template-columns: 1fr auto;
+}
+
+.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
+  order: 2;
+}
+
+.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content {
+  order: 1;
 }
 
 /* Horizontal with fixed-width label */
-.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__header {
-  width: var(--input-wrapper-label-width, 12rem);
-  flex-shrink: 0;
+.bc-input-wrapper--horizontal-fixed {
+  grid-template-columns: var(--input-wrapper-label-width, 12rem) 1fr;
 }
 
 /* Label header container */
@@ -4086,26 +4096,15 @@ a:focus-visible {
   vertical-align: top;
 }
 
-/* Horizontal layout adjustments (all variants) */
-.bc-input-wrapper--horizontal .bc-input-wrapper__header,
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
-  flex-shrink: 0;
-  min-width: 0;
-  /* Allow text to wrap if needed */
-}
-
-.bc-input-wrapper--horizontal .bc-input-wrapper__content,
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content,
-.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__content {
-  flex: 1;
-  min-width: 0; /* Prevent overflow issues */
-}
-
-/* Error messages in horizontal mode should always appear on their own line */
+/* Error messages in horizontal mode span full width on their own row */
 .bc-input-wrapper--horizontal .bc-input-wrapper__error,
 .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error,
 .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__error {
-  flex-basis: 100%;
+  grid-column: 1 / -1;
+}
+
+.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
+  order: 3;
 }
 
 /* Description text */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "0.65.0",
+  "version": "0.66.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",