@koobiq/components 20.4.2 → 21.0.0

package/schematics/utils/package-config.js

@@ -1,109 +1,13 @@
 'use strict';
 
-var schematics = require('@angular-devkit/schematics');
-var utility = require('@schematics/angular/utility');
-var utils_messages = require('./messages.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+require('./messages.js');
+var utils_packageConfig = require('../package-config-BhU2TfC8.js');
 
-/**
- * Sorts the keys of the given object.
- * @returns A new object instance with sorted keys
- */
-function sortObjectByKeys(obj) {
-    return Object.keys(obj)
-        .sort()
-        .reduce((result, key) => (result[key] = obj[key]) && result, {});
-}
-/**
- * Adds a package to the package.json in the given tree
- */
-function addPackageToPackageJson(tree, pkg, version, devDependency = false) {
-    if (tree.exists('package.json')) {
-        const sourceText = tree.read('package.json').toString('utf-8');
-        const json = JSON.parse(sourceText);
-        const dependenciesType = devDependency ? 'devDependencies' : 'dependencies';
-        const dependencies = json[dependenciesType] || {};
-        if (!dependencies[pkg]) {
-            dependencies[pkg] = version;
-            json[dependenciesType] = sortObjectByKeys(dependencies);
-        }
-        tree.overwrite('package.json', JSON.stringify(json, null, 2));
-    }
-    return tree;
-}
-/**
- * Gets the version of the specified package by looking at the package.json in the given tree
- */
-function getPackageVersionFromPackageJson(tree, name, includeDevDependencies = false) {
-    if (!tree.exists('package.json')) {
-        return null;
-    }
-    const packageJson = JSON.parse(tree.read('package.json').toString('utf8'));
-    if (packageJson.dependencies && packageJson.dependencies[name]) {
-        return packageJson.dependencies[name];
-    }
-    if (includeDevDependencies && packageJson.devDependencies && packageJson.devDependencies[name]) {
-        return packageJson.devDependencies[name];
-    }
-    return null;
-}
-async function setupOptions(project, tree) {
-    if (project) {
-        const workspace = await utility.readWorkspace(tree);
-        const projectWorkspace = workspace.projects.get(project);
-        if (!projectWorkspace) {
-            throw new schematics.SchematicsException(utils_messages.noProject(project));
-        }
-        return projectWorkspace;
-    }
-}
-async function getParsingInfo(project, tree) {
-    const tsPaths = new Set();
-    const templatePaths = new Set();
-    const projectDefinition = await setupOptions(project, tree);
-    // `ng update` passes no options at all, so without a project the whole workspace is migrated.
-    const root = projectDefinition?.root;
-    (root ? tree.getDir(root) : tree.root).visit((filePath) => {
-        if (filePath.includes('node_modules') || filePath.includes('/dist/'))
-            return;
-        if (filePath.endsWith('.ts')) {
-            tsPaths.add(filePath);
-        }
-        if (filePath.endsWith('.html')) {
-            templatePaths.add(filePath);
-        }
-    });
-    return { tsPaths, templatePaths, projectDefinition };
-}
-/**
- * WARNING: do not change directly, since it's a copy of
- * https://github.com/angular/angular/blob/6fa8d441979fdbabb88dddd246f54587e17126e8/packages/core/schematics/utils/load_esm.ts
- *
- * This uses a dynamic import to load a module which may be ESM.
- * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
- * will currently, unconditionally downlevel dynamic import into a require call.
- * require calls cannot load ESM code and will result in a runtime error. To workaround
- * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
- * Once TypeScript provides support for keeping the dynamic import this workaround can
- * be dropped.
- * This is only intended to be used with Angular framework packages.
- *
- * @param modulePath The path of the module to load.
- * @returns A Promise that resolves to the dynamically imported module.
- */
-async function loadEsmModule(modulePath) {
-    const namespaceObject = await new Function('modulePath', `return import(modulePath);`)(modulePath);
-    // If it is not ESM then the values needed will be stored in the `default` property.
-    // TODO_ESM: This can be removed once `@angular/*` packages are ESM only.
-    if (namespaceObject.default) {
-        return namespaceObject.default;
-    }
-    else {
-        return namespaceObject;
-    }
-}
 
-exports.addPackageToPackageJson = addPackageToPackageJson;
-exports.getPackageVersionFromPackageJson = getPackageVersionFromPackageJson;
-exports.getParsingInfo = getParsingInfo;
-exports.loadEsmModule = loadEsmModule;
-exports.setupOptions = setupOptions;
+
+exports.addPackageToPackageJson = utils_packageConfig.addPackageToPackageJson;
+exports.getPackageVersionFromPackageJson = utils_packageConfig.getPackageVersionFromPackageJson;
+exports.getParsingInfo = utils_packageConfig.getParsingInfo;
+exports.setupOptions = utils_packageConfig.setupOptions;

package/scrollbar/{_scrollbar-component-theme.scss → deprecated/_scrollbar-component-theme.scss}

@@ -1,4 +1,4 @@
-@use '../core/styles/common/tokens' as *;
+@use '../../core/styles/common/tokens' as *;
 
 @mixin kbq-scrollbar-component-theme() {
     .kbq-scrollbar-component {

package/scrollbar/{scrollbar.component.scss → deprecated/scrollbar.component.scss}

@@ -1,4 +1,4 @@
-@use '../core/styles/common/tokens' as *;
+@use '../../core/styles/common/tokens' as *;
 @use './scrollbar-component-theme' as *;
 
 .kbq-scrollbar-component {

package/scrollbar/native-scrollbar.scss

@@ -0,0 +1,68 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+// `scrollbar-color` is inherited. Reset it on descendants unless the directive explicitly opts into
+// styling them; the zero-specificity selector lets a descendant's own scrollbar styles override this.
+@supports not selector(::-webkit-scrollbar) {
+    :where(.kbq-native-scrollbar:not(.kbq-native-scrollbar_descendants) *) {
+        scrollbar-color: auto;
+    }
+
+    .kbq-native-scrollbar,
+    .kbq-native-scrollbar_descendants * {
+        scrollbar-color: var(--kbq-scrollbar-thumb-default-background) var(--kbq-scrollbar-track-background);
+        // The standardized API only supports `auto`, `thin`, and `none`, so an exact token-based size
+        // is available only through the WebKit pseudo-elements below.
+        scrollbar-width: auto;
+    }
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar {
+    width: var(--kbq-scrollbar-track-size);
+    height: var(--kbq-scrollbar-track-size);
+    background-color: var(--kbq-scrollbar-track-background);
+    cursor: default;
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar-track,
+.kbq-native-scrollbar::-webkit-scrollbar-corner,
+.kbq-native-scrollbar::-webkit-resizer,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-track,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-corner,
+.kbq-native-scrollbar_descendants ::-webkit-resizer {
+    background-color: var(--kbq-scrollbar-track-background);
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar-thumb,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb {
+    box-sizing: border-box;
+    border: var(--kbq-scrollbar-thumb-gap) solid transparent;
+    border-radius: var(--kbq-size-border-radius);
+    background-color: var(--kbq-scrollbar-thumb-default-background);
+    background-clip: content-box;
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar-thumb:vertical,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:vertical {
+    min-height: calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2);
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar-thumb:horizontal,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:horizontal {
+    min-width: calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2);
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar-thumb:hover,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--kbq-scrollbar-thumb-hover-background);
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar-thumb:active,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:active {
+    background-color: var(--kbq-scrollbar-thumb-active-background);
+}
+
+.kbq-native-scrollbar::-webkit-scrollbar-button,
+.kbq-native-scrollbar_descendants ::-webkit-scrollbar-button {
+    display: none;
+}

package/scrollbar/scrollbar-tokens.scss

@@ -1,25 +1,16 @@
-:where(.kbq-scrollbar-component) {
-    --kbq-scrollbar-size-track-dimension: var(--kbq-size-l);
-    --kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);
-    --kbq-scrollbar-size-track-padding-horizontal: var(--kbq-size-3xs);
-    --kbq-scrollbar-size-thumb-width: var(--kbq-size-s);
-    --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
-    --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
-    /* THEME TOKENS */
-    --kbq-scrollbar-thumb-default-background: var(--kbq-semantic-contrast-a3, var(--kbq-palette-grey-50-a32));
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-contrast-a4, var(--kbq-palette-grey-50-a48));
-    --kbq-scrollbar-thumb-active-background: var(--kbq-semantic-contrast-a5, var(--kbq-palette-grey-20-a55));
-    --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
-    --kbq-scrollbar-track-default-border: transparent;
-    --kbq-scrollbar-track-default-background: transparent;
-    --kbq-scrollbar-track-hover-border: transparent;
-    --kbq-scrollbar-track-hover-background: transparent;
-    --kbq-scrollbar-track-active-border: transparent;
-    --kbq-scrollbar-track-active-background: transparent;
+:where(.kbq-scrollbar-viewport, .kbq-native-scrollbar) {
+    --kbq-scrollbar-thumb-min-size: var(--kbq-size-3xl);
+    --kbq-scrollbar-thumb-gap: 3px;
+    --kbq-scrollbar-track-size: 14px;
+    // Above any content inside the viewport. Safe as an absolute value because the viewport isolates it —
+    // it never competes with page-level layers such as the navbar or overlays.
+    --kbq-scrollbar-track-z-index: 1000;
+    --kbq-scrollbar-transition-duration: 0.15s;
+    --kbq-scrollbar-track-background: transparent;
 }
 
-:where(.kbq-dark .kbq-scrollbar-component) {
-    --kbq-scrollbar-thumb-default-background: var(--kbq-semantic-dark-contrast-a9, var(--kbq-palette-grey-50-a48));
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-dark-contrast-a10, var(--kbq-palette-grey-50-a60));
-    --kbq-scrollbar-thumb-active-background: var(--kbq-semantic-dark-contrast-a11, var(--kbq-palette-grey-50-a80));
+@media (prefers-reduced-motion: reduce) {
+    :where(.kbq-scrollbar-viewport, .kbq-native-scrollbar) {
+        --kbq-scrollbar-transition-duration: 0s;
+    }
 }

package/scrollbar/scrollbar-track.scss

@@ -0,0 +1,94 @@
+@use '../core/styles/common/animation';
+
+:host {
+    position: sticky;
+    z-index: var(--kbq-scrollbar-track-z-index, 1000);
+    display: block;
+    // Prevent a flex viewport from shrinking the track to zero; runtime margins cancel its layout contribution.
+    flex-shrink: 0;
+    pointer-events: none;
+    overflow: hidden;
+    // Inherit instance-level custom properties from the viewport that creates this element dynamically.
+    color: var(--kbq-scrollbar-color, currentColor);
+}
+
+@keyframes kbq-scrollbar-fade {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.kbq-scrollbar-track__bar {
+    position: absolute;
+    inset-inline-end: 0;
+    background: var(--kbq-scrollbar-track-background, transparent);
+    pointer-events: auto;
+}
+
+.kbq-scrollbar-track__bar_enter,
+.kbq-scrollbar-track__bar_leave {
+    animation: kbq-scrollbar-fade var(--kbq-scrollbar-transition-duration) ease-in-out;
+
+    @include animation.kbq-animations-off();
+}
+
+.kbq-scrollbar-track__bar_leave {
+    animation-direction: reverse;
+}
+
+.kbq-scrollbar-track__bar_vertical {
+    inset-block: 0;
+    inline-size: var(--kbq-scrollbar-track-size);
+}
+
+.kbq-scrollbar-track__bar_horizontal {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    block-size: var(--kbq-scrollbar-track-size);
+}
+
+.kbq-scrollbar-track__bar_has-horizontal {
+    inset-block-end: var(--kbq-scrollbar-track-size);
+}
+
+.kbq-scrollbar-track__bar_has-vertical {
+    inset-inline-end: var(--kbq-scrollbar-track-size);
+}
+
+.kbq-scrollbar-track__thumb {
+    transition: background-color var(--kbq-scrollbar-transition-duration) ease;
+    position: absolute;
+    // A transparent border keeps the painted thumb smaller than its hit area.
+    border: var(--kbq-scrollbar-thumb-gap) solid transparent;
+    border-radius: var(--kbq-size-border-radius);
+    box-sizing: border-box;
+    background-color: var(--kbq-scrollbar-thumb-default-background);
+    background-clip: content-box;
+    cursor: default;
+    user-select: none;
+    pointer-events: auto;
+
+    @include animation.kbq-animations-off();
+}
+
+.kbq-scrollbar-track__thumb:hover {
+    background-color: var(--kbq-scrollbar-thumb-hover-background);
+}
+
+.kbq-scrollbar-track__thumb:active {
+    background-color: var(--kbq-scrollbar-thumb-active-background);
+}
+
+.kbq-scrollbar-track__bar_vertical .kbq-scrollbar-track__thumb {
+    inset-inline: 0;
+    min-block-size: calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2);
+}
+
+.kbq-scrollbar-track__bar_horizontal .kbq-scrollbar-track__thumb {
+    inset-block: 0;
+    min-inline-size: calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2);
+}

package/scrollbar/scrollbar-viewport.scss

@@ -0,0 +1,33 @@
+@use '../core/styles/common/animation';
+
+// Confines the track's z-index to this element, mirroring how an OS draws its scrollbar as a sibling of
+// the scrolled content rather than a peer competing with it. Without this the track would either lose to
+// positioned content inside the viewport, or — once raised above it — leak past page-level layers.
+.kbq-scrollbar-viewport {
+    isolation: isolate;
+}
+
+.kbq-scrollbar-viewport_native-scrollbar-hidden {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.kbq-scrollbar-viewport_native-scrollbar-hidden::-webkit-scrollbar,
+.kbq-scrollbar-viewport_native-scrollbar-hidden::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.kbq-scrollbar-track_hover:not(:active) {
+    transition: opacity var(--kbq-scrollbar-transition-duration) ease;
+    opacity: 0;
+
+    @include animation.kbq-animations-off();
+}
+
+.kbq-scrollbar-viewport:hover > .kbq-scrollbar-track_hover,
+.kbq-scrollbar-track_hover.kbq-scrollbar-track_revealed {
+    transition: opacity var(--kbq-scrollbar-transition-duration) ease;
+    opacity: 1;
+
+    @include animation.kbq-animations-off();
+}

package/scrollbar/scrollbar.scss

@@ -0,0 +1,24 @@
+:host {
+    position: relative;
+    display: flex;
+    // Lets the host fill available space along whichever axis is the parent's main axis
+    // (cross-axis sizing is already handled by the parent's default `align-items: stretch`),
+    // so it behaves like a block element regardless of the parent's layout mode.
+    flex: 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+    max-block-size: 100%;
+    isolation: isolate;
+    overflow: auto;
+}
+
+.kbq-scrollbar__content {
+    isolation: isolate;
+    flex: 1;
+    flex-basis: auto;
+    inline-size: 100%;
+    // A hard 100% (not `min-block-size`) so a `height: 100%` chain inside projected content (e.g. a
+    // grid that needs a definite pixel height to render at all) resolves correctly — content taller
+    // than the host still overflows past it normally and is measured via `scrollHeight` regardless.
+    block-size: 100%;
+}

package/search-expandable/search-expandable-tokens.scss

@@ -0,0 +1,4 @@
+:where(.kbq-search-expandable) {
+    --kbq-search-expandable-close-button-size: var(--kbq-size-xxl);
+    --kbq-search-expandable-close-button-border-radius: var(--kbq-size-xxs);
+}

package/search-expandable/search-expandable.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/squircle' as *;
+
 .kbq-search-expandable {
     display: flex;
     flex-flow: row nowrap;
@@ -14,8 +16,8 @@
         align-items: center;
         justify-content: center;
 
-        border-radius: var(--kbq-size-xxs);
+        @include kbq-squircle(var(--kbq-search-expandable-close-button-border-radius));
 
-        height: var(--kbq-size-xxl);
+        height: var(--kbq-search-expandable-close-button-size);
     }
 }

package/select/_select-theme.scss

@@ -1,4 +1,3 @@
-@use '../core/styles/common/popup' as *;
 @use '../core/styles/common/select' as *;
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
@@ -7,8 +6,6 @@
     .kbq-select {
         color: var(--kbq-foreground-contrast);
 
-        // Invalid by `KbqValidateDirective`
-        &.kbq-control_has-validate-directive.ng-invalid,
         // Invalid by control `ErrorStateMatcher`
         &.kbq-invalid {
             color: var(--kbq-foreground-error);
@@ -27,11 +24,9 @@
         }
     }
 
-    .kbq-select__placeholder {
-        text-overflow: ellipsis;
-
-        color: var(--kbq-form-field-default-placeholder);
-    }
+    // Placeholder, search container and empty-result message: styled identically wherever a select-shaped
+    // panel is rendered, so the rules live next to the structure they belong to.
+    @include kbq-select-shared-theme();
 
     .kbq-select__panel {
         box-shadow: var(--kbq-select-panel-dropdown-shadow);
@@ -43,14 +38,6 @@
 
         @include kbq-select-footer-item-theme();
     }
-
-    .kbq-select__search-container {
-        border-bottom-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
-    }
-
-    .kbq-select__no-options-message {
-        color: var(--kbq-foreground-contrast-secondary);
-    }
 }
 
 @mixin kbq-select-typography() {

package/select/select.scss

@@ -46,11 +46,5 @@
     }
 }
 
-.kbq-form-field-type-select {
-    &:not(.kbq-disabled) .kbq-form-field-flex {
-        cursor: pointer;
-    }
-}
-
 @include kbq-select-theme();
 @include kbq-select-typography();

package/sidebar/sidebar.scss

@@ -1,9 +1,29 @@
+@use '../core/styles/common/animation';
+
 .kbq-sidebar {
     display: inline-block;
 
     height: 100%;
 
     overflow: hidden;
+
+    // Only between the opened and closed states: the initial width and one written from outside, such as by a
+    // splitter, apply at once.
+    &.kbq-sidebar_toggling {
+        transition:
+            min-width 100ms,
+            width 100ms,
+            max-width 100ms;
+        // An unconfigured bound is `inherit`, which does not interpolate: it flips halfway instead of clamping the
+        // width at once.
+        transition-behavior: allow-discrete;
+
+        &.kbq-sidebar_opened {
+            transition-duration: 200ms;
+        }
+
+        @include animation.kbq-animations-off();
+    }
 }
 
 .kbq-sidebar-opened,

package/sidepanel/_sidepanel-theme.scss

@@ -17,7 +17,7 @@
     }
 
     .kbq-overlay-dark-backdrop {
-        background: var(--kbq-background-overlay) !important;
+        background: var(--kbq-sidepanel-overlay-background);
     }
 }
 

package/sidepanel/sidepanel-tokens.scss

@@ -17,9 +17,15 @@
     --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);
     --kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);
     /* THEME TOKENS */
