@brickclay-org/ui 0.1.69 → 0.1.70

package/index.d.ts

@@ -866,7 +866,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     disabled: i0.ModelSignal<boolean>;
     loading: i0.InputSignal<boolean>;
     closeOnSelect: i0.InputSignal<boolean>;
-    dropdownPosition: i0.InputSignal<"bottom" | "top">;
+    dropdownPosition: i0.InputSignal<"top" | "bottom">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: i0.InputSignal<boolean>;
@@ -1963,7 +1963,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
     appendToBody: i0.InputSignal<boolean>;
     /** Open above or below the trigger (also used when appendToBody is true for fixed coordinates). */
-    dropdownPosition: i0.InputSignal<"bottom" | "top">;
+    dropdownPosition: i0.InputSignal<"top" | "bottom">;
     /** Key for option color (e.g. "color"). When set, option label and selected value use this color. */
     colorKey: i0.InputSignal<string>;
     /** Whether to show clear button when a value is selected. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.69",
+  "version": "0.1.70",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/tabs/tabs.css

@@ -7,7 +7,7 @@
    Grid layout: columns flow horizontally and size to content
    (auto-cols-max), matching the old flex row while giving grid control. */
 .tabs-list {
-  @apply grid grid-flow-col auto-cols-max gap-0 list-none m-0 px-0 py-0.5;
+  @apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;
 }
 
 /* Tab Item */
@@ -29,9 +29,14 @@
 }
 
 /* Tab Button - Hover State */
-/* .tabs-button:hover:not(:disabled):not(.tabs-button--active) {
-  @apply text-[#141414] bg-[#F9FAFA];
-} */
+.tabs-button:hover:not(:disabled):not(.tabs-button--active) {
+  @apply text-[#141414] bg-[#EDEEF0];
+}
+
+/* Vertical (default variant): 9px top/bottom padding on stacked tabs */
+.tabs-list--vertical .tabs-button {
+  @apply py-[9px];
+}
 
 /* Tab Button - Active State */
 .tabs-button--active {
@@ -71,22 +76,26 @@
   @apply whitespace-nowrap;
 }
 
-
 /* =========================================================
    Segmented variant (pill-in-a-track)
    Colors are driven by CSS vars set per-usage via [colors],
    falling back to the default design tokens.
    ========================================================= */
 
-/* Track / wrapper — default background; override via colors.wrapper (use ! classes). */
+/* Track / wrapper — default background; override via colors.wrapper (use ! classes).
+   overflow-x-auto lets the pill row scroll horizontally when there are more
+   tabs than fit, instead of squishing them until the labels overlap. */
 .tabs-container--segmented {
-  @apply p-[3px] rounded-md w-full md:w-auto;
+  @apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;
   background: #54578E12;
 }
 
-/* Pill row — equal-width columns (auto-cols-fr) replace the old flex-1. */
+/* Pill row — columns are minmax(max-content, 1fr): they share the track
+   equally while they fit (like the old auto-cols-fr), but never shrink below
+   their content, so a long list overflows the track and scrolls. */
 .tabs-list--segmented {
-  @apply grid grid-flow-col auto-cols-fr items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;
+  @apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;
+  grid-auto-columns: minmax(max-content, 1fr);
   color: #6B7080;
 }
 
@@ -121,4 +130,6 @@
 /* Left-align pill content in the vertical segmented layout */
 .tabs-list--segmented-vertical .tabs-button--segmented {
   @apply justify-start text-left;
-}
+}
+
+/* Testing */