@koobiq/components 20.4.1 → 21.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "20.4.1",
+    "version": "21.0.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -21,15 +21,39 @@
     },
     "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
-        "@angular/animations": ">=20.0.0",
-        "@angular/cdk": ">=20.0.0",
-        "@angular/core": ">=20.0.0",
-        "@angular/forms": ">=20.0.0",
-        "@koobiq/angular-moment-adapter": "20.4.1",
-        "@koobiq/angular-luxon-adapter": "20.4.1",
+        "@angular/cdk": "^21.0.0",
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/forms": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/router": "^21.0.0",
+        "@koobiq/angular-moment-adapter": "^21.0.0",
+        "@koobiq/angular-luxon-adapter": "^21.0.0",
+        "@koobiq/date-adapter": "^3.4.0",
         "@koobiq/date-formatter": "^3.2.3",
-        "@koobiq/icons": "^11.1.3",
-        "@koobiq/design-tokens": "^3.14.0"
+        "@koobiq/icons": "^11.1.3 || ^12.0.0",
+        "@koobiq/design-tokens": "^4.1.0",
+        "highlight.js": "^11.11.1",
+        "marked": "^17.0.0",
+        "overlayscrollbars": "2.7.3",
+        "rxjs": "^7.4.0"
+    },
+    "peerDependenciesMeta": {
+        "@angular/router": {
+            "optional": true
+        },
+        "@koobiq/angular-moment-adapter": {
+            "optional": true
+        },
+        "@koobiq/angular-luxon-adapter": {
+            "optional": true
+        },
+        "highlight.js": {
+            "optional": true
+        },
+        "marked": {
+            "optional": true
+        }
     },
     "dependencies": {
         "tslib": "^2.6.2"
@@ -43,15 +67,9 @@
     "exports": {
         ".": {
             "sass": "./_index.scss",
-            "types": "./index.d.ts",
+            "types": "./types/koobiq-components.d.ts",
             "default": "./fesm2022/koobiq-components.mjs"
         },
-        "./prebuilt-themes/light-theme.css": {
-            "style": "./prebuilt-themes/light-theme.css"
-        },
-        "./prebuilt-themes/dark-theme.css": {
-            "style": "./prebuilt-themes/dark-theme.css"
-        },
         "./prebuilt-themes/theme.css": {
             "style": "./prebuilt-themes/theme.css"
         },
@@ -59,264 +77,277 @@
             "default": "./package.json"
         },
         "./accordion": {
-            "types": "./accordion/index.d.ts",
+            "types": "./types/koobiq-components-accordion.d.ts",
             "default": "./fesm2022/koobiq-components-accordion.mjs"
         },
         "./actions-panel": {
-            "types": "./actions-panel/index.d.ts",
+            "types": "./types/koobiq-components-actions-panel.d.ts",
             "default": "./fesm2022/koobiq-components-actions-panel.mjs"
         },
         "./alert": {
-            "types": "./alert/index.d.ts",
+            "types": "./types/koobiq-components-alert.d.ts",
             "default": "./fesm2022/koobiq-components-alert.mjs"
         },
         "./app-switcher": {
-            "types": "./app-switcher/index.d.ts",
+            "types": "./types/koobiq-components-app-switcher.d.ts",
             "default": "./fesm2022/koobiq-components-app-switcher.mjs"
         },
         "./autocomplete": {
-            "types": "./autocomplete/index.d.ts",
+            "types": "./types/koobiq-components-autocomplete.d.ts",
             "default": "./fesm2022/koobiq-components-autocomplete.mjs"
         },
         "./badge": {
-            "types": "./badge/index.d.ts",
+            "types": "./types/koobiq-components-badge.d.ts",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
         "./breadcrumbs": {
-            "types": "./breadcrumbs/index.d.ts",
+            "types": "./types/koobiq-components-breadcrumbs.d.ts",
             "default": "./fesm2022/koobiq-components-breadcrumbs.mjs"
         },
         "./button": {
-            "types": "./button/index.d.ts",
+            "types": "./types/koobiq-components-button.d.ts",
             "default": "./fesm2022/koobiq-components-button.mjs"
         },
         "./button-toggle": {
-            "types": "./button-toggle/index.d.ts",
+            "types": "./types/koobiq-components-button-toggle.d.ts",
             "default": "./fesm2022/koobiq-components-button-toggle.mjs"
         },
         "./checkbox": {
-            "types": "./checkbox/index.d.ts",
+            "types": "./types/koobiq-components-checkbox.d.ts",
             "default": "./fesm2022/koobiq-components-checkbox.mjs"
         },
         "./clamped-text": {
-            "types": "./clamped-text/index.d.ts",
+            "types": "./types/koobiq-components-clamped-text.d.ts",
             "default": "./fesm2022/koobiq-components-clamped-text.mjs"
         },
         "./code-block": {
-            "types": "./code-block/index.d.ts",
+            "types": "./types/koobiq-components-code-block.d.ts",
             "default": "./fesm2022/koobiq-components-code-block.mjs"
         },
         "./content-panel": {
-            "types": "./content-panel/index.d.ts",
+            "types": "./types/koobiq-components-content-panel.d.ts",
             "default": "./fesm2022/koobiq-components-content-panel.mjs"
         },
         "./core": {
-            "types": "./core/index.d.ts",
+            "types": "./types/koobiq-components-core.d.ts",
             "default": "./fesm2022/koobiq-components-core.mjs"
         },
         "./datepicker": {
-            "types": "./datepicker/index.d.ts",
+            "types": "./types/koobiq-components-datepicker.d.ts",
             "default": "./fesm2022/koobiq-components-datepicker.mjs"
         },
         "./divider": {
-            "types": "./divider/index.d.ts",
+            "types": "./types/koobiq-components-divider.d.ts",
             "default": "./fesm2022/koobiq-components-divider.mjs"
         },
         "./dl": {
-            "types": "./dl/index.d.ts",
+            "types": "./types/koobiq-components-dl.d.ts",
             "default": "./fesm2022/koobiq-components-dl.mjs"
         },
         "./dropdown": {
-            "types": "./dropdown/index.d.ts",
+            "types": "./types/koobiq-components-dropdown.d.ts",
             "default": "./fesm2022/koobiq-components-dropdown.mjs"
         },
         "./dynamic-translation": {
-            "types": "./dynamic-translation/index.d.ts",
+            "types": "./types/koobiq-components-dynamic-translation.d.ts",
             "default": "./fesm2022/koobiq-components-dynamic-translation.mjs"
         },
         "./ellipsis-center": {
-            "types": "./ellipsis-center/index.d.ts",
+            "types": "./types/koobiq-components-ellipsis-center.d.ts",
             "default": "./fesm2022/koobiq-components-ellipsis-center.mjs"
         },
         "./empty-state": {
-            "types": "./empty-state/index.d.ts",
+            "types": "./types/koobiq-components-empty-state.d.ts",
             "default": "./fesm2022/koobiq-components-empty-state.mjs"
         },
         "./file-upload": {
-            "types": "./file-upload/index.d.ts",
+            "types": "./types/koobiq-components-file-upload.d.ts",
             "default": "./fesm2022/koobiq-components-file-upload.mjs"
         },
         "./filter-bar": {
-            "types": "./filter-bar/index.d.ts",
+            "types": "./types/koobiq-components-filter-bar.d.ts",
             "default": "./fesm2022/koobiq-components-filter-bar.mjs"
         },
         "./flag": {
-            "types": "./flag/index.d.ts",
+            "types": "./types/koobiq-components-flag.d.ts",
             "default": "./fesm2022/koobiq-components-flag.mjs"
         },
         "./form-field": {
-            "types": "./form-field/index.d.ts",
+            "types": "./types/koobiq-components-form-field.d.ts",
             "default": "./fesm2022/koobiq-components-form-field.mjs"
         },
         "./icon": {
-            "types": "./icon/index.d.ts",
+            "types": "./types/koobiq-components-icon.d.ts",
             "default": "./fesm2022/koobiq-components-icon.mjs"
         },
         "./inline-edit": {
-            "types": "./inline-edit/index.d.ts",
+            "types": "./types/koobiq-components-inline-edit.d.ts",
             "default": "./fesm2022/koobiq-components-inline-edit.mjs"
         },
         "./input": {
-            "types": "./input/index.d.ts",
+            "types": "./types/koobiq-components-input.d.ts",
             "default": "./fesm2022/koobiq-components-input.mjs"
         },
         "./link": {
-            "types": "./link/index.d.ts",
+            "types": "./types/koobiq-components-link.d.ts",
             "default": "./fesm2022/koobiq-components-link.mjs"
         },
+        "./link/deprecated": {
+            "types": "./types/koobiq-components-link-deprecated.d.ts",
+            "default": "./fesm2022/koobiq-components-link-deprecated.mjs"
+        },
         "./list": {
-            "types": "./list/index.d.ts",
+            "types": "./types/koobiq-components-list.d.ts",
             "default": "./fesm2022/koobiq-components-list.mjs"
         },
         "./loader-overlay": {
-            "types": "./loader-overlay/index.d.ts",
+            "types": "./types/koobiq-components-loader-overlay.d.ts",
             "default": "./fesm2022/koobiq-components-loader-overlay.mjs"
         },
         "./markdown": {
-            "types": "./markdown/index.d.ts",
+            "types": "./types/koobiq-components-markdown.d.ts",
             "default": "./fesm2022/koobiq-components-markdown.mjs"
         },
         "./modal": {
-            "types": "./modal/index.d.ts",
+            "types": "./types/koobiq-components-modal.d.ts",
             "default": "./fesm2022/koobiq-components-modal.mjs"
         },
         "./navbar": {
-            "types": "./navbar/index.d.ts",
+            "types": "./types/koobiq-components-navbar.d.ts",
             "default": "./fesm2022/koobiq-components-navbar.mjs"
         },
         "./notification-center": {
-            "types": "./notification-center/index.d.ts",
+            "types": "./types/koobiq-components-notification-center.d.ts",
             "default": "./fesm2022/koobiq-components-notification-center.mjs"
         },
         "./overflow-items": {
-            "types": "./overflow-items/index.d.ts",
+            "types": "./types/koobiq-components-overflow-items.d.ts",
             "default": "./fesm2022/koobiq-components-overflow-items.mjs"
         },
         "./popover": {
-            "types": "./popover/index.d.ts",
+            "types": "./types/koobiq-components-popover.d.ts",
             "default": "./fesm2022/koobiq-components-popover.mjs"
         },
         "./progress-bar": {
-            "types": "./progress-bar/index.d.ts",
+            "types": "./types/koobiq-components-progress-bar.d.ts",
             "default": "./fesm2022/koobiq-components-progress-bar.mjs"
         },
         "./progress-spinner": {
-            "types": "./progress-spinner/index.d.ts",
+            "types": "./types/koobiq-components-progress-spinner.d.ts",
             "default": "./fesm2022/koobiq-components-progress-spinner.mjs"
         },
         "./radio": {
-            "types": "./radio/index.d.ts",
+            "types": "./types/koobiq-components-radio.d.ts",
             "default": "./fesm2022/koobiq-components-radio.mjs"
         },
         "./resizer": {
-            "types": "./resizer/index.d.ts",
+            "types": "./types/koobiq-components-resizer.d.ts",
             "default": "./fesm2022/koobiq-components-resizer.mjs"
         },
         "./scrollbar": {
-            "types": "./scrollbar/index.d.ts",
+            "types": "./types/koobiq-components-scrollbar.d.ts",
             "default": "./fesm2022/koobiq-components-scrollbar.mjs"
         },
+        "./scrollbar/deprecated": {
+            "types": "./types/koobiq-components-scrollbar-deprecated.d.ts",
+            "default": "./fesm2022/koobiq-components-scrollbar-deprecated.mjs"
+        },
         "./search-expandable": {
-            "types": "./search-expandable/index.d.ts",
+            "types": "./types/koobiq-components-search-expandable.d.ts",
             "default": "./fesm2022/koobiq-components-search-expandable.mjs"
         },
         "./select": {
-            "types": "./select/index.d.ts",
+            "types": "./types/koobiq-components-select.d.ts",
             "default": "./fesm2022/koobiq-components-select.mjs"
         },
         "./sidebar": {
-            "types": "./sidebar/index.d.ts",
+            "types": "./types/koobiq-components-sidebar.d.ts",
             "default": "./fesm2022/koobiq-components-sidebar.mjs"
         },
         "./sidepanel": {
-            "types": "./sidepanel/index.d.ts",
+            "types": "./types/koobiq-components-sidepanel.d.ts",
             "default": "./fesm2022/koobiq-components-sidepanel.mjs"
         },
         "./skeleton": {
-            "types": "./skeleton/index.d.ts",
+            "types": "./types/koobiq-components-skeleton.d.ts",
             "default": "./fesm2022/koobiq-components-skeleton.mjs"
         },
         "./split-button": {
-            "types": "./split-button/index.d.ts",
+            "types": "./types/koobiq-components-split-button.d.ts",
             "default": "./fesm2022/koobiq-components-split-button.mjs"
         },
         "./splitter": {
-            "types": "./splitter/index.d.ts",
+            "types": "./types/koobiq-components-splitter.d.ts",
             "default": "./fesm2022/koobiq-components-splitter.mjs"
         },
+        "./splitter/deprecated": {
+            "types": "./types/koobiq-components-splitter-deprecated.d.ts",
+            "default": "./fesm2022/koobiq-components-splitter-deprecated.mjs"
+        },
         "./table": {
-            "types": "./table/index.d.ts",
+            "types": "./types/koobiq-components-table.d.ts",
             "default": "./fesm2022/koobiq-components-table.mjs"
         },
         "./tabs": {
-            "types": "./tabs/index.d.ts",
+            "types": "./types/koobiq-components-tabs.d.ts",
             "default": "./fesm2022/koobiq-components-tabs.mjs"
         },
         "./tags": {
-            "types": "./tags/index.d.ts",
+            "types": "./types/koobiq-components-tags.d.ts",
             "default": "./fesm2022/koobiq-components-tags.mjs"
         },
         "./textarea": {
-            "types": "./textarea/index.d.ts",
+            "types": "./types/koobiq-components-textarea.d.ts",
             "default": "./fesm2022/koobiq-components-textarea.mjs"
         },
         "./time-range": {
-            "types": "./time-range/index.d.ts",
+            "types": "./types/koobiq-components-time-range.d.ts",
             "default": "./fesm2022/koobiq-components-time-range.mjs"
         },
         "./timepicker": {
-            "types": "./timepicker/index.d.ts",
+            "types": "./types/koobiq-components-timepicker.d.ts",
             "default": "./fesm2022/koobiq-components-timepicker.mjs"
         },
         "./timezone": {
-            "types": "./timezone/index.d.ts",
+            "types": "./types/koobiq-components-timezone.d.ts",
             "default": "./fesm2022/koobiq-components-timezone.mjs"
         },
         "./title": {
-            "types": "./title/index.d.ts",
+            "types": "./types/koobiq-components-title.d.ts",
             "default": "./fesm2022/koobiq-components-title.mjs"
         },
         "./toast": {
-            "types": "./toast/index.d.ts",
+            "types": "./types/koobiq-components-toast.d.ts",
             "default": "./fesm2022/koobiq-components-toast.mjs"
         },
         "./toggle": {
-            "types": "./toggle/index.d.ts",
+            "types": "./types/koobiq-components-toggle.d.ts",
             "default": "./fesm2022/koobiq-components-toggle.mjs"
         },
         "./tooltip": {
-            "types": "./tooltip/index.d.ts",
+            "types": "./types/koobiq-components-tooltip.d.ts",
             "default": "./fesm2022/koobiq-components-tooltip.mjs"
         },
         "./top-bar": {
-            "types": "./top-bar/index.d.ts",
+            "types": "./types/koobiq-components-top-bar.d.ts",
             "default": "./fesm2022/koobiq-components-top-bar.mjs"
         },
         "./tree": {
-            "types": "./tree/index.d.ts",
+            "types": "./types/koobiq-components-tree.d.ts",
             "default": "./fesm2022/koobiq-components-tree.mjs"
         },
         "./tree-select": {
-            "types": "./tree-select/index.d.ts",
+            "types": "./types/koobiq-components-tree-select.d.ts",
             "default": "./fesm2022/koobiq-components-tree-select.mjs"
         },
         "./username": {
-            "types": "./username/index.d.ts",
+            "types": "./types/koobiq-components-username.d.ts",
             "default": "./fesm2022/koobiq-components-username.mjs"
         }
     },
     "schematics": "./schematics/collection.json",
     "sideEffects": false,
     "module": "fesm2022/koobiq-components.mjs",
-    "typings": "index.d.ts"
+    "typings": "types/koobiq-components.d.ts",
+    "type": "module"
 }

