@tempots/beatui 0.64.0 → 0.66.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/beatui.css +28 -32
  2. package/dist/beatui.tailwind.css +28 -32
  3. package/package.json +1 -1
package/dist/beatui.css CHANGED
@@ -2333,6 +2333,15 @@ a:focus-visible {
2333
2333
  color: var(--text-normal-dark);
2334
2334
  }
2335
2335
 
2336
+ /* Error state */
2337
+ .bc-input-container--error:has(*.bc-checkbox-input) {
2338
+ outline: none;
2339
+ }
2340
+
2341
+ .bc-input-container--error:focus-within:has(*.bc-checkbox-input) {
2342
+ outline: none;
2343
+ }
2344
+
2336
2345
  .bc-collapse {
2337
2346
  overflow: hidden;
2338
2347
  transition: height
@@ -4333,30 +4342,32 @@ a:focus-visible {
4333
4342
  width: 100%;
4334
4343
  }
4335
4344
 
4336
- /* Horizontal layout variants */
4345
+ /* Horizontal layout variants - use grid for proper error positioning */
4337
4346
  .bc-input-wrapper--horizontal,
4338
4347
  .bc-input-wrapper--horizontal-label-right,
4339
4348
  .bc-input-wrapper--horizontal-fixed {
4340
- flex-direction: row;
4349
+ display: grid;
4350
+ grid-template-columns: auto 1fr;
4341
4351
  align-items: center;
4342
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
4343
- }
4344
-
4345
- .bc-input-wrapper--horizontal > *,
4346
- .bc-input-wrapper--horizontal-label-right > *,
4347
- .bc-input-wrapper--horizontal-fixed > * {
4348
- min-width: min-content;
4352
+ gap: var(--spacing-sm, calc(var(--spacing-base) * 4));
4349
4353
  }
4350
4354
 
4351
4355
  /* Horizontal with label on right */
4352
4356
  .bc-input-wrapper--horizontal-label-right {
4353
- flex-direction: row-reverse;
4357
+ grid-template-columns: 1fr auto;
4358
+ }
4359
+
4360
+ .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
4361
+ order: 2;
4362
+ }
4363
+
4364
+ .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content {
4365
+ order: 1;
4354
4366
  }
4355
4367
 
4356
4368
  /* Horizontal with fixed-width label */
4357
- .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__header {
4358
- width: var(--input-wrapper-label-width, 12rem);
4359
- flex-shrink: 0;
4369
+ .bc-input-wrapper--horizontal-fixed {
4370
+ grid-template-columns: var(--input-wrapper-label-width, 12rem) 1fr;
4360
4371
  }
4361
4372
 
4362
4373
  /* Label header container */
@@ -4410,30 +4421,15 @@ a:focus-visible {
4410
4421
  vertical-align: top;
4411
4422
  }
4412
4423
 
4413
- /* Horizontal layout adjustments (all variants) */
4414
- .bc-input-wrapper--horizontal .bc-input-wrapper__header,
4415
- .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
4416
- flex-shrink: 0;
4417
- min-width: 0;
4418
- /* Allow text to wrap if needed */
4419
- }
4420
-
4421
- .bc-input-wrapper--horizontal .bc-input-wrapper__content,
4422
- .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content,
4423
- .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__content {
4424
- flex: 1;
4425
- min-width: 0; /* Prevent overflow issues */
4426
- }
4427
-
4428
- /* Error messages in horizontal mode should align with content */
4424
+ /* Error messages in horizontal mode span full width on their own row */
4429
4425
  .bc-input-wrapper--horizontal .bc-input-wrapper__error,
4426
+ .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error,
4430
4427
  .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__error {
4431
- margin-left: calc(var(--spacing-base) * 4); /* Align with content */
4428
+ grid-column: 1 / -1;
4432
4429
  }
4433
4430
 
4434
- /* Error messages in horizontal-label-right mode should align with content on the right */
4435
4431
  .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
4436
- margin-right: calc(var(--spacing-base) * 4); /* Align with content */
4432
+ order: 3;
4437
4433
  }
4438
4434
 
4439
4435
  /* Description text */
