@brickclay-org/ui 0.1.72 → 0.1.74

package/package.json

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

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

@@ -16,7 +16,12 @@
 }
 
 .hierarchical-select-control.disabled {
-  @apply bg-[#F4F4F6] cursor-not-allowed opacity-60;
+  @apply cursor-not-allowed opacity-60;
+  /* !important beats the inline accent (showDots): a disabled control must read
+     as disabled even when a node's colour is applied. */
+  background-color: #f4f4f6 !important;
+  border-color: rgb(227 227 231) !important;
+  color: rgb(161 163 174) !important;
 
   .hierarchical-placeholder {
     @apply text-gray-400;
@@ -31,10 +36,26 @@
   @apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;
 }
 
+/* Keeps the dot/avatar on the same line as the w-full label, which would
+   otherwise wrap inside the flex-wrap value container. */
+.hierarchical-value-row {
+  @apply flex items-center gap-1.5 w-full min-w-0;
+}
+
 .hierarchical-value-label {
   @apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;
 }
 
+/* Accent dot (showDots). Background is set inline per node. */
+.hierarchical-dot {
+  @apply inline-block w-2 h-2 rounded-full shrink-0;
+}
+
+/* Leading side of an option row: dot / avatar / label. */
+.hierarchical-option-body {
+  @apply flex items-center gap-2 min-w-0 flex-1;
+}
+
 .hierarchical-actions {
   @apply flex items-center gap-2 flex-shrink-0;
 }
@@ -82,10 +103,6 @@
   @apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;
 }
 
-.hierarchical-search-input:-moz-focusring {
-  outline: none;
-}
-
 .hierarchical-back {
   @apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;
 }
@@ -124,9 +141,11 @@
   }
 }
 
