@brickclay-org/ui 0.1.64 → 0.1.66

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>;
@@ -866,7 +866,7 @@ declare class BkSelect implements ControlValueAccessor {
     disabled: i0.ModelSignal<boolean>;
     loading: i0.InputSignal<boolean>;
     closeOnSelect: i0.InputSignal<boolean>;
-    dropdownPosition: i0.InputSignal<"top" | "bottom">;
+    dropdownPosition: i0.InputSignal<"bottom" | "top">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: i0.InputSignal<boolean>;
@@ -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;
@@ -1926,7 +1941,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<"top" | "bottom">;
+    dropdownPosition: i0.InputSignal<"bottom" | "top">;
     /** 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.64",
+  "version": "0.1.66",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/checkbox/checkbox.css

@@ -24,3 +24,12 @@
 .checkbox.lg svg {
   @apply size-[14px];
 }
+
+
+/*---- Focus State: consistent 1px ring (box-shadow = no layout shift) ---- */
+/* Both :focus and :focus-visible render the same 1px ring so neither disturbs it */
+.group:focus .checkbox,
+.group:focus-visible .checkbox {
+  outline: none;
+  box-shadow: 0 0 0 1px #000; /* black */
+}

package/src/lib/radio/radio.css

@@ -48,3 +48,12 @@
 .radio.lg .tick {
   @apply size-[14px] min-h-[14px] min-w-[14px];
 }
+
+
+/*---- Focus State: consistent 1px ring (box-shadow = no layout shift) ---- */
+/* Both :focus and :focus-visible render the same 1px ring so neither disturbs it */
+.group:focus .radio,
+.group:focus-visible .radio {
+  outline: none;
+  box-shadow: 0 0 0 1px #000; /* black */
+}

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];