-    --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
     --kbq-sidepanel-container-background: var(--kbq-background-card);
     --kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);
     --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
     --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
 }
+
+// The backdrop is a sibling of the overlay host, not a descendant of the container, so it needs the
+// token declared on itself.
+.kbq-overlay-dark-backdrop {
+    /* THEME TOKENS */
+    --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
+}

package/sidepanel/sidepanel.scss

@@ -5,9 +5,12 @@
 @use '../core/styles/common/tokens' as *;
 
 @use './sidepanel-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
 
+$state-transition: 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
 @mixin _sidepanel-container($selected-side) {
     $sides: top, right, bottom, left;
     $opposite-sides: (
@@ -37,6 +40,14 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
     position: fixed;
     min-height: 0;
 
+    // The state of the container sets its `transform` and `opacity`, see `KbqSidepanelContainerComponent`.
+    transition:
+        transform $state-transition,
+        opacity $state-transition;
+    animation: kbq-sidepanel-enter $state-transition;
+
+    @include common.kbq-animations-off();
+
     /* stylelint-disable-next-line selector-class-pattern */
     .flex {
         min-height: 0;
@@ -84,8 +95,10 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
 }
 
 .kbq-sidepanel-container_right {
+    --kbq-sidepanel-transform-in: translateX(100%);
+
     right: 0;
-    transform: translateX(100%);
+    transform: var(--kbq-sidepanel-transform-in);
 
     .kbq-sidepanel-wrapper {
         flex-direction: row;
@@ -95,8 +108,10 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
 }
 
 .kbq-sidepanel-container_left {
+    --kbq-sidepanel-transform-in: translateX(-100%);
+
     left: 0;
-    transform: translateX(-100%);
+    transform: var(--kbq-sidepanel-transform-in);
 
     .kbq-sidepanel-wrapper {
         flex-direction: row-reverse;
@@ -106,8 +121,10 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
 }
 
 .kbq-sidepanel-container_top {
+    --kbq-sidepanel-transform-in: translateY(-100%);
+
     top: 0;
-    transform: translateY(-100%);
+    transform: var(--kbq-sidepanel-transform-in);
 
     .kbq-sidepanel-wrapper {
         flex-direction: column-reverse;
@@ -117,8 +134,10 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
 }
 
 .kbq-sidepanel-container_bottom {
+    --kbq-sidepanel-transform-in: translateY(100%);
+
     bottom: 0;
-    transform: translateY(100%);
+    transform: var(--kbq-sidepanel-transform-in);
 
     .kbq-sidepanel-wrapper {
         flex-direction: column;
@@ -166,7 +185,17 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
     min-height: 0;
     min-width: 0;
     width: 100%;
-    border-radius: var(--kbq-size-border-radius);
+    @include kbq-squircle(var(--kbq-size-border-radius));
+}
+
+// Host element of a component-based sidepanel, which the portal outlet inserts between
+// `.kbq-sidepanel-content` and the header/body/footer.
+.kbq-sidepanel-content-host {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
 }
 
 .kbq-sidepanel-header {
@@ -239,5 +268,12 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
     }
 }
 
+@keyframes kbq-sidepanel-enter {
+    from {
+        opacity: 0;
+        transform: var(--kbq-sidepanel-transform-in);
+    }
+}
+
 @include kbq-sidepanel-theme();
 @include kbq-sidepanel-typography();