@brickclay-org/ui 0.1.68 → 0.1.70

package/package.json

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

package/src/lib/dropdown/dropdown.css

@@ -0,0 +1,156 @@
+/* Root — anchor for the absolutely-positioned menu */
+.bk-dd {
+    @apply relative inline-block;
+}
+
+/* =======================================================
+   Trigger button — mirrors app-button (rounded, medium,
+   bordered) with black / white variants and sizes.
+   ======================================================= */
+.bk-dd-trigger {
+    @apply inline-flex items-center justify-center gap-1.5 border rounded-md font-medium cursor-pointer transition-colors duration-100 outline-none whitespace-nowrap tracking-[-0.28];
+}
+
+/* Sizes */
+.bk-dd-trigger--sm {
+    @apply text-xs px-2.5 py-1.5 leading-3;
+}
+
+.bk-dd-trigger--md {
+    @apply text-sm px-3 py-2 leading-[14px];
+}
+
+.bk-dd-trigger--lg {
+    @apply text-base px-4 py-2.5 leading-4;
+}
+
+/* Black variant (like the active segment tab) */
+.bk-dd-trigger--black {
+    @apply bg-[#141414] text-white border-transparent;
+}
+
+.bk-dd-trigger--black:hover:not(:disabled) {
+    @apply bg-[#2A2A2A];
+}
+
+/* White variant (light, bordered — like an inactive segment tab) */
+.bk-dd-trigger--white {
+    @apply bg-white text-[#141414] border-[#E3E3E7];
+}
+
+.bk-dd-trigger--white:hover:not(:disabled) {
+    @apply bg-[#F9FAFA];
+}
+
+/* Disabled */
+.bk-dd-trigger--disabled {
+    @apply opacity-50 cursor-not-allowed;
+}
+
+.bk-dd-label {
+    @apply whitespace-nowrap;
+}
+
+/* Caret rotates 180° when the menu is open */
+.bk-dd-caret {
+    @apply transition-transform duration-200;
+}
+
+.bk-dd--open .bk-dd-caret {
+    @apply rotate-180;
+}
+
+/* =======================================================
+   Split button (Button with dropdown menu)
+   ======================================================= */
+.bk-dd-split {
+    @apply inline-flex items-stretch;
+}
+
+/* main action: square off the right corners */
+.bk-dd-split-main {
+    @apply rounded-r-none;
+}
+
+/* caret side: square off the left corners + a divider seam */
+.bk-dd-split-caret {
+    @apply rounded-l-none border-l-0 px-2;
+}
+
+.bk-dd-split-caret.bk-dd-trigger--black {
+    @apply border-l border-l-[#2A2A2A];
+}
+
+.bk-dd-split-caret.bk-dd-trigger--white {
+    @apply border-l border-l-[#E3E3E7];
+}
+
+.bk-dd-split--disabled {
+    @apply opacity-50 pointer-events-none;
+}
+
+/* =======================================================
+   Menu panel — matches the bk-select dropdown panel look.
+   ======================================================= */
+.bk-dd-menu {
+    @apply absolute z-[100] min-w-[10rem] max-w-[16rem] bg-white border border-[#E3E3E7] rounded-xl shadow-lg p-2.5;
+}
+
+.bk-dd-list {
+    @apply relative z-10 list-none m-0 p-0 flex flex-col gap-0.5;
+}
+
+/* Scroll only when there are no submenus (see hasSubmenus). */
+.bk-dd-list--scroll {
+    @apply max-h-[16rem] overflow-y-auto;
+}
+
+/* Menu item */
+.bk-dd-li {
+    @apply relative;
+}
+
+.bk-dd-item {
+    @apply flex items-center gap-2 w-full text-left p-2.5 rounded-md text-sm font-normal text-[#141414] bg-transparent cursor-pointer transition-colors;
+}
+
+.bk-dd-item:hover:not(:disabled) {
+    @apply bg-[#F8F8F8];
+}
+
+.bk-dd-item--disabled {
+    @apply opacity-50 cursor-not-allowed;
+}
+
+.bk-dd-item-label {
+    @apply flex-1 min-w-0 truncate;
+}
+
+.bk-dd-item-caret {
+    @apply text-[#6B7080];
+}
+
+.bk-dd-check {
+    @apply text-[#141414];
+}
+
+/* Divider — span the panel padding */
+.bk-dd-divider {
+    @apply -mx-2.5 h-px bg-[#E3E3E7];
+}
+
+/* =======================================================
+   Cascading submenu — revealed on hover of a parent item
+   ======================================================= */
+.bk-dd-submenu {
+    @apply absolute top-0 left-full ml-1 hidden min-w-[10rem] max-w-[16rem] list-none m-0 p-2.5 flex-col gap-0.5 bg-white border border-[#E3E3E7] rounded-xl shadow-lg;
+}
+
+.bk-dd-li--parent:hover>.bk-dd-submenu {
+    @apply flex;
+}
+
+/* Flip to the left when there isn't room on the right (class set via JS on hover). */
+.bk-dd-submenu--flip>.bk-dd-submenu {
+    @apply left-auto right-full ml-0 mr-1;
+}

package/src/lib/tabs/tabs.css

@@ -7,7 +7,7 @@
    Grid layout: columns flow horizontally and size to content
    (auto-cols-max), matching the old flex row while giving grid control. */
 .tabs-list {
-  @apply grid grid-flow-col auto-cols-max gap-0 list-none m-0 px-0 py-0.5;
+  @apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;
 }
 
 /* Tab Item */
@@ -29,9 +29,14 @@
 }
 
 /* Tab Button - Hover State */
-/* .tabs-button:hover:not(:disabled):not(.tabs-button--active) {
-  @apply text-[#141414] bg-[#F9FAFA];
-} */
+.tabs-button:hover:not(:disabled):not(.tabs-button--active) {
+  @apply text-[#141414] bg-[#EDEEF0];
+}
+
+/* Vertical (default variant): 9px top/bottom padding on stacked tabs */
+.tabs-list--vertical .tabs-button {
+  @apply py-[9px];
+}
 
 /* Tab Button - Active State */
 .tabs-button--active {
@@ -71,22 +76,26 @@
   @apply whitespace-nowrap;
 }
 
-
 /* =========================================================
    Segmented variant (pill-in-a-track)
    Colors are driven by CSS vars set per-usage via [colors],
    falling back to the default design tokens.
    ========================================================= */
 
-/* Track / wrapper — default background; override via colors.wrapper (use ! classes). */
+/* Track / wrapper — default background; override via colors.wrapper (use ! classes).
+   overflow-x-auto lets the pill row scroll horizontally when there are more
+   tabs than fit, instead of squishing them until the labels overlap. */
 .tabs-container--segmented {
-  @apply p-[3px] rounded-md w-full md:w-auto;
+  @apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;
   background: #54578E12;
 }
 
-/* Pill row — equal-width columns (auto-cols-fr) replace the old flex-1. */
+/* Pill row — columns are minmax(max-content, 1fr): they share the track
+   equally while they fit (like the old auto-cols-fr), but never shrink below
+   their content, so a long list overflows the track and scrolls. */
 .tabs-list--segmented {
-  @apply grid grid-flow-col auto-cols-fr items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;
+  @apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;
+  grid-auto-columns: minmax(max-content, 1fr);
   color: #6B7080;
 }
 
@@ -121,4 +130,6 @@
 /* Left-align pill content in the vertical segmented layout */
 .tabs-list--segmented-vertical .tabs-button--segmented {
   @apply justify-start text-left;
-}
+}
+
+/* Testing */