@brickclay-org/ui 0.1.76 → 0.1.78

package/package.json

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

package/src/lib/column-select/components/column-select/column-select.css

@@ -6,9 +6,10 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  max-height: 225px;
 }
 
-@media (max-height: 700px) {
+/* @media (max-height: 700px) {
   .column-select-options-list {
     max-height: 125px;
   }
@@ -24,4 +25,4 @@
   .column-select-options-list {
     max-height: 210px;
   }
-}
+} */

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

@@ -16,7 +16,7 @@
 }
 
 .hierarchical-select-control.disabled {
-  @apply cursor-not-allowed opacity-60;
+  @apply cursor-not-allowed;
   /* !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;
@@ -164,6 +164,16 @@
   @apply flex-shrink-0 text-[#141414];
 }
 
+/* Selects the parent; the rest of the row still navigates into it. */
+.hierarchical-option-checkbox {
+  @apply flex-shrink-0 flex items-center cursor-pointer;
+}
+
+/* Matches the sm checkbox (16px) so childless rows keep the column aligned. */
+.hierarchical-option-checkbox-spacer {
+  @apply flex-shrink-0 w-4;
+}
+
 .hierarchical-option-empty {
   @apply px-3 py-2 text-gray-400 cursor-default text-sm;
 }

package/src/lib/input/input.css

@@ -258,3 +258,91 @@
 .input-container ::-webkit-scrollbar-thumb:hover {
   background: #909090;
 }
+
+/* ============================== Compact / sm size ============================== */
+.input-container--sm .input-label {
+  @apply text-xs;
+}
+
+.input-container--sm .input-hint,
+.input-container--sm .input-error {
+  @apply text-[11px];
+}
+
+.input-container--sm .input-field {
+  @apply py-1.5 px-2.5 text-xs;
+  height: 32px;
+}
+
+.input-container--sm .input-field--icon,
+.input-container--sm .input-field--icon-left {
+  @apply pl-8;
+}
+
+.input-container--sm .input-field--icon-right {
+  @apply pr-8;
+}
+
+.input-container--sm .input-field--password {
+  @apply pr-8;
+}
+
+.input-container--sm .input-field--phone {
+  @apply pl-16;
+}
+
+.input-container--sm .input-field--url {
+  @apply pl-16;
+}
+
+.input-container--sm .input-field--icon.input-field--url {
+  @apply pl-24;
+}
+
+.input-container--sm .input-field--phone.input-field--icon {
+  @apply pl-24;
+}
+
+.input-container--sm .input-search-icon {
+  @apply w-4 h-4;
+}
+
+.input-container--sm .input-search-icon--left {
+  @apply left-2;
+}
+
+.input-container--sm .input-search-icon--right {
+  @apply right-2;
+}
+
+.input-container--sm .input-password-toggle {
+  @apply right-2 w-4 h-4;
+}
+
+.input-container--sm .input-password-icon {
+  @apply w-4 h-4;
+}
+
+.input-container--sm .input-phone-selector {
+  @apply px-2;
+}
+
+.input-container--sm .input-phone-selector-text {
+  @apply text-[11px];
+}
+
+.input-container--sm .input-url-prefix {
+  @apply py-1.5 px-2.5 text-xs;
+}
+
+.input-container--sm .input-phone-dropdown {
+  @apply w-[68px] mt-0.5;
+}
+
+.input-container--sm .input-phone-dropdown-item {
+  @apply px-3 py-1.5 text-[11px];
+}
+
+.input-container--sm .input-phone-selector-arrow {
+  @apply w-3 h-3;
+}

package/src/lib/menu/menu.css

@@ -7,6 +7,12 @@
 
 .bk-menu {
   --menu-bg: #ffffff;
+  /* Lightest gray — opt-in tint for an inline submenu's whole block (title +
+     rows) via [submenuBackground]="true". One shade lighter than
+     --menu-hover-bg, so a hovered row inside it still reads. Popups don't
+     offer this: their padding/insets differ, and the panel's own border
+     already sets it apart from the page. */
+  --menu-submenu-bg: #f8f8f8;
   --menu-text: #141414;
   --menu-subtext: #6b7080;
   --menu-hover-bg: #edeef0;
@@ -18,11 +24,57 @@
   --menu-radius: 8px;
   --menu-disabled: 0.5;
 
+  /* Metrics — the compact variant below is nothing but a second set of these. */
+  --menu-font-size: 14px;
+  --menu-tracking: -0.28px;
+  --menu-pad-y: 10px;
+  /* Submenu rows (inline and pop-up) sit a touch tighter vertically than
+     top-level rows. */
+  --menu-submenu-pad-y: 8px;
+  --menu-pad-x: 12px;
+  --menu-gap: 8px;
+  --menu-icon-size: 16px;
+  --menu-chevron-size: 16px;
+  --menu-group-font-size: 11px;
+  /* How far a group title sits left of the rows it heads. */
+  --menu-title-outdent: 8px;
+  --menu-popup-pad: 4px;
+  /* Top/bottom inset for the pop-up panel — roomier than the horizontal pad
+     so the first/last row don't sit flush against the panel's rounded edge. */
+  --menu-popup-pad-y: 8px;
+  /* Horizontal padding for a pop-up's own rows and group-title label — wider
+     than the shared --menu-pad-x so pop-up text sits roomier than inline. */
+  --menu-popup-item-pad-x: 16px;
+  --menu-popup-min-w: 200px;
+  --menu-popup-max-w: 280px;
+
   /* 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]
+  @apply block w-full max-w-full font-medium
     bg-[var(--menu-bg)] text-[color:var(--menu-text)]
     border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;
+  font-size: var(--menu-font-size);
+  letter-spacing: var(--menu-tracking);
+}
+
+/* ---- Compact variant: same menu, tighter type and spacing. ---- */
+.bk-menu--compact {
+  --menu-radius: 6px;
+  --menu-font-size: 12px;
+  --menu-tracking: -0.24px;
+  --menu-pad-y: 6px;
+  --menu-submenu-pad-y: 4px;
+  --menu-pad-x: 8px;
+  --menu-gap: 6px;
+  --menu-icon-size: 14px;
+  --menu-chevron-size: 14px;
+  --menu-group-font-size: 10px;
+  --menu-title-outdent: 6px;
+  --menu-popup-pad: 3px;
+  --menu-popup-pad-y: 6px;
+  --menu-popup-item-pad-x: 14px;
+  --menu-popup-min-w: 160px;
+  --menu-popup-max-w: 240px;
 }
 
 /* ---- Lists ---- */
@@ -49,11 +101,13 @@
 }
 
 .bk-menu__button {
-  @apply flex items-center gap-2 w-full py-2.5 px-3 m-0 border-0
+  @apply flex items-center w-full m-0 border-0
     bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap
     transition-colors duration-100;
   font: inherit;
   letter-spacing: inherit;
+  gap: var(--menu-gap);
+  padding: var(--menu-pad-y) var(--menu-pad-x);
 }
 
 .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button {
@@ -93,15 +147,68 @@
 /* Nested (child) items use the muted sub-text colour. */
 .bk-menu__submenu .bk-menu__button {
   @apply text-[color:var(--menu-subtext)] font-normal;
+  padding-top: var(--menu-submenu-pad-y);
+  padding-bottom: var(--menu-submenu-pad-y);
+}
+
+/* Pop-up rows get their own, roomier horizontal padding (see
+   --menu-popup-item-pad-x) instead of the shared --menu-pad-x — vertical
+   padding is untouched, inherited from the base .bk-menu__button rule. */
+.bk-menu__submenu--popup .bk-menu__button {
+  padding-left: var(--menu-popup-item-pad-x);
+  padding-right: var(--menu-popup-item-pad-x);
 }
 
 .bk-menu__submenu .bk-menu__button--active {
   @apply text-[color:var(--menu-active-text)];
 }
 
+/* ---- Group title: names the child group, not selectable.
+   Reads as a heading over the rows it titles, not a rule under itself — a
+   group is only ever separated from what comes *after* it (the next group,
+   if any), never from its own rows. See the `--divider` modifier below. ---- */
+.bk-menu__group-title {
+  @apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)]
+    whitespace-nowrap overflow-hidden text-ellipsis select-none;
+  font-size: var(--menu-group-font-size);
+  padding: var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);
+  /* Inline levels set padding-left themselves, indent-aware, from the template. */
+  padding-left: calc(var(--menu-pad-x) - var(--menu-title-outdent));
+}
+
+/* The panel is padded so its rows sit in from the border; a divider rule (see
+   `--divider` below) is supposed to span it edge to edge, so pull the title
+   back out to the edge and pad the text back in. Net indent then matches the
+   inline case exactly regardless of whether this particular title has one. */
+.bk-menu__submenu--popup > .bk-menu__group-title {
+  margin-left: calc(var(--menu-popup-pad) * -1);
+  margin-right: calc(var(--menu-popup-pad) * -1);
+  /* +2px on top of the row's own inset — a touch roomier than the rows it titles. */
+  padding-left: calc(var(--menu-popup-item-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad) + 2px);
+  padding-right: calc(var(--menu-popup-item-pad-x) + var(--menu-popup-pad) + 2px);
+}
+
+/* ---- Flat multi-group sections (MenuItem.groupLabel): several named groups
+   inside one always-visible list, e.g. a mega-menu. Extra breathing room
+   above each section's own heading, since it follows another group's rows. ---- */
+.bk-menu__group-title--section {
+  @apply mb-0 tracking-wide;
+  padding-top: calc(var(--menu-pad-y) * 1.25);
+}
+
+/* The rule that actually separates one group from the next — applied only
+   when a group has a preceding sibling group (never under a lone title, and
+   never trailing after the last group). */
+.bk-menu__group-title--divider {
+  @apply border-t border-[var(--menu-border)];
+  margin-top: calc(var(--menu-pad-y) / 2);
+}
+
 /* ---- Icon (optional). Tinted monochrome when .bk-menu--tint. ---- */
 .bk-menu__icon {
-  @apply w-4 h-4 shrink-0 object-contain;
+  @apply shrink-0 object-contain;
+  width: var(--menu-icon-size);
+  height: var(--menu-icon-size);
 }
 
 .bk-menu--tint .bk-menu__icon {
@@ -124,6 +231,8 @@
 /* ---- Chevron ---- */
 .bk-menu__chevron {
   @apply shrink-0 opacity-80 transition-transform duration-[180ms];
+  width: var(--menu-chevron-size);
+  height: var(--menu-chevron-size);
 }
 
 /* Inline: rotate down → up on open. */
@@ -131,11 +240,15 @@
   @apply rotate-180;
 }
 
