@brickclay-org/ui 0.1.85 → 0.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.85",
+  "version": "0.1.87",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"
@@ -12,11 +12,6 @@
     "moment": "^2.29.0",
     "ngx-mask": "^20.0.3"
   },
-  "peerDependenciesMeta": {
-    "@angular/cdk": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "tslib": "^2.3.0"
   },

package/src/assets/icons/double-chevron-left.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 5L11 10L16 15" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5L3 10L8 15" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/double-chevron-right.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 15L9 10L4 5" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15L17 10L12 5" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/hierarchical-select/hierarchical-select.css

@@ -72,23 +72,24 @@
   @apply rotate-180;
 }
 
+/*
+ * Positioning (top/left, width, flip above/below) is now owned entirely by CDK's connected
+ * overlay strategy in hierarchical-select.html — this panel is portalled into .cdk-overlay-pane,
+ * not laid out inline next to the control anymore. `position: static` (plus left-auto) reflects
+ * that: the panel no longer self-positions, so it must not compete with the pane's own placement.
+ * The old `[data-position]` top/bottom rules are gone for the same reason — `position: static`
+ * makes top/bottom inert either way, but stating that directly beats relying on it implicitly.
+ *
+ * Declared explicitly rather than just omitted: CSS cascades per-property, and a consumer with a
+ * stale cached copy of this package (or their own pre-CDK fork of this class name) could still
+ * have `position: absolute` on `.hierarchical-dropdown-panel` loaded globally elsewhere — if this
+ * rule simply stopped mentioning `position` instead of stating `static`, that stale declaration
+ * would be the only one left, and it would win by default. This exact mechanism broke
+ * `bk-input`'s phone-country dropdown in a downstream consumer before this component and
+ * `bk-select` were fixed here too.
+ */
 .hierarchical-dropdown-panel {
-  @apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;
-}
-
-/* Inset dropdown: anchor to .hierarchical-select-field (trigger), not the outer container + label. */
-.hierarchical-dropdown-panel[data-position='bottom'] {
-  top: calc(100% + 4px);
-  bottom: auto;
-}
-
-.hierarchical-dropdown-panel[data-position='top'] {
-  bottom: calc(100% + 4px);
-  top: auto;
-}
-
-.hierarchical-dropdown-panel-fixed {
-  z-index: 10050;
+  @apply static left-auto w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;
 }
 
 .hierarchical-search {
@@ -141,11 +142,25 @@
   }
 }
 
