@tempots/beatui 1.3.0 → 1.5.0

package/dist/beatui.css

@@ -2247,6 +2247,40 @@ a:focus-visible {
   justify-content: center;
 }
 
+/* AutoColorBadge Component — reuses badge sizing/layout tokens */
+.bc-auto-color-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--badge-gap, var(--control-gap-md));
+  border: var(--border-width-default) solid transparent;
+  font-family: var(
+    --font-family-default-ui,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
+  font-size: inherit;
+  line-height: var(--line-height-none);
+  border-radius: var(--radius-badge, var(--radius-control, var(--radius-md)));
+  transition:
+    background-color var(--motion-transition-fast) var(--motion-easing-standard),
+    color var(--motion-transition-fast) var(--motion-easing-standard);
+  white-space: nowrap;
+}
+
+/* Accessibility adjustments */
+@media (prefers-contrast: high) {
+  .bc-auto-color-badge {
+    border-width: var(--border-width-medium);
+    border-color: currentColor;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bc-auto-color-badge {
+    transition: none;
+  }
+}
+
 /* Avatar Component */
 .bc-avatar {
   --avatar-bg: var(--color-base-500);
@@ -5732,6 +5766,15 @@ a:focus-visible {
   background-color: var(--color-base-800);
 }
 
+/* Format Components - Locale-aware data formatting display */
+
+/* Tabular figures for numeric format components */
+.bc-format-number,
+.bc-format-bigint,
+.bc-format-file-size {
+  font-variant-numeric: tabular-nums;
+}
+
 .bc-flyout-container {
   z-index: var(--z-index-popover);
 }
@@ -6545,20 +6588,22 @@ a:focus-visible {
   }
 }
 
-/* Input Wrapper Component */
-.bc-input-wrapper {
+/* Field Component */
+.bc-field {
   display: flex;
   flex-direction: column;
+  min-width: 0; /* Prevent overflow in grid/flex containers */
 }
 
-.bc-input-wrapper--full-width {
+.bc-field--full-width {
   width: 100%;
 }
 
 /* Horizontal layout variants - use grid for proper error positioning */
-.bc-input-wrapper--horizontal,
-.bc-input-wrapper--horizontal-label-right,
-.bc-input-wrapper--horizontal-fixed {
+.bc-field--horizontal,
+.bc-field--horizontal-label-right,
+.bc-field--horizontal-fixed,
+.bc-field--horizontal-end {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -6566,25 +6611,39 @@ a:focus-visible {
 }
 
 /* Horizontal with label on right */
-.bc-input-wrapper--horizontal-label-right {
+.bc-field--horizontal-label-right {
   grid-template-columns: 1fr auto;
 }
 
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
+.bc-field--horizontal-label-right .bc-field__header {
   order: 2;
 }
 
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content {
+.bc-field--horizontal-label-right .bc-field__content {
   order: 1;
 }
 
 /* Horizontal with fixed-width label */
-.bc-input-wrapper--horizontal-fixed {
-  grid-template-columns: var(--input-wrapper-label-width, 12rem) 1fr;
+.bc-field--horizontal-fixed {
+  grid-template-columns: var(--field-label-width, 7.5rem) 1fr;
+}
+
+/* Horizontal with fixed-width label, right-aligned (flush with input) */
+.bc-field--horizontal-end {
+  grid-template-columns: var(--field-label-width, 7.5rem) 1fr;
+}
+
+.bc-field--horizontal-end .bc-field__header {
+  justify-content: flex-end;
+}
+
+.bc-field--horizontal-end .bc-field__label-section {
+  text-align: right;
+  align-items: flex-end;
 }
 
 /* Label header container */
-.bc-input-wrapper__header {
+.bc-field__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6592,95 +6651,278 @@ a:focus-visible {
 }
 
 /* Label section container */
-.bc-input-wrapper__label-section {
+.bc-field__label-section {
   display: flex;
   flex-direction: column;
 }
 
 /* Label container */
-.bc-input-wrapper__label {
+.bc-field__label {
   display: flex;
   align-items: center;
   gap: var(--spacing-stack-2xs, var(--spacing-xs));
 }
 
 /* Label text styles */
-.bc-input-wrapper__label-text {
+.bc-field__label-text {
   text-wrap: nowrap;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
 /* Label text states */
-.bc-input-wrapper__label-text--default {
+.bc-field__label-text--default {
   color: var(--color-gray-600);
   font-weight: var(--font-weight-semibold);
 }
 
-.bc-input-wrapper__label-text--disabled {
+.bc-field__label-text--disabled {
   color: var(--color-gray-500);
   font-weight: var(--font-weight-normal);
 }
 
-.bc-input-wrapper__label-text--error {
+.bc-field__label-text--error {
   color: var(--color-danger-600);
   font-weight: var(--font-weight-normal);
 }
 
 /* Required symbol */
-.bc-input-wrapper__required {
+.bc-field__required {
   font-size: var(--font-size-xs);
   color: var(--color-danger-600);
   vertical-align: top;
 }
 
 /* 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 {
+.bc-field--horizontal .bc-field__error,
+.bc-field--horizontal-label-right .bc-field__error,
+.bc-field--horizontal-fixed .bc-field__error,
+.bc-field--horizontal-end .bc-field__error {
   grid-column: 1 / -1;
 }
 
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
+.bc-field--horizontal-label-right .bc-field__error {
   order: 3;
 }
 
 /* Description text */
-.bc-input-wrapper__description {
+.bc-field__description {
   font-size: var(--font-size-sm);
   color: var(--color-gray-600);
   line-height: var(--line-height-normal);
 }
 
 /* Description under label in horizontal mode */
-.bc-input-wrapper__description--under-label {
+.bc-field__description--under-label {
   font-size: var(--font-size-xs);
 }
 
 /* Error message */
-.bc-input-wrapper__error {
+.bc-field__error {
   font-size: var(--font-size-sm);
   color: var(--color-danger-500);
   line-height: var(--line-height-normal);
 }
 
+/* Compact mode */
+.bc-field--compact {
+  gap: var(--spacing-xs, var(--spacing-sm));
+}
+
+.bc-field--compact .bc-field__label-text {
+  font-size: var(--font-size-xs);
+}
+
+.bc-field--compact .bc-field__description {
+  font-size: var(--font-size-xs);
+}
+
+.bc-field--compact .bc-field__error {
+  font-size: var(--font-size-xs);
+}
+
+/* Responsive layout — matches horizontal-fixed when wide, flips to vertical
+   when the ancestor container (Fieldset) narrows below 480px. */
+.bc-field--responsive {
+  display: grid;
+  grid-template-columns: var(--field-label-width, 7.5rem) 1fr;
+  align-items: center;
+  gap: var(--spacing-sm, var(--spacing-lg));
+}
+
+.bc-field--responsive .bc-field__error {
+  grid-column: 1 / -1;
+}
+
+@container (max-width: 480px) {
+  .bc-field--responsive {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .bc-field--responsive .bc-field__error {
+    grid-column: auto;
+  }
+}
+
 /* Dark mode styles */
-.dark .bc-input-wrapper__label-text--default {
+.dark .bc-field__label-text--default {
   color: var(--text-normal);
 }
 
-.dark .bc-input-wrapper__label-text--error {
+.dark .bc-field__label-text--error {
   color: var(--color-danger-300);
 }
 
-.dark .bc-input-wrapper__required {
+.dark .bc-field__required {
   color: var(--color-danger-400);
 }
 
-.dark .bc-input-wrapper__error {
+.dark .bc-field__error {
   color: var(--color-danger-400);
 }
 
+/* Fieldset Component */
+.bc-fieldset {
+  container-type: inline-size;
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0; /* Fix fieldset overflow behaviour */
+  width: 100%;
+}
+
+/* Bordered variant */
+.bc-fieldset--bordered {
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+}
+
+.bc-fieldset--bordered > .bc-fieldset__legend {
+  padding: 0 var(--spacing-sm);
+  margin-left: calc(-1 * var(--spacing-sm));
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  color: var(--text-normal);
+}
+
+/* Plain variant */
+.bc-fieldset--plain > .bc-fieldset__legend {
+  width: 100%;
+  padding-bottom: var(--spacing-sm);
+  border-bottom: var(--border-width-default) solid var(--border-divider);
+  margin-bottom: var(--spacing-md);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  color: var(--text-normal);
+}
+
+/* Card variant */
+.bc-fieldset--card {
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--spacing-lg);
+}
+
+.bc-fieldset--card > .bc-fieldset__legend {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-lg);
+  color: var(--text-normal);
+  padding: 0;
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Legend */
+.bc-fieldset__legend {
+  display: flex;
+  align-items: center;
+}
+
+.bc-fieldset__legend-toggle {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  width: 100%;
+}
+
+.bc-fieldset__legend-toggle:focus-visible {
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.bc-fieldset__collapse-icon {
+  transition: transform var(--motion-duration-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-fieldset__collapse-icon--collapsed {
+  transform: rotate(-90deg);
+}
+
+/* Description */
+.bc-fieldset__description {
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-md);
+}
+
+/* Content grid — defaults to single column. Multi-column is set via
+   inline style by the component when columns > 1. */
+.bc-fieldset__content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--fieldset-gap, var(--spacing-md));
+}
+
+/* Disabled state */
+.bc-fieldset:disabled {
+  opacity: 0.6;
+}
+
+.bc-fieldset:disabled .bc-fieldset__legend-toggle {
+  cursor: default;
+}
+
+/* Dark mode */
+.dark .bc-fieldset--bordered {
+  border-color: var(--border-default);
+}
+
+.dark .bc-fieldset--plain > .bc-fieldset__legend {
+  border-bottom-color: var(--border-default);
+}
+
+.dark .bc-fieldset--card {
+  background-color: var(--bg-elevated);
+  box-shadow: var(--shadow-md);
+}
+
+.dark .bc-fieldset__description {
+  color: var(--text-muted);
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .bc-fieldset__collapse-icon {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .bc-fieldset--bordered {
+    border-width: var(--border-width-medium);
+  }
+  .bc-fieldset--card {
+    border: var(--border-width-medium) solid currentColor;
+  }
+}
+
 .bc-json-schema-object {
   border-left: var(--spacing-md) solid var(--color-base-200);
   padding-inline-start: var(--spacing-md);
@@ -12712,6 +12954,11 @@ span.bc-sidebar-link {
   background-color: var(--table-stripe-bg);
 }
 
+/* Detail rows inherit the parent row's background instead of zebra striping */
+.bc-table--with-striped-rows > tbody > tr.bc-data-table__detail-row {
+  background-color: inherit;
+}
+
 /* Hoverable striped rows - darker stripe on hover */
 .bc-table--hoverable.bc-table--with-striped-rows
   > tbody
@@ -16384,6 +16631,45 @@ span.bc-sidebar-link {
   color: var(--text-muted);
 }
 
+/* Markers container */
+.bc-range-slider__markers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Individual marker dot */
+.bc-range-slider__marker {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bc-range-slider__marker::before {
+  content: '';
+  display: block;
+  width: var(--spacing-sm);
+  height: var(--spacing-sm);
+  background-color: var(--color-white);
+  border-radius: var(--radius-full);
+}
+
+/* Marker label */
+.bc-range-slider__marker-label {
+  position: absolute;
+  top: calc(100% + var(--spacing-sm));
+  white-space: nowrap;
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+}
+
 /* ── Size variants ── */
 
 /* xs */
@@ -16391,7 +16677,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-lg) var(--spacing-smh) var(--spacing-md);
 }
 .bc-range-slider--size-xs .bc-range-slider__track {
-  height: var(--spacing-xs);
+  height: var(--spacing-smh);
 }
 .bc-range-slider--size-xs .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 2.5);
@@ -16417,7 +16703,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
 }
 .bc-range-slider--size-sm .bc-range-slider__track {
-  height: calc(var(--spacing-base) * 0.75);
+  height: var(--spacing-sm);
 }
 .bc-range-slider--size-sm .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 3.5);
@@ -16443,7 +16729,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-2xl) calc(var(--spacing-base) * 2.5) var(--spacing-xl);
 }
 .bc-range-slider--size-md .bc-range-slider__track {
-  height: var(--spacing-sm);
+  height: var(--spacing-smh);
 }
 .bc-range-slider--size-md .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 4.5);
@@ -16469,7 +16755,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-3xl) var(--spacing-mdh) var(--spacing-2xl);
 }
 .bc-range-slider--size-lg .bc-range-slider__track {
-  height: var(--spacing-smh);
+  height: var(--spacing-md);
 }
 .bc-range-slider--size-lg .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 5.5);
@@ -16495,7 +16781,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-4xl) calc(var(--spacing-base) * 3.5) var(--spacing-3xl);
 }
 .bc-range-slider--size-xl .bc-range-slider__track {
-  height: var(--spacing-md);
+  height: var(--spacing-mdh);
 }
 .bc-range-slider--size-xl .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 6.5);
@@ -16516,6 +16802,36 @@ span.bc-sidebar-link {
   font-size: var(--font-size-md);
 }
 
+/* Marker size overrides per size */
+.bc-range-slider--size-xs .bc-range-slider__marker::before {
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
+}
+.bc-range-slider--size-xs .bc-range-slider__marker-label {
+  font-size: var(--font-size-2xs);
+}
+.bc-range-slider--size-sm .bc-range-slider__marker::before {
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
+}
+.bc-range-slider--size-sm .bc-range-slider__marker-label {
+  font-size: var(--font-size-2xs);
+}
+.bc-range-slider--size-lg .bc-range-slider__marker::before {
+  width: var(--spacing-smh);
+  height: var(--spacing-smh);
+}
+.bc-range-slider--size-lg .bc-range-slider__marker-label {
+  font-size: var(--font-size-sm);
+}
+.bc-range-slider--size-xl .bc-range-slider__marker::before {
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+}
+.bc-range-slider--size-xl .bc-range-slider__marker-label {
+  font-size: var(--font-size-md);
+}
+
 /* ── Vertical orientation ── */
 
 .bc-range-slider--vertical {
@@ -16588,6 +16904,19 @@ span.bc-sidebar-link {
   left: calc(100% + var(--spacing-sm));
 }
 
+/* Markers: vertical positioning */
+.bc-range-slider--vertical .bc-range-slider__marker {
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+  flex-direction: row;
+}
+
+.bc-range-slider--vertical .bc-range-slider__marker-label {
+  top: auto;
+  left: calc(100% + var(--spacing-sm));
+}
+
 /* Vertical size variants — swap track width/height, adjust padding */
 
 /* xs vertical */
@@ -16653,6 +16982,14 @@ span.bc-sidebar-link {
   background-color: var(--rs-color-dark);
 }
 
+.dark .bc-range-slider__marker::before {
+  background-color: var(--color-gray-400);
+}
+
+.dark .bc-range-slider__marker-label {
+  color: var(--text-muted);
+}
+
 .dark .bc-range-slider__tick::before {
   background-color: var(--color-gray-500);
 }
@@ -17994,34 +18331,57 @@ th.bc-data-table__header--drag-over {
   background-color: var(--interactive-hover);
 }
 
-/* Tags Filter (inline checkbox list) */
-.bc-column-filter-tags {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
+/* Row Details: Toggle column */
+.bc-data-table__toggle-header {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  max-width: 2.5rem;
+  padding: 0 !important;
 }
 
-.bc-column-filter-tags__list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xs);
-  max-height: 200px;
-  overflow-y: auto;
+.bc-table > tbody > tr > td.bc-data-table__toggle-cell {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  max-width: 2.5rem;
+  padding: 0 !important;
+  text-align: center;
+  vertical-align: middle;
 }
 
-.bc-column-filter-tags__item {
-  display: flex;
+.bc-data-table__toggle-cell > button {
+  display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-2xs) var(--spacing-xs);
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  background: none;
   cursor: pointer;
-  border-radius: var(--radius-control-sm);
-  font-size: var(--font-size-sm);
-  user-select: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  transition:
+    color var(--motion-transition-fast) var(--motion-easing-standard),
+    background-color var(--motion-transition-fast) var(--motion-easing-standard);
 }
 
-.bc-column-filter-tags__item:hover {
+.bc-data-table__toggle-cell > button:hover {
   background-color: var(--interactive-hover);
+  color: var(--text-normal);
+}
+
+/* Row Details: Detail row */
+.bc-data-table__detail-row > td {
+  padding: 0 !important;
+  border-top: none !important;
+}
+
+.bc-data-table__detail-cell {
+  padding: 0 !important;
+}
+
+.bc-data-table__detail-cell > div {
+  padding: var(--spacing-md) var(--spacing-lg);
 }
 
 /* Reduced motion */
@@ -18034,7 +18394,8 @@ th.bc-data-table__header--drag-over {
   .bc-data-toolbar__action,
   .bc-data-toolbar__reset,
   .bc-data-table__column-toggle-btn,
-  .bc-data-table__group-toggle {
+  .bc-data-table__group-toggle,
+  .bc-data-table__toggle-cell > button {
     transition: none;
   }
 }