-/* Pop-up fly-out: static caret pointing to where the panel opens (right). */
+/* Pop-up fly-out: static caret pointing at the side the panel opens on. */
 .bk-menu__chevron--right {
   @apply -rotate-90;
 }
 
+.bk-menu__chevron--left {
+  @apply rotate-90;
+}
+
 /* =========================================================================
    Inline submenus (accordion) — expand in place.
    ========================================================================= */
@@ -147,32 +260,43 @@
   @apply max-h-[1000px]; /* large enough to reveal nested content */
 }
 
+/* Opt-in tint, set via [submenuBackground]="true" — see --menu-submenu-bg above. */
+.bk-menu__submenu--inline.bk-menu__submenu--bg {
+  background-color: var(--menu-submenu-bg);
+}
+
 /* =========================================================================
    Pop-up submenus — floating panels, hidden until open.
    ========================================================================= */
 .bk-menu__submenu--popup {
   /* 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;
+  /* max-width/max-height below are the ceiling; menu.ts narrows them inline to
+     whatever room the viewport actually leaves, and the panel scrolls past it.
+     overflow-x is hidden because rows ellipsise rather than widen the panel. */
+  @apply fixed z-[1000] max-h-[calc(100vh-16px)]
+    overflow-y-auto overflow-x-hidden bg-[var(--menu-bg)] border border-[var(--menu-border)]
+    rounded-xl shadow-[var(--menu-shadow)] hidden;
+  padding: var(--menu-popup-pad-y) var(--menu-popup-pad);
+  min-width: var(--menu-popup-min-w);
+  max-width: var(--menu-popup-max-w);
 }
 
 .bk-menu__submenu--popup.bk-menu__submenu--open {
   @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: '';
-  @apply absolute top-0 left-[-6px] w-1.5 h-full;
-}
-.bk-menu__submenu--popup-down::before {
-  content: '';
-  @apply absolute top-[-6px] left-0 w-full h-1.5;
+/* Open but not yet measured: on-screen so its size can be read, invisible so
+   the estimated position never flashes before the real one lands. */
+.bk-menu__submenu--placing {
+  @apply opacity-0 pointer-events-none;
 }
 
+/* The gap between a parent and its fly-out is dead space the pointer has to
+   cross, and crossing it fires mouseleave. An invisible bridge element can't
+   span it — the panel is a scroll container, so anything at a negative offset
+   is clipped — so hover mode closes on a short delay instead (see menu.ts). */
+
 /* =========================================================================
    Responsive: a horizontal menu STAYS horizontal on small screens and scrolls
    sideways when the items don't fit (overflow-x: auto). Items keep their