-.hierarchical-option:hover{
-  @apply bg-[#f9f9f9];
+/* Hover/marked is a touch darker than the selected fill so the two states
+   don't look identical. */
+.hierarchical-option:hover,
+.hierarchical-option.marked {
+  @apply bg-[#F1F1F3];
+}
+
+.hierarchical-option.marked.disabled-item {
+  @apply bg-transparent;
 }
 .hierarchical-option.selected {
-  @apply bg-[#f7f7f7];
+  @apply bg-[#F8F8F8];
+}
+
+/* A selected row still reacts to hover/keyboard-mark for feedback, while
+   staying clearly selected. */
+.hierarchical-option.selected:hover,
+.hierarchical-option.selected.marked {
+  @apply bg-[#F1F1F3];
 }
 
 .hierarchical-option.selected.disabled-item {

package/src/lib/input/input.css

@@ -23,7 +23,7 @@
   height: 40px;
   box-sizing: border-box;
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
-
+  
 }
 
 /* Default/Initial State */
@@ -58,7 +58,7 @@
 
 /* Phone Input Field - Add padding-left for selector space */
 .input-field--phone {
-  @apply pl-[80px];
+  @apply !pl-[80px];
 }
 
 /* URL Input Field - Add padding-left for prefix space */
@@ -141,8 +141,23 @@
 }
 
 /* Phone Dropdown Menu */
+/*
+ * Positioning (top/left, flip above/below) is now owned entirely by CDK's connected overlay
+ * strategy in input.html — this panel is portalled into .cdk-overlay-pane, not laid out inline
+ * next to the trigger anymore. `absolute`/`top-full`/`mt-1` here would take it out of the pane's
+ * normal flow, making CDK always measure a 0-height pane (nothing left in-flow to size against)
+ * and silently bypassing its fit/flip logic entirely — this rule is visual styling only now.
+ *
+ * `position: static` is declared explicitly rather than just omitted: CSS cascades per-property,
+ * and a consumer with a stale cached copy of this package (or their own pre-CDK fork of this
+ * class name) could still have `position: absolute; top-full; mt-1` on `.input-phone-dropdown`
+ * loaded globally elsewhere — if this rule simply stopped mentioning `position` instead of
+ * stating `static`, that stale declaration would be the only one left, and it would win by
+ * default. This exact mechanism broke this dropdown in a downstream consumer before it was
+ * fixed here at the source.
+ */
 .input-phone-dropdown {
-  @apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;
+  @apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;
 }
 
 .input-phone-dropdown-item {
@@ -394,4 +409,4 @@
 
 .input-container--sm .input-phone-selector-arrow {
   @apply w-3 h-3;
-}
+}

package/src/lib/popover/popover.css

@@ -9,11 +9,25 @@
   @apply inline-flex;
 }
 
-/* ---- Panel ----
-   No overflow:hidden here — the arrow deliberately hangs outside the box. Put
-   any scrolling on the content you project instead. */
+/*
+ * ---- Panel ----
+ * No overflow:hidden here — the arrow deliberately hangs outside the box. Put
+ * any scrolling on the content you project instead.
+ *
+ * Positioning (top/left, flip above/below/left/right) is now owned entirely by CDK's connected
+ * overlay strategy in popover.html — this panel is portalled into .cdk-overlay-pane, not laid
+ * out inline next to the trigger anymore. `position: static` reflects that: the panel no longer
+ * self-positions, so it must not compete with the pane's own placement.
+ *
+ * Declared explicitly rather than just omitted: CSS cascades per-property, and a consumer with a
+ * stale cached copy of this package (or their own pre-CDK fork of this class name) could still
+ * have `position: fixed` on `.bk-popover-panel` loaded globally elsewhere — if this rule simply
+ * stopped mentioning `position` instead of stating `static`, that stale declaration would be the
+ * only one left, and it would win by default. This exact mechanism broke `bk-input`'s
+ * phone-country dropdown in a downstream consumer before it was fixed at the source.
+ */
 .bk-popover-panel {
-  @apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;
+  @apply static 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

package/src/lib/select/select.css

@@ -165,9 +165,23 @@
   }
 }
 
-/* Dropdown */
+/*
+ * Dropdown
+ *
+ * Positioning (top/left, width, flip above/below) is now owned entirely by CDK's connected
+ * overlay strategy in select.html — this panel is portalled into .cdk-overlay-pane, not laid
+ * out inline next to the control anymore. `position: static` (plus left-auto) reflects that: the
+ * panel no longer self-positions, so it must not compete with the pane's own placement.
+ *
+ * Declared explicitly rather than just omitted: CSS cascades per-property, and a consumer with a
+ * stale cached copy of this package (or their own pre-CDK fork of this class name) could still
+ * have `position: absolute` on `.bk-dropdown-panel` loaded globally elsewhere — if this rule
+ * simply stopped mentioning `position` instead of stating `static`, that stale declaration would
+ * be the only one left, and it would win by default. This exact mechanism broke `bk-input`'s
+ * phone-country dropdown in a downstream consumer before this component itself was fixed here.
+ */
 .bk-dropdown-panel {
-  @apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;
+  @apply static left-auto w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;
 }
 
 /* Opt-in grid dropdown. List-mode selectors above and below remain unchanged. */
@@ -350,15 +364,25 @@
 .bk-option {
   @apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;
 
+  /* Hover/marked is a touch darker than the selected fill so the two states
+     no longer look identical. */
   &:hover,
   &.bk-marked {
-    @apply bg-[#F8F8F8] rounded-md;
+    @apply bg-[#F1F1F3] rounded-md;
   }
 
   &.bk-selected {
     @apply bg-[#F8F8F8] rounded-md;
   }
 
+  /* A selected row still reacts to hover (it stays clickable — e.g. to
+     de-select), so give it the same hover fill instead of letting the
+     selected background suppress the hover feedback. */
+  &.bk-selected:hover,
+  &.bk-selected.bk-marked {
+    @apply bg-[#F1F1F3];
+  }
+
   &.bk-option-disabled {
     @apply opacity-50 cursor-not-allowed;
 

package/src/lib/toastr/toastr.css

@@ -3,36 +3,21 @@
    ═══════════════════════════════════════════════════════════════════════════ */
 
 /* ─── Container ───────────────────────────────────────────────────────────── */
+/*
+ * Positioning (fixed + top/left/right/bottom/centering per corner) is owned entirely by CDK's
+ * GlobalPositionStrategy now (see toastr.service.ts) — it sets those as inline styles on the
+ * `.cdk-global-overlay-wrapper` it creates around this component, from its own prebuilt CSS.
+ * This class only lays out the toast stack *within* that wrapper.
+ */
 .toast-container {
-  @apply fixed flex flex-col gap-3 max-w-[calc(100vw-2rem)];
-  /* Make sure nothing in the app sits above the toast + allow only toast items to capture clicks */
-  z-index: 2147483647 !important;
+  @apply flex flex-col gap-3 max-w-[calc(100vw-2rem)];
   pointer-events: none;
 }
 
-/* ── Positions ── */
-.toast-container[data-position="top-right"] {
-  @apply top-4 right-4;
-}
-
-.toast-container[data-position="top-left"] {
-  @apply top-4 left-4;
-}
-
-.toast-container[data-position="top-center"] {
-  @apply top-4 left-1/2 -translate-x-1/2;
-}
-
-.toast-container[data-position="bottom-right"] {
-  @apply bottom-4 right-4;
-}
-
-.toast-container[data-position="bottom-left"] {
-  @apply bottom-4 left-4;
-}
-
-.toast-container[data-position="bottom-center"] {
-  @apply bottom-4 left-1/2 -translate-x-1/2;
+/* Guarantee toasts stack above dialogs/popovers/etc. that also use CDK overlays — CDK's own
+   z-index otherwise just reflects creation order. Targets the pane CDK wraps this panel in. */
+.cdk-overlay-pane.bk-toastr-panel {
+  z-index: 2147483647 !important;
 }
 
 /* ─── Toast item (base) ───────────────────────────────────────────────────── */
@@ -208,11 +193,11 @@
     max-width: 100%;
   }
 
+  /* Center positions hug their own content width and float centered rather than stretching
+     full-bleed like the corner positions — CDK only owns the container's outer placement,
+     this inner alignment is still ours to keep. */
   .toast-container[data-position="top-center"],
   .toast-container[data-position="bottom-center"] {
-    left: 50% !important;
-    right: auto !important;
-    transform: translateX(-50%) !important;
     align-items: center;
   }
 

package/src/styles.css

@@ -1,4 +1,17 @@
 /* Brickclay Component Styles - Tailwind source files */
+/*
+ * CDK Overlay's own base positioning CSS (.cdk-overlay-container/.cdk-overlay-pane/
+ * .cdk-overlay-backdrop position: fixed/absolute rules). bk-dialog and every CDK-Overlay-based
+ * control (bk-select, bk-input's phone dropdown, bk-hierarchical-select, ...) rely on it —
+ * without it, the position strategy sets top/left via JS on elements that have no positioning
+ * base rule, so nothing actually moves. Bundled here (not left for each consumer to add to their
+ * own angular.json) so it ships automatically with the package: any app already importing this
+ * file gets it for free. A bare specifier (not a relative path) is deliberate — this file is
+ * consumed from two different depths (this workspace's own `projects/brickclay-lib/src/`, and,
+ * once published, `<consumer>/node_modules/@brickclay-org/ui/src/`), and only Node-style
+ * resolution (walk up until `node_modules/@angular/cdk` is found) works correctly from both.
+ */
+@import '@angular/cdk/overlay-prebuilt.css';
 @import './lib/breadcrumb/breadcrumb.css';
 @import './lib/toggle/toggle.css';
 @import './lib/checkbox/checkbox.css';