@brickclay-org/ui 0.1.77 → 0.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.77",
+  "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/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;
@@ -22,6 +28,9 @@
   --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;
@@ -30,6 +39,12 @@
   /* 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;
 
@@ -48,6 +63,7 @@
   --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;
@@ -55,6 +71,8 @@
   --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;
 }
@@ -129,6 +147,16 @@
 /* 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 {
@@ -136,28 +164,44 @@
 }
 
 /* ---- Group title: names the child group, not selectable.
-   Reads as a heading over the rows rather than one of them: outdented a notch
-   from the row text, and separated from the group by a rule. Inline and pop-up
-   are meant to look identical — the pop-up rules further down only cancel out
-   the panel's own padding to get there. ---- */
+   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
-    border-b border-[var(--menu-border)] mb-1;
+    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; the title's rule is
-   supposed to span it edge to edge, so pull it back out and pad the text back in.
-   Net indent and rule width then match the inline case exactly. */
+/* 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);
-  padding-left: calc(var(--menu-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad));
-  padding-right: calc(var(--menu-pad-x) + var(--menu-popup-pad));
+  /* +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. ---- */
@@ -216,16 +260,24 @@
   @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. */
+  /* 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 bg-[var(--menu-bg)] border border-[var(--menu-border)]
+    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);
+  padding: var(--menu-popup-pad-y) var(--menu-popup-pad);
   min-width: var(--menu-popup-min-w);
   max-width: var(--menu-popup-max-w);
 }