@brickclay-org/ui 0.1.65 → 0.1.67

package/index.d.ts

@@ -840,7 +840,7 @@ declare class BkGrid<T = any> {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkGrid<any>, "bk-grid", never, { "draggable": { "alias": "draggable"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "result": { "alias": "result"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "actionIconClass": { "alias": "actionIconClass"; "required": false; }; "actionClass": { "alias": "actionClass"; "required": false; }; "showNoRecords": { "alias": "showNoRecords"; "required": false; }; "noRecordFoundHeight": { "alias": "noRecordFoundHeight"; "required": false; }; }, { "change": "change"; "actionClick": "actionClick"; "sortChange": "sortChange"; "dragDropChange": "dragDropChange"; }, never, never, true, never>;
 }
 
-declare class BkSelect implements ControlValueAccessor {
+declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy {
     items: i0.InputSignal<any[]>;
     bindLabel: i0.InputSignal<string>;
     bindValue: i0.InputSignal<string>;
@@ -885,12 +885,17 @@ declare class BkSelect implements ControlValueAccessor {
     optionsListContainer: ElementRef<HTMLDivElement>;
     optionsRef: QueryList<ElementRef>;
     controlWrapper: ElementRef<HTMLDivElement>;
+    chipsViewport?: ElementRef<HTMLDivElement>;
+    measureChips?: QueryList<ElementRef<HTMLElement>>;
+    measurePlus?: ElementRef<HTMLElement>;
     private _value;
     private static activeInstance;
     isOpen: i0.WritableSignal<boolean>;
     selectedOptions: i0.WritableSignal<any[]>;
     searchTerm: i0.WritableSignal<string>;
     markedIndex: i0.WritableSignal<number>;
+    visibleCount: i0.WritableSignal<number>;
+    private resizeObserver?;
     dropdownStyle: i0.WritableSignal<{
         top?: string;
         bottom?: string;
@@ -900,6 +905,16 @@ declare class BkSelect implements ControlValueAccessor {
     filteredItems: i0.Signal<any[]>;
     isAllSelected: i0.Signal<boolean>;
     constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private scheduleRecompute;
+    /**
+     * Measures the off-screen chip row and works out how many chips fit on a
+     * single line. If every chip fits, all of them are shown and no "+N" badge
+     * is rendered. Otherwise it keeps as many chips as fit while reserving space
+     * for the "+N" overflow badge.
+     */
+    private recomputeVisibleChips;
     resolveLabel(item: any): string;
     resolveValue(item: any): any;
     isItemSelected(item: any): boolean;

package/package.json

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

package/src/lib/select/select.css

@@ -70,6 +70,30 @@
 
 /* --- NEW: Multi Select Chips --- */
 
+/* Visible single-line chip row; overflow collapses into the "+N" badge.
+   flex: 1 forces the row to span the full available width so that the width
+   we measure (clientWidth) is the real space available — not the shrink-to-fit
+   width of however many chips happen to be rendered right now. Without this the
+   measurement collapses with the content and the row can never grow to fill
+   the space. */
+.bk-chips-viewport {
+  flex: 1 1 0%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Off-screen measurement row: renders all chips so each one's natural width
+   can be read, without affecting the visible layout. */
+.bk-chips-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: -1;
+}
+
 /* Badge Item */
 .bk-multi-badge-item {
   @apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];

package/src/lib/toggle/toggle.css

@@ -2,7 +2,7 @@
 .toggle-base {
   @apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;
   /* Focus State (Blue Ring as seen in image) */
-  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;
+  @apply focus:outline-none focus-visible:ring-1 focus-visible:ring-black focus-visible:ring-offset-1;
 }
 
 /* --- Colors --- */
@@ -11,7 +11,7 @@
 }
 
 .toggle-on {
-  @apply bg-[#22973F] hover:bg-[#1E7735]; /* Green when on */
+  @apply bg-gray-800 hover:bg-black; /* Green when on */
 }
 
 /* --- Disabled State (Bottom row of image) --- */
@@ -82,10 +82,10 @@
 }
 
 .simulate-hover.toggle-on {
-  @apply bg-[#1E7735]; /* Matches the hover color defined in .toggle-on */
+  @apply bg-black; /* Matches the hover color defined in .toggle-on */
 }
 
 /* Force Focus Appearance (Blue Ring) */
 .simulate-focus {
-  @apply ring-2 ring-[#1336EF] ring-offset-2;
+  @apply ring-2 ring-black ring-offset-1;
 }