npm - @brickclay-org/ui - Versions diffs - 0.1.71 → 0.1.73 - Mend

@brickclay-org/ui 0.1.71 → 0.1.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/brickclay-org-ui.mjs +382 -19
package/fesm2022/brickclay-org-ui.mjs.map +1 -1
package/index.d.ts +143 -5
package/package.json +1 -1
package/src/assets/icons/alert-circle-red.svg +12 -0
package/src/lib/menu/menu.css +226 -0
package/src/lib/tabs/tabs.css +22 -1

package/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, OnChanges, EventEmitter, ElementRef, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, ChangeDetectorRef } from '@angular/core';
+import { OnInit, OnDestroy, OnChanges, EventEmitter, ElementRef, Renderer2, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, ApplicationRef, EnvironmentInjector, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, NgControl, NgModel } from '@angular/forms';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
@@ -76,6 +76,7 @@ declare class CalendarSelection {
 }
 declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlValueAccessor, Validator {
     private calendarManager;
+    private renderer;
     enableTimepicker: boolean;
     autoApply: boolean;
     closeOnAutoApply: boolean;
@@ -205,7 +206,25 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlV
     private unregisterFn?;
     private closeAllSubscription?;
     private closeFn?;
-    constructor(calendarManager: BkCalendarManagerService);
+    constructor(calendarManager: BkCalendarManagerService, renderer: Renderer2);
+    /**
+     * appendToBody popup relocation.
+     *
+     * `appendToBody` uses `position: fixed`, which only anchors to the viewport when NO ancestor
+     * establishes a containing block (transform / filter / perspective / will-change / contain /
+     * backdrop-filter). Consumers frequently place the calendar inside such an ancestor (an animated
+     * panel, a CSS-transformed modal, etc.), which silently re-anchors the fixed popup and pushes it
+     * off-position. To be robust everywhere we physically move the popup node to <body> while it is
+     * open, then move it back before Angular's *ngIf tears it down. Angular keeps managing the node by
+     * reference after the move, so its event bindings, change detection, and emulated-encapsulation
+     * styles all continue to work.
+     */
+    private popupMovedToBody;
+    private popupOriginalParent;
+    private popupOriginalNextSibling;
+    private movePopupToBody;
+    /** Return the popup to its original DOM slot so *ngIf can destroy it cleanly (safe to call twice). */
+    private restorePopupFromBody;
     /** Weekday headers; falls back to Mon–Sun if the input is not length 7. */
     get resolvedWeekDayLabels(): string[];
     /** When dual range mode, Apply is blocked until both endpoints exist. */
@@ -456,6 +475,7 @@ declare class BkScheduledDatePicker implements OnInit {
 }
 declare class BkTimePicker implements OnInit, OnChanges, OnDestroy, AfterViewInit, ControlValueAccessor {
+    private renderer;
     required: boolean;
     /** @deprecated Prefer [(ngModel)] */
     value: string | null;
@@ -516,6 +536,21 @@ declare class BkTimePicker implements OnInit, OnChanges, OnDestroy, AfterViewIni
         readonly calenderIcon: "assets/icons/custom-calender.svg";
         readonly timerIcon: "assets/icons/timer.svg";
     };
+    constructor(renderer: Renderer2);
+    /**
+     * `appendToBody` anchors the dropdown with `position: fixed`, which only tracks the viewport when
+     * NO ancestor establishes a containing block (transform / filter / perspective / will-change /
+     * contain / backdrop-filter). Inside such an ancestor the fixed coordinates resolve against that
+     * ancestor instead and the dropdown drifts off-position. To be robust we physically move the panel
+     * to <body> while open (Angular keeps managing it by reference) and move it back before *ngIf
+     * tears it down. The panel carries a `tp-compact` self-class so its `default`-variation sizing —
+     * otherwise scoped under the `.time-input-group.default` ancestor it just left — still applies.
+     */
+    private dropdownMovedToBody;
+    private dropdownOriginalParent;
+    private moveDropdownToBody;
+    /** Return the dropdown to its original slot so *ngIf can destroy it cleanly (safe to call twice). */
+    private restoreDropdownFromBody;
     writeValue(value: string | null): void;
     registerOnChange(fn: (value: string | null) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -1235,6 +1270,18 @@ interface TabItem {
     iconTooltip?: string | string[];
     iconTooltipDirection?: 'left' | 'right' | 'top' | 'bottom';
     error?: boolean;
+    /**
+     * When the tab is in an error state, render an error icon (on the side given
+     * by `direction`) with `iconTooltip` shown on hover of the icon.
+     * When false/omitted, no error icon is drawn and `iconTooltip` falls back to
+     * the tab button itself. Works for both variants and orientations.
+     */
+    showErrorIcon?: boolean;
+    /**
+     * Optional custom error icon URL. If omitted while `showErrorIcon` is true,
+     * the component's default error icon is used.
+     */
+    errorIcon?: string;
 }
 declare class BkTabs {
     list: TabItem[];
@@ -1243,16 +1290,26 @@ declare class BkTabs {
     orientation: TabsOrientation;
     variant: TabsVariant;
     colors: TabsColors;
+    /**
+     * When true, if the currently active tab is in an error state, navigation to
+     * the other tabs is blocked (they render disabled) until the error clears.
+     * Optional — defaults to false, so navigation stays free unless opted in.
+     */
+    lockNavigationOnError: boolean;
+    /** Fallback error icon used when a tab has `showErrorIcon` but no `errorIcon`. */
+    private readonly defaultErrorIcon;
     get isVertical(): boolean;
     get isSegmented(): boolean;
     get wrapperClass(): string;
     segmentedTabClass(tab: TabItem): string;
     change: EventEmitter<TabItem>;
+    get activeTabHasError(): boolean;
+    isLocked(tab: TabItem): boolean;
     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; }; "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "colors": { "alias": "colors"; "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; }; "lockNavigationOnError": { "alias": "lockNavigationOnError"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }
 /**
@@ -2515,5 +2572,86 @@ declare class BkDropdown {
     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 };
+type MenuOrientation = 'horizontal' | 'vertical';
+type MenuSubmenuMode = 'inline' | 'popup';
+interface MenuItem {
+    /** Unique id — matched against `activeItemId`. */
+    id: string;
+    /** Visible menu text. */
+    label: string;
+    /** Optional icon URL (tinted to the theme unless `tintIcons` is false). */
+    icon?: string;
+    /** Alt text for the icon; defaults to `label`. */
+    iconAlt?: string;
+    /** Disables just this item (and blocks opening its submenu). */
+    disabled?: boolean;
+    /** Nested items — presence of children turns this into an expandable node. */
+    children?: MenuItem[];
+}
+/**
+ * A simple, responsive navigation menu. Styled to match the default `bk-tabs`
+ * theme (dark active pill, light hover).
+ *
+ * - Orientation: `vertical` (stacked) / `horizontal` (menubar row).
+ * - Items with `children` are expandable, shown with a chevron that rotates
+ *   open/closed.
+ * - Submenus render inline (accordion) or as pop-ups. Pop-ups adapt to the
+ *   orientation: they drop *below* a horizontal top-level item and fly out to
+ *   the *right* for vertical menus / deeper levels.
+ */
+declare class BkMenu {
+    private readonly host;
+    items: MenuItem[];
+    orientation: MenuOrientation;
+    submenuMode: MenuSubmenuMode;
+    /**
+     * Keep only one submenu open per level: opening a parent collapses its
+     * siblings (and their descendants) so the menu stays compact. Pop-up mode
+     * always behaves this way; this input adds it to inline (accordion) mode.
+     */
+    singleOpen: boolean;
+    /** Id of the currently selected leaf item. Two-way bindable. */
+    activeItemId: string;
+    /** Tint item icons: dark by default, white on the active (dark) row. */
+    tintIcons: boolean;
+    /**
+     * Optional max height for the menu (e.g. '320px', '60vh', or a number of px).
+     * When set, the item list scrolls vertically once it exceeds this height.
+     * Pop-up fly-outs are positioned `fixed`, so they still escape the scroll box.
+     */
+    maxHeight: string | number | null;
+    activeItemIdChange: EventEmitter<string>;
+    itemClick: EventEmitter<MenuItem>;
+    /** Ids of currently expanded/opened parent nodes. */
+    private readonly openIds;
+    /** Viewport coordinates for each open fixed-position fly-out, keyed by id. */
+    readonly popupPos: Map<string, {
+        top: number;
+        left: number;
+    }>;
+    constructor(host: ElementRef<HTMLElement>);
+    get isVertical(): boolean;
+    get isPopup(): boolean;
+    get maxHeightStyle(): string | null;
+    popupTop(item: MenuItem): number | null;
+    popupLeft(item: MenuItem): number | null;
+    hasChildren(item: MenuItem): boolean;
+    isOpen(item: MenuItem): boolean;
+    isActive(item: MenuItem): boolean;
+    isActiveAncestor(item: MenuItem): boolean;
+    isHighlighted(item: MenuItem): boolean;
+    inlineIndent(level: number): number | null;
+    onItemClick(item: MenuItem, siblings: MenuItem[], event: Event): void;
+    onItemEnter(item: MenuItem, siblings: MenuItem[], event: MouseEvent, level: number): void;
+    private computePopupPos;
+    onItemLeave(item: MenuItem): void;
+    private toggle;
+    private closeBranch;
+    onDocumentClick(event: MouseEvent): void;
+    onViewportChange(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkMenu, "bk-menu", never, { "items": { "alias": "items"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "submenuMode": { "alias": "submenuMode"; "required": false; }; "singleOpen": { "alias": "singleOpen"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "tintIcons": { "alias": "tintIcons"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, { "activeItemIdChange": "activeItemIdChange"; "itemClick": "itemClick"; }, 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, BkMenu, 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, MenuItem, MenuOrientation, MenuSubmenuMode, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json CHANGED Viewed

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

package/src/assets/icons/alert-circle-red.svg ADDED Viewed

@@ -0,0 +1,12 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.57007" y="3.56995" width="40" height="40" rx="20" fill="#FEE2E2"/>
+<rect x="3.57007" y="3.56995" width="40" height="40" rx="20" stroke="#FEE2E2" stroke-width="7.14"/>
+<g clip-path="url(#clip0_1_149094)">
+<path d="M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z" stroke="#EF4444" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1_149094">
+<rect width="20" height="20" fill="white" transform="translate(13.5701 13.5699)"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/menu/menu.css ADDED Viewed

@@ -0,0 +1,226 @@
+/* =========================================================================
+   bk-menu — simple responsive navigation menu.
+   Single light theme, matching the default bk-tabs styling:
+   text #141414, hover #EDEEF0, active #141414 bg with white text.
+   ========================================================================= */
+.bk-menu {
+  --menu-bg: #ffffff;
+  --menu-text: #141414;
+  --menu-subtext: #6b7080;
+  --menu-hover-bg: #edeef0;
+  --menu-hover-text: #141414;
+  --menu-active-bg: #141414;
+  --menu-active-text: #ffffff;
+  --menu-border: #efeff1;
+  --menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, 0.09);
+  --menu-radius: 8px;
+  --menu-disabled: 0.5;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  letter-spacing: -0.28px;
+  background: var(--menu-bg);
+  color: var(--menu-text);
+  border: 1px solid var(--menu-border);
+  border-radius: var(--menu-radius);
+  /* Safe to clip to rounded corners: pop-up fly-outs are position:fixed and
+     escape this box entirely, so nothing gets cut off. */
+  overflow: hidden;
+}
+/* ---- Lists ---- */
+.bk-menu__list,
+.bk-menu__submenu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* Scroll container: vertical scroll past max-height, horizontal scroll if a
+   deeply-indented inline row is wider than the menu. Fixed fly-outs escape it. */
+.bk-menu__list--scroll {
+  overflow: auto;
+}
+/* Horizontal top-level row (menubar). Scrolls when crowded — fixed fly-outs are
+   unaffected by the overflow. */
+.bk-menu--horizontal > .bk-menu__list {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow-x: auto;
+}
+/* ---- Item / button ---- */
+.bk-menu__item {
+  position: relative; /* anchor for pop-up submenus */
+}
+.bk-menu__button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 6px;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button {
+  width: auto;
+}
+.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active) {
+  background: var(--menu-hover-bg);
+  color: var(--menu-hover-text);
+}
+.bk-menu__button--active {
+  background: var(--menu-active-bg);
+  color: var(--menu-active-text);
+}
+.bk-menu__button--disabled,
+.bk-menu__button:disabled {
+  opacity: var(--menu-disabled);
+  cursor: not-allowed;
+}
+/* Nested (child) items use the muted sub-text colour. */
+.bk-menu__submenu .bk-menu__button {
+  color: var(--menu-subtext);
+  font-weight: 400;
+}
+.bk-menu__submenu .bk-menu__button--active {
+  color: var(--menu-active-text);
+}
+/* ---- Icon (optional). Tinted monochrome when .bk-menu--tint. ---- */
+.bk-menu__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+.bk-menu--tint .bk-menu__icon {
+  filter: brightness(0) saturate(0); /* → near-black, matches #141414 text */
+}
+/* Active row has a dark background → force a white icon for contrast. */
+.bk-menu--tint .bk-menu__button--active .bk-menu__icon {
+  filter: brightness(0) invert(1);
+}
+.bk-menu__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button > .bk-menu__label {
+  flex: 0 0 auto;
+  overflow: visible;
+}
+/* ---- Chevron ---- */
+.bk-menu__chevron {
+  flex-shrink: 0;
+  transition: transform 0.18s ease;
+  opacity: 0.8;
+}
+/* Inline: rotate down → up on open. */
+.bk-menu__chevron--open {
+  transform: rotate(180deg);
+}
+/* Pop-up fly-out: static caret pointing to where the panel opens (right). */
+.bk-menu__chevron--right {
+  transform: rotate(-90deg);
+}
+/* =========================================================================
+   Inline submenus (accordion) — expand in place.
+   ========================================================================= */
+.bk-menu__submenu--inline {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.2s ease;
+}
+.bk-menu__submenu--inline.bk-menu__submenu--open {
+  max-height: 1000px; /* large enough to reveal nested content */
+}
+/* =========================================================================
+   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. */
+  position: fixed;
+  z-index: 1000;
+  min-width: 200px;
+  max-width: 280px;
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+  background: var(--menu-bg);
+  border: 1px solid var(--menu-border);
+  border-radius: 12px;
+  box-shadow: var(--menu-shadow);
+  padding: 4px;
+  display: none;
+}
+.bk-menu__submenu--popup.bk-menu__submenu--open {
+  display: block;
+}
+/* Invisible bridges spanning the gap between a parent and its fly-out, so the
+   pointer stays "inside" the item while crossing — prevents hover flicker. */
+.bk-menu__submenu--popup-right::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -6px;
+  width: 6px;
+  height: 100%;
+}
+.bk-menu__submenu--popup-down::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 0;
+  width: 100%;
+  height: 6px;
+}
+/* =========================================================================
+   Responsive: stack a horizontal menu into a vertical one on small screens.
+   ========================================================================= */
+@media (max-width: 640px) {
+  .bk-menu--horizontal > .bk-menu__list {
+    flex-direction: column;
+    overflow-x: visible;
+  }
+  .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button {
+    width: 100%;
+  }
+}

package/src/lib/tabs/tabs.css CHANGED Viewed

@@ -121,6 +121,28 @@
   color: #15191E;
 }
+/* Segmented error pill — an icon alone reads too subtly here, so give the pill
+   a red tint, border and text. Placed after the base/active segmented rules so
+   it wins on equal specificity; the active+error combo uses 3 classes to win. */
+.tabs-button--segmented.tabs-button--error {
+  background: #FEE2E2;
+  border-color: #FCA5A5;
+  color: #C10007;
+}
+.tabs-button--segmented.tabs-button--error.tabs-button--active {
+  background: #FFFFFF;
+  border-color: #C10007;
+  color: #C10007;
+}
+/* Keep the error look on hover (the generic pill hover would otherwise win). */
+.tabs-button--segmented.tabs-button--error:hover:not(:disabled):not(.tabs-button--active) {
+  background: #FEE2E2;
+  border-color: #C10007;
+  color: #C10007;
+}
 /* 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 {
@@ -132,4 +154,3 @@
   @apply justify-start text-left;
 }
-/* Testing */