package/dist/beatui.tailwind.css CHANGED
@@ -2008,6 +2008,15 @@ a:focus-visible {
2008
2008
  color: var(--text-normal-dark);
2009
2009
  }
2010
2010
 
2011
+ /* Error state */
2012
+ .bc-input-container--error:has(*.bc-checkbox-input) {
2013
+ outline: none;
2014
+ }
2015
+
2016
+ .bc-input-container--error:focus-within:has(*.bc-checkbox-input) {
2017
+ outline: none;
2018
+ }
2019
+
2011
2020
  .bc-collapse {
2012
2021
  overflow: hidden;
2013
2022
  transition: height
@@ -4008,30 +4017,32 @@ a:focus-visible {
4008
4017
  width: 100%;
4009
4018
  }
4010
4019
 
4011
- /* Horizontal layout variants */
4020
+ /* Horizontal layout variants - use grid for proper error positioning */
4012
4021
  .bc-input-wrapper--horizontal,
4013
4022
  .bc-input-wrapper--horizontal-label-right,
4014
4023
  .bc-input-wrapper--horizontal-fixed {
4015
- flex-direction: row;
4024
+ display: grid;
4025
+ grid-template-columns: auto 1fr;
4016
4026
  align-items: center;
4017
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
4018
- }
4019
-
4020
- .bc-input-wrapper--horizontal > *,
4021
- .bc-input-wrapper--horizontal-label-right > *,
4022
- .bc-input-wrapper--horizontal-fixed > * {
4023
- min-width: min-content;
4027
+ gap: var(--spacing-sm, calc(var(--spacing-base) * 4));
4024
4028
  }
4025
4029
 
4026
4030
  /* Horizontal with label on right */
4027
4031
  .bc-input-wrapper--horizontal-label-right {
4028
- flex-direction: row-reverse;
4032
+ grid-template-columns: 1fr auto;
4033
+ }
4034
+
4035
+ .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
4036
+ order: 2;
4037
+ }
4038
+
4039
+ .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content {
4040
+ order: 1;
4029
4041
  }
4030
4042
 
4031
4043
  /* Horizontal with fixed-width label */
4032
- .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__header {
4033
- width: var(--input-wrapper-label-width, 12rem);
4034
- flex-shrink: 0;
4044
+ .bc-input-wrapper--horizontal-fixed {
4045
+ grid-template-columns: var(--input-wrapper-label-width, 12rem) 1fr;
4035
4046
  }
4036
4047
 
4037
4048
  /* Label header container */
@@ -4085,30 +4096,15 @@ a:focus-visible {
4085
4096
  vertical-align: top;
4086
4097
  }
4087
4098
 
4088
- /* Horizontal layout adjustments (all variants) */
4089
- .bc-input-wrapper--horizontal .bc-input-wrapper__header,
4090
- .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
4091
- flex-shrink: 0;
4092
- min-width: 0;
4093
- /* Allow text to wrap if needed */
4094
- }
4095
-
4096
- .bc-input-wrapper--horizontal .bc-input-wrapper__content,
4097
- .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content,
4098
- .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__content {
4099
- flex: 1;
4100
- min-width: 0; /* Prevent overflow issues */
4101
- }
4102
-
4103
- /* Error messages in horizontal mode should align with content */
4099
+ /* Error messages in horizontal mode span full width on their own row */
4104
4100
  .bc-input-wrapper--horizontal .bc-input-wrapper__error,
4101
+ .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error,
4105
4102
  .bc-input-wrapper--horizontal-fixed .bc-input-wrapper__error {
4106
- margin-left: calc(var(--spacing-base) * 4); /* Align with content */
4103
+ grid-column: 1 / -1;
4107
4104
  }
4108
4105
 
4109
- /* Error messages in horizontal-label-right mode should align with content on the right */
4110
4106
  .bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
4111
- margin-right: calc(var(--spacing-base) * 4); /* Align with content */
4107
+ order: 3;
4112
4108
  }
4113
4109
 
4114
4110
  /* Description text */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tempots/beatui",
3
- "version": "0.64.0",
3
+ "version": "0.66.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.umd.js",
6
6
  "module": "dist/index.es.js",