@eagami/ui 5.17.1 → 5.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.17.1",
+  "version": "5.18.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_mixins.scss

@@ -82,3 +82,16 @@
     opacity: 0.5;
   }
 }
+
+// Strips the geometry the UA stylesheet forces on a `[popover]` element (a
+// centred, viewport-filling, scrollable box) so a surface promoted into the top
+// layer keeps the box it has in the normal layer. Colour and spacing chrome
+// (`padding`, `border`, `background`, `color`) is left alone: a surface that
+// declares its own already wins, and one that does not resets it alongside the
+// include.
+@mixin top-layer-reset {
+  inset: auto;
+  overflow: visible;
+  width: auto;
+  height: auto;
+}

package/src/styles/_tooltip.scss

@@ -5,7 +5,10 @@
 // `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
 .ea-tooltip {
   z-index: var(--z-index-tooltip);
-  position: absolute;
+  // Viewport-relative, matching the coordinates the shared positioning helper
+  // returns. Also keeps the box unambiguous once the bubble is promoted into
+  // the top layer, where the containing block is the viewport either way.
+  position: fixed;
   // Template content can contain unbreakable element rows (avatars, icon rows)
   // that a max-width cannot wrap; let the bubble grow instead of clipping them
   min-width: min-content;
@@ -29,6 +32,12 @@
   @media (hover: none) {
     display: none;
   }
+
+  // The bubble already declares its own padding, border, background and color,
+  // so only the UA's popover geometry needs undoing once it is promoted.
+  &[popover] {
+    @include ea.top-layer-reset;
+  }
 }
 
 @keyframes ea-tooltip-fade-in {

package/types/eagami-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders, Signal, Type, OnDestroy, ElementRef, TemplateRef, AfterContentChecked, OnInit } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, Signal, Type, OnDestroy, ElementRef, TemplateRef, AfterContentChecked, OnInit } from '@angular/core';
 import * as _eagami_ui from '@eagami/ui';
 import { ControlValueAccessor } from '@angular/forms';
 
@@ -350,8 +350,6 @@ interface EagamiUiConfig extends EagamiI18nConfig {
      */
     palette?: EagamiPaletteConfig;
 }
-/** DI token carrying the consumer-supplied i18n configuration. */
-declare const EAGAMI_I18N_CONFIG: InjectionToken<EagamiI18nConfig>;
 /**
  * Configures Eagami UI for the application.
  *
@@ -381,9 +379,16 @@ declare const EAGAMI_I18N_CONFIG: InjectionToken<EagamiI18nConfig>;
  *   },
  * });
  * ```
+ *
+ * A `palette` installs a `<style>` tag at bootstrap, carrying Angular's
+ * `CSP_NONCE` when the app provides one, so a strict `style-src` policy admits
+ * it instead of dropping the theme.
  */
 declare function provideEagamiUi(config?: EagamiUiConfig): EnvironmentProviders;
 
+/** DI token carrying the consumer-supplied i18n configuration. */
+declare const EAGAMI_I18N_CONFIG: InjectionToken<EagamiI18nConfig>;
+
 /**
  * Holds the active locale and resolves the matching message dictionary for
  * every Eagami UI component. English is always available; other languages are
@@ -545,8 +550,12 @@ declare function formatViolations(violations: readonly ContrastViolation[]): str
  * Idempotent: subsequent calls replace the previous stylesheet rather than
  * append, so a theme switcher can re-apply without leaking style tags.
  * No-ops outside a DOM context (SSR).
+ *
+ * Pass `nonce` under a `style-src` policy that requires one, or the browser
+ * drops the stylesheet and the app silently renders the library's own colours.
+ * `provideEagamiUi()` forwards Angular's `CSP_NONCE` automatically.
  */
-declare function applyPalette(palette: ModePalette): void;
+declare function applyPalette(palette: ModePalette, nonce?: string | null): void;
 
 declare function relativeLuminance(hex: string): number;
 declare function contrastRatio(hexA: string, hexB: string): number;
