@brickclay-org/ui 0.1.68 → 0.1.69

package/index.d.ts

@@ -866,7 +866,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     disabled: i0.ModelSignal<boolean>;
     loading: i0.InputSignal<boolean>;
     closeOnSelect: i0.InputSignal<boolean>;
-    dropdownPosition: i0.InputSignal<"top" | "bottom">;
+    dropdownPosition: i0.InputSignal<"bottom" | "top">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: i0.InputSignal<boolean>;
@@ -1963,7 +1963,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
     appendToBody: i0.InputSignal<boolean>;
     /** Open above or below the trigger (also used when appendToBody is true for fixed coordinates). */
-    dropdownPosition: i0.InputSignal<"top" | "bottom">;
+    dropdownPosition: i0.InputSignal<"bottom" | "top">;
     /** Key for option color (e.g. "color"). When set, option label and selected value use this color. */
     colorKey: i0.InputSignal<string>;
     /** Whether to show clear button when a value is selected. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "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;
+}