-.hierarchical-option:hover,
+.hierarchical-option:hover{
+  @apply bg-[#f9f9f9];
+}
 .hierarchical-option.selected {
-  @apply bg-[#F8F8F8];
+  @apply bg-[#f7f7f7];
 }
 
 .hierarchical-option.selected.disabled-item {
@@ -191,6 +210,8 @@
 }
 
 
+/* !important beats the inline accent border (showDots): an errored control must
+   read as errored even when a node's colour is tinting it. */
 .hierarchical-select-control.hierarchical-select-control-has-error {
-  @apply border-[#d11e14];
+  border-color: #d11e14 !important;
 }

package/src/lib/menu/menu.css

@@ -2,6 +2,7 @@
    bk-menu — simple responsive navigation menu.
    Single light theme, matching the default bk-tabs styling:
    text #141414, hover #EDEEF0, active #141414 bg with white text.
+   Styling uses Tailwind @apply; CSS variables below drive the theme.
    ========================================================================= */
 
 .bk-menu {
@@ -17,239 +18,169 @@
   --menu-radius: 8px;
   --menu-disabled: 0.5;
 
-  display: block;
-  width: 100%;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  letter-spacing: -0.28px;
-  background: var(--menu-bg);
-  color: var(--menu-text);
-  border: 1px solid var(--menu-border);
-  border-radius: var(--menu-radius);
-}
-
-/* Clip rounded corners for inline/default menus. Pop-up menus must NOT clip,
-   otherwise the fly-out panels get cut off at the menu's edge. */
-.bk-menu:not(.bk-menu--popup) {
-  overflow: hidden;
-}
-
-/* Round the first/last top-level buttons in pop-up mode so the active/hover
-   background still respects the menu's corners without clipping fly-outs. */
-.bk-menu--popup.bk-menu--vertical > .bk-menu__list > .bk-menu__item:first-child > .bk-menu__button {
-  border-radius: 8px 8px 0 0;
-}
-.bk-menu--popup.bk-menu--vertical > .bk-menu__list > .bk-menu__item:last-child > .bk-menu__button {
-  border-radius: 0 0 8px 8px;
-}
-.bk-menu--popup.bk-menu--horizontal > .bk-menu__list > .bk-menu__item:first-child > .bk-menu__button {
-  border-radius: 8px 0 0 8px;
-}
-.bk-menu--popup.bk-menu--horizontal > .bk-menu__list > .bk-menu__item:last-child > .bk-menu__button {
-  border-radius: 0 8px 8px 0;
+  /* Safe to clip to rounded corners: pop-up fly-outs are position:fixed and
+     escape this box entirely, so nothing gets cut off. */
+  @apply block w-full max-w-full text-sm font-medium tracking-[-0.28px]
+    bg-[var(--menu-bg)] text-[color:var(--menu-text)]
+    border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;
 }
 
 /* ---- Lists ---- */
 .bk-menu__list,
 .bk-menu__submenu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  @apply list-none m-0 p-0;
 }
 
-/* Horizontal top-level row (menubar). */
-.bk-menu--horizontal > .bk-menu__list {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
+/* Scroll container: vertical scroll past max-height, horizontal scroll if a
+   deeply-indented inline row is wider than the menu. Fixed fly-outs escape it. */
+.bk-menu__list--scroll {
+  @apply overflow-auto;
 }
 
-/* Scroll a crowded row only when NOT in pop-up mode — `overflow-x: auto`
-   forces `overflow-y` to `auto`, which would clip the drop-down fly-outs. */
-.bk-menu--horizontal:not(.bk-menu--popup) > .bk-menu__list {
-  overflow-x: auto;
+/* Horizontal top-level row (menubar). Scrolls when crowded — fixed fly-outs are
+   unaffected by the overflow. */
+.bk-menu--horizontal > .bk-menu__list {
+  @apply flex flex-row items-stretch overflow-x-auto;
 }
 
 /* ---- Item / button ---- */
 .bk-menu__item {
-  position: relative; /* anchor for pop-up submenus */
+  @apply relative; /* anchor for pop-up submenus */
 }
 
 .bk-menu__button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  margin: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
+  @apply flex items-center gap-2 w-full py-2.5 px-3 m-0 border-0
+    bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap
+    transition-colors duration-100;
   font: inherit;
   letter-spacing: inherit;
-  text-align: left;
-  cursor: pointer;
-  white-space: nowrap;
-  border-radius: 6px;
-  transition: background 0.1s ease, color 0.1s ease;
 }
 
 .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button {
-  width: auto;
+  @apply w-auto;
+}
+
+/* ---- Edge rounding: make the first/last top-level items' outer corners match
+   the container so hover/active fills sit flush in the rounded corners.
+   Vertical = column → first rounds the top, last rounds the bottom.
+   Horizontal = row → first rounds the left, last rounds the right. ---- */
+.bk-menu--vertical > .bk-menu__list > .bk-menu__item:first-child > .bk-menu__button {
+  @apply rounded-t-[var(--menu-radius)];
+}
+.bk-menu--vertical > .bk-menu__list > .bk-menu__item:last-child > .bk-menu__button {
+  @apply rounded-b-[var(--menu-radius)];
+}
+.bk-menu--horizontal > .bk-menu__list > .bk-menu__item:first-child > .bk-menu__button {
+  @apply rounded-l-[var(--menu-radius)];
+}
+.bk-menu--horizontal > .bk-menu__list > .bk-menu__item:last-child > .bk-menu__button {
+  @apply rounded-r-[var(--menu-radius)];
 }
 
 .bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active) {
-  background: var(--menu-hover-bg);
-  color: var(--menu-hover-text);
+  @apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];
 }
 
 .bk-menu__button--active {
-  background: var(--menu-active-bg);
-  color: var(--menu-active-text);
+  @apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];
 }
 
 .bk-menu__button--disabled,
 .bk-menu__button:disabled {
-  opacity: var(--menu-disabled);
-  cursor: not-allowed;
+  @apply opacity-[var(--menu-disabled)] cursor-not-allowed;
 }
 
 /* Nested (child) items use the muted sub-text colour. */
 .bk-menu__submenu .bk-menu__button {
-  color: var(--menu-subtext);
-  font-weight: 400;
+  @apply text-[color:var(--menu-subtext)] font-normal;
 }
 
 .bk-menu__submenu .bk-menu__button--active {
-  color: var(--menu-active-text);
+  @apply text-[color:var(--menu-active-text)];
 }
 
 /* ---- Icon (optional). Tinted monochrome when .bk-menu--tint. ---- */
 .bk-menu__icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  object-fit: contain;
+  @apply w-4 h-4 shrink-0 object-contain;
 }
 
 .bk-menu--tint .bk-menu__icon {
-  filter: brightness(0) saturate(0); /* → near-black, matches #141414 text */
+  @apply [filter:brightness(0)_saturate(0)]; /* → near-black, matches #141414 text */
 }
 
 /* Active row has a dark background → force a white icon for contrast. */
 .bk-menu--tint .bk-menu__button--active .bk-menu__icon {
-  filter: brightness(0) invert(1);
+  @apply [filter:brightness(0)_invert(1)];
 }
 
 .bk-menu__label {
-  flex: 1 1 auto;
-  min-width: 0;
+  @apply flex-auto min-w-0 overflow-hidden text-ellipsis;
 }
 
 .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button > .bk-menu__label {
-  flex: 0 0 auto;
+  @apply flex-none overflow-visible;
 }
 
 /* ---- Chevron ---- */
 .bk-menu__chevron {
-  flex-shrink: 0;
-  transition: transform 0.18s ease;
-  opacity: 0.8;
+  @apply shrink-0 opacity-80 transition-transform duration-[180ms];
 }
 
 /* Inline: rotate down → up on open. */
 .bk-menu__chevron--open {
-  transform: rotate(180deg);
+  @apply rotate-180;
 }
 
 /* Pop-up fly-out: static caret pointing to where the panel opens (right). */
 .bk-menu__chevron--right {
-  transform: rotate(-90deg);
+  @apply -rotate-90;
 }
 
 /* =========================================================================
    Inline submenus (accordion) — expand in place.
    ========================================================================= */
 .bk-menu__submenu--inline {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.2s ease;
+  @apply overflow-hidden max-h-0 transition-[max-height] duration-200;
 }
 
 .bk-menu__submenu--inline.bk-menu__submenu--open {
-  max-height: 1000px; /* large enough to reveal nested content */
+  @apply max-h-[1000px]; /* large enough to reveal nested content */
 }
 
 /* =========================================================================
    Pop-up submenus — floating panels, hidden until open.
    ========================================================================= */
 .bk-menu__submenu--popup {
-  position: absolute;
-  z-index: 50;
-  min-width: 200px;
-  background: var(--menu-bg);
-  border: 1px solid var(--menu-border);
-  border-radius: 12px;
-  box-shadow: var(--menu-shadow);
-  padding: 4px;
-  display: none;
+  /* Fixed so the fly-out escapes the menu's overflow/scroll box and renders
+     outside the nav. Coordinates are set inline (top/left) from JS. */
+  @apply fixed z-[1000] min-w-[200px] max-w-[280px] max-h-[calc(100vh-16px)]
+    overflow-y-auto bg-[var(--menu-bg)] border border-[var(--menu-border)]
+    rounded-xl shadow-[var(--menu-shadow)] p-1 hidden;
 }
 
 .bk-menu__submenu--popup.bk-menu__submenu--open {
-  display: block;
-}
-
-/* Fly out to the right (vertical menus and all deeper levels). */
-.bk-menu__submenu--popup-right {
-  top: 0;
-  left: 100%;
-  margin-left: 4px;
-}
-
-/* Drop down below (horizontal top-level items). */
-.bk-menu__submenu--popup-down {
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
+  @apply block;
 }
 
 /* Invisible bridges spanning the gap between a parent and its fly-out, so the
    pointer stays "inside" the item while crossing — prevents hover flicker. */
 .bk-menu__submenu--popup-right::before {
   content: '';
-  position: absolute;
-  top: 0;
-  left: -6px;
-  width: 6px;
-  height: 100%;
+  @apply absolute top-0 left-[-6px] w-1.5 h-full;
 }
 .bk-menu__submenu--popup-down::before {
   content: '';
-  position: absolute;
-  top: -6px;
-  left: 0;
-  width: 100%;
-  height: 6px;
+  @apply absolute top-[-6px] left-0 w-full h-1.5;
 }
 
 /* =========================================================================
-   Responsive: stack a horizontal menu into a vertical one on small screens.
+   Responsive: a horizontal menu STAYS horizontal on small screens and scrolls
+   sideways when the items don't fit (overflow-x: auto). Items keep their
+   natural width so they sit in a clean scrollable row instead of stretching.
    ========================================================================= */
 @media (max-width: 640px) {
   .bk-menu--horizontal > .bk-menu__list {
-    flex-direction: column;
-    overflow-x: visible;
-  }
-  .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button {
-    width: 100%;
-  }
-  /* On small screens, horizontal pop-ups behave like inline sections. */
-  .bk-menu--horizontal .bk-menu__submenu--popup-down {
-    position: static;
-    box-shadow: none;
-    border: 0;
-    margin: 0;
-    border-radius: 0;
+    @apply overflow-x-auto;
+    -webkit-overflow-scrolling: touch;
   }
 }

