@brickclay-org/ui 0.1.74 → 0.1.76

package/index.d.ts

@@ -1035,7 +1035,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     disabled: _angular_core.ModelSignal<boolean>;
     loading: _angular_core.InputSignal<boolean>;
     closeOnSelect: _angular_core.InputSignal<boolean>;
-    dropdownPosition: _angular_core.InputSignal<"bottom" | "top">;
+    dropdownPosition: _angular_core.InputSignal<"top" | "bottom">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: _angular_core.InputSignal<boolean>;
@@ -1064,7 +1064,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     selectedOptions: _angular_core.WritableSignal<any[]>;
     searchTerm: _angular_core.WritableSignal<string>;
     markedIndex: _angular_core.WritableSignal<number>;
-    placement: _angular_core.WritableSignal<"bottom" | "top">;
+    placement: _angular_core.WritableSignal<"top" | "bottom">;
     private originalPanelParent;
     private originalPanelAnchor;
     private panelInBody;
@@ -2221,7 +2221,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
     appendToBody: _angular_core.InputSignal<boolean>;
     /** Open above or below the trigger (also used when appendToBody is true for fixed coordinates). */
-    dropdownPosition: _angular_core.InputSignal<"bottom" | "top">;
+    dropdownPosition: _angular_core.InputSignal<"top" | "bottom">;
     /** Key for option color (e.g. "color"). When set, option label and selected value use this color. */
     colorKey: _angular_core.InputSignal<string>;
     /** Whether to show clear button when a value is selected. */
@@ -2250,7 +2250,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     controlWrapper: ElementRef<HTMLDivElement>;
     dropdownPanel?: ElementRef<HTMLDivElement>;
     private el;
-    placement: _angular_core.WritableSignal<"bottom" | "top">;
+    placement: _angular_core.WritableSignal<"top" | "bottom">;
     private originalPanelParent;
     private originalPanelAnchor;
     private panelInBody;

package/package.json

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

package/src/lib/popover/popover.css

@@ -0,0 +1,91 @@
+/* inline-flex, not inline: an inline host puts its contents on a baseline and
+   gains descender space, which knocks the trigger out of line with whatever
+   sits beside it. */
+:host {
+  @apply inline-flex;
+}
+
+.bk-popover-anchor {
+  @apply inline-flex;
+}
+
+/* ---- Panel ----
+   No overflow:hidden here — the arrow deliberately hangs outside the box. Put
+   any scrolling on the content you project instead. */
+.bk-popover-panel {
+  @apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;
+  box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.12), 0 4px 8px -4px rgba(16, 24, 40, 0.06);
+
+  /* Hidden for the first frame, which exists only so the panel can be measured
+     (see position() in popover.ts). The fade starts from the already-painted
+     hidden state, so it happens in place — nothing slides in from a corner. */
+  visibility: hidden;
+  opacity: 0;
+}
+
+.bk-popover-panel.bk-popover-ready {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 120ms ease-out;
+}
+
+/* ---- Arrow ----
+   A square rotated 45°, so it picks up the panel's own background and border
+   and matches it on every side — a CSS border-triangle can't have a border of
+   its own. Only the two outward-facing edges keep their border; the other two
+   sit inside the panel where a line would show. Being a positioned child, it
+   paints above the panel's border and hides the segment it crosses. */
+.bk-popover-arrow {
+  @apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];
+}
+
+/* Panel above the anchor: arrow on the bottom edge, pointing down. Under a 45°
+   rotation that tip is the square's bottom-right corner, so the bottom and
+   right borders are the ones on show. */
+.bk-popover-panel[data-side="top"] .bk-popover-arrow {
+  bottom: -5px;
+  border-top: none;
+  border-left: none;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+/* Panel below: arrow on the top edge, pointing up (top-left corner). */
+.bk-popover-panel[data-side="bottom"] .bk-popover-arrow {
+  top: -5px;
+  border-bottom: none;
+  border-right: none;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+/* Panel to the left: arrow on the right edge, pointing right (top-right corner). */
+.bk-popover-panel[data-side="left"] .bk-popover-arrow {
+  right: -5px;
+  border-bottom: none;
+  border-left: none;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+/* Panel to the right: arrow on the left edge, pointing left (bottom-left corner). */
+.bk-popover-panel[data-side="right"] .bk-popover-arrow {
+  left: -5px;
+  border-top: none;
+  border-right: none;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+/* ---- Content ---- */
+.bk-popover-header {
+  @apply flex items-start justify-between gap-3 mb-1;
+}
+
+.bk-popover-title {
+  @apply text-sm font-semibold text-[#141414];
+}
+
+.bk-popover-close {
+  @apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;
+}
+
+.bk-popover-body {
+  @apply text-sm font-normal text-[#6B7080];
+}

package/src/lib/ui-avatar-group/ui-avatar-group.css

@@ -0,0 +1,31 @@
+/* =========================
+   Avatar Group (stacked list)
+========================= */
+.bk-avatar-group {
+  @apply inline-flex items-center;
+}
+
+/* Each slot wraps a bk-avatar. A white ring separates overlapping avatars;
+   hover lifts the avatar above its neighbours. */
+.bk-avatar-group__item {
+  @apply relative inline-flex rounded-full transition-transform duration-150;
+  box-shadow: 0 0 0 2px #ffffff;
+}
+
+.bk-avatar-group__item:hover {
+  @apply z-10;
+}
+
+.bk-avatar-group__item--overflow {
+  @apply cursor-pointer;
+}
+
+/* =========================
+   Overlap per size (~1/3 of the avatar width)
+========================= */
+.bk-avatar-group.xsm .bk-avatar-group__item:not(:first-child) { margin-left: -8px; }
+.bk-avatar-group.sm  .bk-avatar-group__item:not(:first-child) { margin-left: -10px; }
+.bk-avatar-group.md  .bk-avatar-group__item:not(:first-child) { margin-left: -12px; }
+.bk-avatar-group.lg  .bk-avatar-group__item:not(:first-child) { margin-left: -16px; }
+.bk-avatar-group.xl  .bk-avatar-group__item:not(:first-child) { margin-left: -18px; }
+.bk-avatar-group.xxl .bk-avatar-group__item:not(:first-child) { margin-left: -20px; }