@brickclay-org/ui 0.1.67 → 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>;
@@ -1104,6 +1104,21 @@ declare class BkInputChips implements ControlValueAccessor, AfterViewInit {
 }
 
 type TabIconDirection = 'left' | 'right';
+type TabsOrientation = 'horizontal' | 'vertical';
+type TabsVariant = 'default' | 'segmented';
+/**
+ * Per-usage CSS classes for the 'segmented' variant.
+ * Pass Tailwind classes (not raw colors). Because the component uses
+ * emulated encapsulation, its default color rules out-specify plain
+ * utilities — so use the important prefix, e.g. '!bg-white', '!text-black'.
+ * Any field left undefined keeps the default design token from tabs.css.
+ */
+interface TabsColors {
+    wrapper?: string;
+    active?: string;
+    activeText?: string;
+    inactive?: string;
+}
 interface TabItem {
     id: string;
     label: string;
@@ -1120,12 +1135,19 @@ declare class BkTabs {
     list: TabItem[];
     activeTabId: string;
     disabled: boolean;
+    orientation: TabsOrientation;
+    variant: TabsVariant;
+    colors: TabsColors;
+    get isVertical(): boolean;
+    get isSegmented(): boolean;
+    get wrapperClass(): string;
+    segmentedTabClass(tab: TabItem): string;
     change: EventEmitter<TabItem>;
     setActiveTab(tab: TabItem): void;
     isActive(tabId: string): boolean;
     getTabIcon(tab: TabItem): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkTabs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkTabs, "bk-tabs", never, { "list": { "alias": "list"; "required": false; }; "activeTabId": { "alias": "activeTabId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkTabs, "bk-tabs", never, { "list": { "alias": "list"; "required": false; }; "activeTabId": { "alias": "activeTabId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }
 
 /**
@@ -1941,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. */
@@ -2290,5 +2312,76 @@ declare class BkLoader {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkLoader, "bk-loader", never, { "loading": { "alias": "loading"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
-export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkLoaderVariant, BkPageSize, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, CustomRangesConfig, DotPosition, DotStatus, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+type DropdownVariant = 'black' | 'white';
+type DropdownSize = 'sm' | 'md' | 'lg';
+type DropdownTrigger = 'click' | 'hover';
+type DropdownPlacement = 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+interface DropdownItem {
+    id?: string | number;
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+    divider?: boolean;
+    children?: DropdownItem[];
+}
+declare class BkDropdown {
+    private readonly host;
+    /** Text shown on the trigger button. */
+    label: string;
+    /** Menu items (supports divider / disabled / children). */
+    items: DropdownItem[];
+    /** Black (dark) or white (light, bordered) — mirrors the segment-tab look. */
+    variant: DropdownVariant;
+    /** Trigger size. */
+    size: DropdownSize;
+    /** Open on click or on hover. */
+    trigger: DropdownTrigger;
+    /** One of 6 placements for the menu. */
+    placement: DropdownPlacement;
+    /** Show the caret (▾) on the trigger. Rotates when open. */
+    arrow: boolean;
+    /** Split button: a primary action + a separate caret that opens the menu. */
+    splitButton: boolean;
+    /** Currently selected item id — the matching item shows a tick. */
+    selectedId?: string | number;
+    /** Disable the whole control. */
+    disabled: boolean;
+    /** Optional leading icon on the trigger. */
+    iconSrc?: string;
+    /** Extra classes appended to the trigger button. */
+    customClass: string;
+    /** Emits when a (non-disabled) leaf item is chosen. */
+    select: EventEmitter<DropdownItem>;
+    /** Emits the open/closed state whenever it changes. */
+    openChange: EventEmitter<boolean>;
+    /** Split button primary-action click. */
+    buttonClick: EventEmitter<Event>;
+    open: boolean;
+    private closeTimer;
+    constructor(host: ElementRef<HTMLElement>);
+    toggle(): void;
+    onPrimaryClick(event: Event): void;
+    selectItem(item: DropdownItem, event: Event): void;
+    isSelected(item: DropdownItem): boolean;
+    get hasSubmenus(): boolean;
+    private setOpen;
+    onHoverEnter(): void;
+    onHoverLeave(): void;
+    /**
+     * When a parent item is hovered, decide whether its submenu should open to
+     * the right (default) or flip to the left if it would overflow the viewport.
+     */
+    onSubmenuEnter(event: MouseEvent): void;
+    private clearCloseTimer;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    get triggerClasses(): string;
+    get caretSizeClass(): string;
+    /** Position classes for the menu panel per placement. */
+    get menuPositionClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkDropdown, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkDropdown, "bk-dropdown", never, { "label": { "alias": "label"; "required": false; }; "items": { "alias": "items"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "arrow": { "alias": "arrow"; "required": false; }; "splitButton": { "alias": "splitButton"; "required": false; }; "selectedId": { "alias": "selectedId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "select": "select"; "openChange": "openChange"; "buttonClick": "buttonClick"; }, never, never, true, never>;
+}
+
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkLoaderVariant, BkPageSize, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json

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

package/src/lib/tabs/tabs.css

@@ -3,14 +3,23 @@
   @apply w-full;
 }
 
-/* Tabs List */
+/* Tabs List
+   Grid layout: columns flow horizontally and size to content
+   (auto-cols-max), matching the old flex row while giving grid control. */
 .tabs-list {
-  @apply flex gap-0 list-none m-0 px-0 py-0.5;
+  @apply grid grid-flow-col auto-cols-max gap-0 list-none m-0 px-0 py-0.5;
 }
 
 /* Tab Item */
 .tabs-item {
-  @apply flex-shrink-0;
+  @apply min-w-0;
+}
+
+/* Vertical (default variant): single-column grid = stacked full-width tabs.
+   Defined after the base .tabs-list so grid-flow-row reliably overrides the
+   base grid-flow-col (otherwise items flow into columns = horizontal). */
+.tabs-list--vertical {
+  @apply grid-cols-1 grid-flow-row auto-rows-max;
 }
 
 /* Tab Button - Base Styles */
@@ -62,3 +71,54 @@
   @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). */
+.tabs-container--segmented {
+  @apply p-[3px] rounded-md w-full md:w-auto;
+  background: #54578E12;
+}
+
+/* Pill row — equal-width columns (auto-cols-fr) replace the old flex-1. */
+.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;
+  color: #6B7080;
+}
+
+/* Pill button — min-width keeps short labels even, but lets icon/long
+   labels grow instead of clipping the icon. Default inactive text; override
+   via colors.inactive (use ! classes). */
+.tabs-button--segmented {
+  @apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;
+  color: #6B7080;
+}
+
+/* Pill hover (not on active / disabled) */
+.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active) {
+  border-color: #42578A26;
+  background: #FFFFFF;
+  color: #15191E;
+}
+
+/* Pill active — default colors; override via colors.active / colors.activeText
+   (use ! classes, which out-specify this scoped rule). */
+.tabs-button--segmented.tabs-button--active {
+  background: #FFFFFF;
+  color: #15191E;
+}
+
+/* Segmented + vertical: single-column grid = stacked full-width pills.
+   Placed after the base segmented rules so it wins on equal specificity. */
+.tabs-list--segmented-vertical {
+  @apply grid-cols-1 grid-flow-row auto-rows-max gap-1;
+}
+
+/* Left-align pill content in the vertical segmented layout */
+.tabs-list--segmented-vertical .tabs-button--segmented {
+  @apply justify-start text-left;
+}

package/src/styles.css

@@ -25,3 +25,4 @@
 @import './lib/file-card/file-card.css';
 @import './lib/pagination/pagination.css';
 @import './lib/loader/loader.css';
+@import './lib/dropdown/dropdown.css';