package/src/lib/select/select.css

@@ -17,14 +17,29 @@
   }
 
   &.bk-focused {
-    @apply border-[#6B7080] shadow-none z-10;
+    @apply shadow-none z-10;
     outline: none !important;
   }
 
+  /* Only an untinted control borrows the neutral focus border; a tinted one
+     keeps its accent border (set inline) so the colour never flicks to grey. */
+  &.bk-focused:not(.bk-filled) {
+    @apply border-[#6B7080];
+  }
+
+  /* Tinted by a selected option (showDots, single-select). The accent supplies
+     its own border, so the default shadow would only muddy it. */
+  &.bk-filled {
+    box-shadow: none;
+  }
+
   &.bk-disabled {
     @apply cursor-not-allowed;
-    border-color: rgb(227 227 231);
-    background-color: rgb(244 244 246);
+    /* !important beats the inline accent: a disabled control must read as
+       disabled even when an option's colour is applied. */
+    border-color: rgb(227 227 231) !important;
+    background-color: rgb(244 244 246) !important;
+    color: rgb(161 163 174) !important;
 
     .bk-placeholder {
       color: rgb(161 163 174);
@@ -40,8 +55,11 @@
   @apply px-3 py-[5px];
 }
 
+/* The error background is applied inline (see controlStyle) so it can replace an
+   option's accent tint. The border can't be: !important is what makes it beat
+   the softer inline border that comes with that tint. */
 .bk-select-control.bk-has-error {
-  @apply border-[#d11e14];
+  border-color: #d11e14 !important;
 }
 
 
@@ -64,8 +82,11 @@
   @apply text-[14px] !leading-[18px];
 }
 
+/* 18px line box, same as the placeholder and the `default` value — otherwise a
+   text-only `sm` row is 16px while a row with an avatar is 18px, and the
+   control resizes as soon as something is selected. */
 .bk-select-container.sm .bk-select-control .bk-value-label-single {
-  @apply text-xs;
+  @apply text-xs !leading-[18px];
 }
 
 /* --- NEW: Multi Select Chips --- */
@@ -101,6 +122,14 @@
   min-width: 0;
 }
 
+/* The 16px avatar is taller than the 12px label, so drop the vertical padding
+   and let it set the chip height: 16 + 2px border = 18px, exactly matching a
+   text-only chip. Without this the row grows the moment showAvatar is on. */
+.bk-multi-badge-item.bk-chip-has-avatar {
+  @apply py-0 ps-0.5;
+  max-width: 140px;
+}
+
 .bk-multi-badge-item-text {
   @apply text-[10px] leading-[12px] font-normal text-[#6B7080];
   white-space: nowrap;
@@ -289,3 +318,15 @@
 .bk-chip-icon {
   @apply w-3 h-3 object-contain rounded-sm;
 }
+
+/* ---- Accent dots (showDots). Background is set inline per option. ---- */
+
+/* Options and the single-select value. */
+.bk-value-dot {
+  @apply inline-block w-2 h-2 rounded-full shrink-0;
+}
+
+/* Multi-select chips — smaller to suit the 18px chip row. */
+.bk-chip-dot {
+  @apply inline-block w-1.5 h-1.5 rounded-full shrink-0;
+}

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

@@ -1,10 +1,13 @@
 /* =========================
    Base Avatar
 ========================= */
+/* No transition here on purpose: bgColor/textColor arrive via [ngStyle] a tick
+   after the element first paints, so `transition-all` made every avatar fade
+   its colours in on render — very visible in a list of options. Nothing on the
+   avatar changes on hover/focus, so the transition bought nothing. */
 .avatar {
   @apply relative inline-flex items-center justify-center
-  rounded-full flex-shrink-0 select-none
-  transition-all duration-200;
+  rounded-full flex-shrink-0 select-none;
 }
 
 .avatar-img {
@@ -18,6 +21,10 @@
 /* =========================
    Sizes (container + text)
 ========================= */
+/* Sized to sit inside an 18px text line box (form controls) without changing
+   the row height. 16px rather than 18px so it also fits a bordered chip
+   (16 + 2px border = 18px) — the same height as a text-only chip. */
+.avatar.xxsm { @apply size-4 text-[8px] leading-[10px]; }
 .avatar.xsm { @apply size-6 text-[10px] leading-[14px]; }
 .avatar.sm  { @apply size-8 text-sm; }
 .avatar.md  { @apply size-10 text-base; }
@@ -28,6 +35,7 @@
 /* =========================
    Placeholder Icon Sizes
 ========================= */
+.avatar.xxsm .placeholder-icon { @apply size-3; }
 .avatar.xsm .placeholder-icon { @apply size-4; }
 .avatar.sm  .placeholder-icon { @apply size-5; }
 .avatar.md  .placeholder-icon { @apply size-6; }
@@ -44,6 +52,7 @@
 }
 
 /* Dot size follows avatar size */
+.avatar.xxsm .avatar-dot { @apply size-1; }
 .avatar.xsm .avatar-dot { @apply size-1; }
 .avatar.sm  .avatar-dot { @apply size-1.5; }
 .avatar.md  .avatar-dot { @apply size-2.5; }
@@ -69,5 +78,3 @@
 .avatar .none {
   @apply hidden;
 }
-
-

package/src/styles.css

@@ -26,3 +26,6 @@
 @import './lib/pagination/pagination.css';
 @import './lib/loader/loader.css';
 @import './lib/dropdown/dropdown.css';
+@import './lib/popover/popover.css';
+@import './lib/menu/menu.css';
+@import './lib/ui-avatar-group/ui-avatar-group.css';