package/popover/popover-tokens.scss

@@ -25,6 +25,4 @@
     --kbq-popover-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-popover-content-text-color: var(--kbq-foreground-contrast);
     --kbq-popover-footer-scroll-shadow: var(--kbq-shadow-overflow-normal-top);
-
-    --kbq-popover-borderless-shadow: 0 2px 8px var(--kbq-shadow-key), 0 3px 8px var(--kbq-shadow-ambient);
 }

package/popover/popover.scss

@@ -1,26 +1,38 @@
 @use '../core/pop-up/pop-up';
+@use '../core/styles/common/animation';
 @use '../core/styles/common';
 
 @use '../core/styles/common/tokens' as *;
 
 @use './popover-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 $arrow-size: 12px;
 
 $arrow-offset: calc(($arrow-size - 1px) / -2);
 $arrow-padding: 24px;
 
+// Stacking order inside a panel. The arrow is a rotated square drawn behind the panel so that only the half
+// sticking out of it is visible; the header, footer and close button float above the scrolling content.
+$z-index-arrow: -1;
+$z-index-panel: 1;
+$z-index-above-content: 2;
+
 .kbq-popover {
     position: relative;
 
-    border-radius: var(--kbq-popover-size-container-border-radius);
+    @include kbq-squircle(var(--kbq-popover-size-container-border-radius));
 
     box-sizing: border-box;
 
     list-style: none;
     white-space: pre-line;
 
-    z-index: 1;
+    z-index: $z-index-panel;
+
+    // Shown once `KbqPopUp.show()` has made it visible.
+    opacity: 0;
+    transform: scale(1, 0.8);
 
     &.kbq-popover_small {
         width: var(--kbq-popover-size-container-width-small);
@@ -39,6 +51,16 @@ $arrow-padding: 24px;
     }
 
     @include pop-up.popup-margins(kbq-popover, 8px);
+
+    &.kbq-popover_visible {
+        opacity: 1;
+        transform: none;
+        transition:
+            opacity 120ms cubic-bezier(0, 0, 0.2, 1),
+            transform 120ms cubic-bezier(0, 0, 0.2, 1);
+
+        @include animation.kbq-animations-off();
+    }
 }
 
 .kbq-popover__content {
@@ -58,7 +80,7 @@ $arrow-padding: 24px;
 
     max-height: var(--kbq-popover-size-container-max-height);
 
-    border-radius: var(--kbq-popover-size-container-border-radius);
+    @include kbq-squircle(var(--kbq-popover-size-container-border-radius));
 
     &.kbq-popover__container_with-header {
         .kbq-popover__content_default-paddings.kbq-popover__content {
@@ -73,21 +95,21 @@ $arrow-padding: 24px;
     }
 }
 
-.kbq-popover__content .kbq-popover__close-container {
-    display: flex;
-    justify-content: flex-end;
-    height: 0;
+.kbq-popover__close-container_without-header .kbq-popover__close {
+    // Without a header there is no padded strip to sit in, so the button straddles the trailing top corner
+    // of the panel instead of overlapping the content, which would scroll it out of view.
+    top: 0;
+    inset-inline-end: 0;
 
-    .kbq-popover__close {
-        top: auto;
-        right: auto;
-        transform: translateY(-50%) translateX(50%);
-    }
+    // `transform` has no logical form, so the half-step out of the panel has to be mirrored by hand.
+    // Left physical it would keep pushing towards the right under `dir="rtl"`, where `inset-inline-end` has
+    // already moved the button to the left edge — putting it inside the panel, on top of the content.
+    @include common.rtl('transform', translateY(-50%) translateX(50%), translateY(-50%) translateX(-50%));
 }
 
 .kbq-popover__header {
     position: relative;
-    z-index: 2;
+    z-index: $z-index-above-content;
 
     display: flex;
     flex-shrink: 0;
@@ -106,12 +128,12 @@ $arrow-padding: 24px;
 }
 
 .kbq-popover__header_with-close-button {
-    padding-right: var(--kbq-size-4xl);
+    padding-inline-end: var(--kbq-size-4xl);
 }
 
 .kbq-popover__footer {
     position: relative;
-    z-index: 2;
+    z-index: $z-index-above-content;
 }
 
 .kbq-popover__footer.kbq-popover__footer_default-paddings {
@@ -121,7 +143,7 @@ $arrow-padding: 24px;
 .kbq-popover__arrow {
     position: absolute;
 
-    z-index: -1;
+    z-index: $z-index-arrow;
 
     width: $arrow-size;
     height: $arrow-size;
@@ -133,10 +155,10 @@ $arrow-padding: 24px;
 
 .kbq-popover__close {
     position: absolute;
-    z-index: 2;
+    z-index: $z-index-above-content;
     top: var(--kbq-size-s);
-    right: var(--kbq-size-s);
-    border-radius: var(--kbq-size-border-radius);
+    inset-inline-end: var(--kbq-size-s);
+    @include kbq-squircle(var(--kbq-size-border-radius));
 }
 
 @include kbq-popover-theme();