@@ -2328,7 +2337,7 @@ declare class MenuComponent {
     private focusFirstItem;
     private focusItem;
     onKeydown(event: KeyboardEvent): void;
-    onEscape(): void;
+    onEscape(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "ea-menu", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
 }
@@ -2805,7 +2814,7 @@ declare class PopoverComponent {
     private reposition;
     onDocumentClick(event: MouseEvent): void;
     onSurfaceKeydown(event: KeyboardEvent): void;
-    onEscape(): void;
+    onEscape(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverComponent, "ea-popover", never, { "anchor": { "alias": "anchor"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "trapFocus": { "alias": "trapFocus"; "required": false; "isSignal": true; }; "surfaceId": { "alias": "surfaceId"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "clamp": { "alias": "clamp"; "required": false; "isSignal": true; }; "matchAnchorWidth": { "alias": "matchAnchorWidth"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; "isSignal": true; }; }, { "closeRequested": "closeRequested"; }, never, ["*"], true, never>;
 }
@@ -7537,4 +7546,4 @@ declare class TimerIconComponent extends IconComponentBase {
 }
 
 export { AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AndroidIconComponent, AngularIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BellRingIconComponent, BitcoinIconComponent, BlueskyIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BookmarkPlusIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, BugIconComponent, BuildingIconComponent, ButtonComponent, CalculatorIconComponent, CalendarCheckIconComponent, CalendarDaysIconComponent, CalendarIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CastIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClipboardListIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileCheckIconComponent, FileIconComponent, FileMinusIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FlagIconComponent, FlameIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderOpenIconComponent, FolderPlusIconComponent, FormFieldComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitCompareIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GridIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HistoryIconComponent, HomeIconComponent, ICONS, IconComponentBase, ImageIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KeyboardIconComponent, KubernetesIconComponent, LampIconComponent, LanguagesIconComponent, LayersIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, LightbulbIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailCheckIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MegaphoneIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NodejsIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PackageIconComponent, PaginatorComponent, PaletteIconComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PieChartIconComponent, PinIconComponent, PinterestIconComponent, PlayCircleIconComponent, PlayIconComponent, PlugIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, PythonIconComponent, QrCodeIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, RepeatIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCwIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, ShareIconComponent, ShieldCheckIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShopifyIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, StarIconComponent, StepComponent, StepperComponent, StopCircleIconComponent, StripeIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SvelteIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, TimelineComponent, TimerIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, VueIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, WordpressIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, ar, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, he, hexToOklch, hi, iconDisplayName, is, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, ru, uk, validatePalette, visibleNodeIds, walkTree, zhCN };
-export type { AccordionHeadingLevel, AccordionSize, AlertSize, AlertVariant, AutocompleteSize, AvatarEditorCropEvent, AvatarEditorCropState, AvatarEditorShape, AvatarShape, AvatarSize, BadgeShape, BadgeSize, BadgeVariant, BreadcrumbClickEvent, BreadcrumbItem, BreadcrumbsSeparator, BreadcrumbsSize, ButtonSize, ButtonType, ButtonVariant, CardHeaderAlign, CardPadding, CardVariant, CheckboxSize, CodeInputSize, ColorPickerFormat, ColorPickerInputMode, ColorPickerSize, ColorPickerValue, CommandPaletteItem, ContrastSurfaces, ContrastViolation, DataTableColumn, DataTableDensity, DataTableSize, DataTableSortDirection, DataTableSortState, DatePickerFormat, DatePickerSize, DatePickerValue, DatePickerWeekStart, DerivedPalette, DialogWidth, DividerOrientation, DrawerAnimation, DrawerMode, DrawerPosition, DrawerSize, DropdownSize, EaErrorMessages, EaSize, EaValidationErrorKey, EaWidth, EagamiI18nConfig, EagamiLocale, EagamiLocaleBundle, EagamiLocaleLoader, EagamiLocaleMeta, EagamiMessages, EagamiMessagesOverride, EagamiPaletteConfig, EagamiWordmarkLayout, EagamiWordmarkVariant, EmptyStateHeadingLevel, EmptyStateSize, FileUploaderRejection, FileUploaderRejectionReason, FileUploaderSize, FormFieldSize, IconCategory, IconComponentType, IconMeta, InputSize, InputType, MenuItemVariant, MenuPlacement, MenuSize, ModePalette, ModeSurfaces, MultiSelectSize, NumberInputSize, PaginatorAlign, PaginatorSize, PaginatorState, PaletteConfig, PaletteRoles, PaletteShade, PopoverPlacement, PopoverPositionOptions, PopoverPositionResult, PopoverRole, PopoverScrollBehavior, ProgressBarSize, ProgressBarVariant, RadioOrientation, RadioSize, RangeSliderSize, RangeSliderValue, RatingSize, RatingStarState, SegmentedSize, SelectOption, SkeletonVariant, SliderSize, SpinnerSize, StepperOrientation, StepperSize, SwitchSize, TabsSize, TabsVariant, TagSize, TagVariant, TextareaResize, TextareaSize, TimePickerFormat, TimePickerSize, TimelineAlign, TimelineItem, TimelineItemColor, TimelineOrientation, TimelineSize, Toast, ToastOptions, ToastPosition, ToastSize, ToastVariant, TooltipPosition, TransferListItem, TransferListSize, TreeNode, TreeSize, VirtualListItemContext };
+export type { AccordionHeadingLevel, AccordionSize, AlertSize, AlertVariant, AutocompleteSize, AvatarEditorCropEvent, AvatarEditorCropState, AvatarEditorShape, AvatarShape, AvatarSize, BadgeShape, BadgeSize, BadgeVariant, BreadcrumbClickEvent, BreadcrumbItem, BreadcrumbsSeparator, BreadcrumbsSize, ButtonSize, ButtonType, ButtonVariant, CardHeaderAlign, CardPadding, CardVariant, CheckboxSize, CodeInputSize, ColorPickerFormat, ColorPickerInputMode, ColorPickerSize, ColorPickerValue, CommandPaletteItem, ContrastSurfaces, ContrastViolation, DataTableColumn, DataTableDensity, DataTableSize, DataTableSortDirection, DataTableSortState, DatePickerFormat, DatePickerSize, DatePickerValue, DatePickerWeekStart, DerivedPalette, DialogWidth, DividerOrientation, DrawerAnimation, DrawerMode, DrawerPosition, DrawerSize, DropdownSize, EaErrorMessages, EaSize, EaValidationErrorKey, EaWidth, EagamiI18nConfig, EagamiLocale, EagamiLocaleBundle, EagamiLocaleLoader, EagamiLocaleMeta, EagamiMessages, EagamiMessagesOverride, EagamiPaletteConfig, EagamiUiConfig, EagamiWordmarkLayout, EagamiWordmarkVariant, EmptyStateHeadingLevel, EmptyStateSize, FileUploaderRejection, FileUploaderRejectionReason, FileUploaderSize, FormFieldSize, IconCategory, IconComponentType, IconMeta, InputSize, InputType, MenuItemVariant, MenuPlacement, MenuSize, ModePalette, ModeSurfaces, MultiSelectSize, NumberInputSize, PaginatorAlign, PaginatorSize, PaginatorState, PaletteConfig, PaletteRoles, PaletteShade, PopoverPlacement, PopoverPositionOptions, PopoverPositionResult, PopoverRole, PopoverScrollBehavior, ProgressBarSize, ProgressBarVariant, RadioOrientation, RadioSize, RangeSliderSize, RangeSliderValue, RatingSize, RatingStarState, SegmentedSize, SelectOption, SkeletonVariant, SliderSize, SpinnerSize, StepperOrientation, StepperSize, SwitchSize, TabsSize, TabsVariant, TagSize, TagVariant, TextareaResize, TextareaSize, TimePickerFormat, TimePickerSize, TimelineAlign, TimelineItem, TimelineItemColor, TimelineOrientation, TimelineSize, Toast, ToastOptions, ToastPosition, ToastSize, ToastVariant, TooltipPosition, TransferListItem, TransferListSize, TreeNode, TreeSize, VirtualListItemContext };