@brickclay-org/ui 0.1.66 → 0.1.68

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<"bottom" | "top">;
+    dropdownPosition: i0.InputSignal<"top" | "bottom">;
     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<"bottom" | "top">;
+    dropdownPosition: i0.InputSignal<"top" | "bottom">;
     /** 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.66",
+  "version": "0.1.68",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

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/lib/toggle/toggle.css

@@ -2,7 +2,7 @@
 .toggle-base {
   @apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;
   /* Focus State (Blue Ring as seen in image) */
-  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;
+  @apply focus:outline-none focus-visible:ring-1 focus-visible:ring-black focus-visible:ring-offset-1;
 }
 
 /* --- Colors --- */
@@ -11,7 +11,7 @@
 }
 
 .toggle-on {
-  @apply bg-[#22973F] hover:bg-[#1E7735]; /* Green when on */
+  @apply bg-gray-800 hover:bg-black; /* Green when on */
 }
 
 /* --- Disabled State (Bottom row of image) --- */
@@ -82,10 +82,10 @@
 }
 
 .simulate-hover.toggle-on {
-  @apply bg-[#1E7735]; /* Matches the hover color defined in .toggle-on */
+  @apply bg-black; /* Matches the hover color defined in .toggle-on */
 }
 
 /* Force Focus Appearance (Blue Ring) */
 .simulate-focus {
-  @apply ring-2 ring-[#1336EF] ring-offset-2;
+  @apply ring-2 ring-black ring-offset-1;
 }

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';