@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.11

package/button-toggle/button-toggle.scss

@@ -13,116 +13,82 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    gap: map.get($tokens, size-3xs);
 
-    border-width: var(
-        --kbq-button-toggle-group-size-border-width,
-        map.get($tokens, button-toggle-group-size-border-width)
+    gap: var(
+        --kbq-button-toggle-size-container-content-gap-horizontal,
+        map.get($tokens, button-toggle-size-container-content-gap-horizontal)
     );
+
     border-radius: var(
-        --kbq-button-toggle-group-size-border-radius,
-        map.get($tokens, button-toggle-group-size-border-radius)
-    );
-    border-style: solid;
-    padding: var(
-        --kbq-button-toggle-group-size-padding,
-        map.get($tokens, button-toggle-group-size-padding)
+        --kbq-button-toggle-size-container-border-radius,
+        map.get($tokens, button-toggle-size-container-border-radius)
     );
 
+    padding:
+        var(
+            --kbq-button-toggle-size-container-padding-vertical,
+            map.get($tokens, button-toggle-size-container-padding-vertical)
+        )
+        var(
+            --kbq-button-toggle-size-container-padding-horizontal,
+            map.get($tokens, button-toggle-size-container-padding-horizontal)
+        );
+
     .kbq-button-toggle {
         display: flex;
         overflow: hidden;
         justify-content: flex-start;
 
+        $padding-vertical: map.get($tokens, button-toggle-size-item-padding-vertical);
+        $padding-horizontal: map.get($tokens, button-toggle-size-item-padding-horizontal);
+        $outline-width: map.get($tokens, button-toggle-size-item-focus-outline-width);
+
         border-radius: var(
-            --kbq-button-toggle-size-border-radius,
-            map.get($tokens, button-toggle-size-border-radius)
+            --kbq-button-toggle-size-item-border-radius,
+            map.get($tokens, button-toggle-size-item-border-radius)
         );
 
         > .kbq-button,
         > .kbq-button-icon {
-            border: none;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
-            );
-            min-width: var(
-                --kbq-button-toggle-size-min-width,
-                map.get($tokens, button-toggle-size-min-width)
-            );
-            padding-left: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
-            );
-            padding-right: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
 
+            padding:
+                calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
+                calc(var(--kbq-button-toggle-size-item-padding-horizontal, $padding-horizontal) - $outline-width);
+
             & .kbq-button-wrapper {
                 width: 100%;
+
             }
 
             .kbq-button-toggle-wrapper {
+                display: inline-flex;
+
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
-                display: inline-block;
-                width: 100%;
 
-                .kbq-icon {
-                    line-height: 20px;
-                    vertical-align: baseline;
-                }
-            }
-        }
+                width: 100%;
 
-        &.kbq-button-toggle-icon-text {
-            > .kbq-button,
-            > .kbq-button-icon {
-                padding-left: var(
-                    --kbq-button-toggle-size-left-icon-padding,
-                    map.get($tokens, button-toggle-size-left-icon-padding)
+                gap: var(
+                    --kbq-button-toggle-size-item-content-gap-horizontal,
+                    map.get($tokens, button-toggle-size-item-content-gap-horizontal)
                 );
-
-                & .kbq-icon {
-                    margin-right: map.get($tokens, size-xxs);
-                }
             }
         }
-
-        &[disabled] {
-            outline: 0;
-        }
     }
 
     &:not(.kbq-button-toggle_vertical) {
-        height: 32px;
-
         .kbq-button-toggle {
             > .kbq-button,
             > .kbq-button-icon {
-                height: 28px;
-                min-height: 28px;
-            }
+                max-width: 100%;
 
-            &.kbq-button-toggle-icon {
-                width: var(
-                    --kbq-button-icon-toggle-size-width,
-                    map.get($tokens, icon-button-toggle-size-width)
-                );
-
-                > .kbq-button,
-                > .kbq-button-icon {
-                    width: var(
-                        --kbq-button-icon-toggle-size-width,
-                        map.get($tokens, icon-button-toggle-size-width)
-                    );
-                }
+                height: unset;
+                min-height: unset;
             }
         }
     }
@@ -132,32 +98,19 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-button-toggle_vertical {
     flex-direction: column;
 
-    .kbq-button-toggle + .kbq-button-toggle {
-        border-left: none;
-        border-right: none;
-    }
-
     .kbq-button-toggle {
         width: 100%;
 
         > .kbq-button,
         > .kbq-button-icon {
             width: 100%;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
 
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
         }
     }
 }
 
 /* stylelint-enable no-descending-specificity */
-
-.kbq-button-toggle-standalone {
-    box-shadow: none;
-}

package/card/_card-theme.scss

@@ -22,7 +22,7 @@
     $is-dark: map.get($theme, is-dark);
 
     .kbq-card {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
 
         &.kbq-card_error {
             @include kbq-card-type(map.get($card, error));

package/checkbox/README.md

@@ -1 +1 @@
-Please see the official documentation at https://github.com/positive-js/mosaic
+Please see the official documentation at #

package/checkbox/_checkbox-theme.scss

@@ -24,6 +24,10 @@
         }
     }
 
+    & .kbq-hint .kbq-hint__text {
+        color: map.get($default, caption);
+    }
+
     &:hover,
     &.kbq-hover {
         @include kbq-checkbox-state(map.get($checkbox, hover));
@@ -74,6 +78,10 @@
                 color: map.get($disabled, color);
             }
         }
+
+        & .kbq-hint .kbq-hint__text {
+            color: map.get($disabled, caption);
+        }
     }
 }
 /* stylelint-enable no-descending-specificity */
@@ -105,7 +113,7 @@
     .kbq-checkbox {
         @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-label));
 
-        & .kbq-hint {
+        & .kbq-hint .kbq-hint__text {
             @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-caption));
         }
     }
@@ -113,7 +121,7 @@
     .kbq-checkbox.kbq-checkbox_big {
         @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-label));
 
-        & .kbq-hint {
+        & .kbq-hint .kbq-hint__text {
             @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-caption));
         }
     }

package/checkbox/checkbox.d.ts

@@ -39,7 +39,7 @@ export declare class KbqCheckboxBase {
 /** @docs-private */
 export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanDisableCtor & typeof KbqCheckboxBase;
 /**
- * A mosaic checkbox component. Supports all of the functionality of an HTML5 checkbox,
+ * A Koobiq checkbox component. Supports all of the functionality of an HTML5 checkbox,
  * and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or
  * disabled. Note that all additional accessibility attributes are taken care of by the component,
  * so there is no need to provide them yourself. However, if you want to omit a label and still
@@ -129,5 +129,5 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["mcCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
 }

package/code-block/README.md

@@ -4,15 +4,15 @@
 
 | Property               | Description                                                                                                                                                                              | Type                  | Default |
 |------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
-| mcPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
-| mcTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
-| mcVisible              | Ручное управление показом, используется только при mcTrigger="manual"                                                                                                             | boolean               | false   |
-| mcPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
-| mcPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
-| mcPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
-| mcPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
-| mcPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
-| mcVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+| kbqPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
+| kbqTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
+| kbqVisible              | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                             | boolean               | false   |
+| kbqPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
+| kbqPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
+| kbqPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
+| kbqPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
+| kbqPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
+| kbqVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
 
 ## Example
 
@@ -22,11 +22,11 @@
 </ng-template>
  
 <button
-    mcPopover
-    [mcTrigger]="'hover'"
-    [mcPlacement]="'top'"
-    [mcPopoverHeader]="'Это header'"
-    [mcPopoverContent]="customContent">
+    kbqPopover
+    [kbqTrigger]="'hover'"
+    [kbqPlacement]="'top'"
+    [kbqPopoverHeader]="'Это header'"
+    [kbqPopoverContent]="customContent">
     Найти Эйяфьядлайёкюдль
 </button>
 ```

package/code-block/_code-block-theme.scss

@@ -5,13 +5,39 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
+@mixin kbq-code-block-style($style) {
+    $container: map.get($style, container);
+    $actionbar: map.get($style, actionbar);
+
+    border-color: map.get($container, border);
+    background: map.get($container, background);
+
+    & .kbq-tab-header {
+        $header: map.get($style, header);
+        background: map.get($header, background) !important;
+    }
+
+    &:not(.kbq-code-block_no-header) .kbq-code-block__code {
+        box-shadow: map.get($container, shadow);
+    }
+
+    &.kbq-code-block_no-header {
+        & .kbq-code-block__fade-gradient {
+            display: block;
+
+            background: map.get($actionbar, fade-gradient)
+        }
+    }
+
+    & .kbq-code-block-actionbar {
+        background: map.get($actionbar, background);
+    }
+}
+
 @mixin kbq-code-block-theme($theme) {
     $code-block: map.get(map.get($theme, components), code-block);
 
     .kbq-code-block {
-        background-color: map.get($code-block, main-background);
-        border-color: map.get($code-block, border);
-
         .hljs {
             $hljs: map.get($code-block, hljs);
 
@@ -282,12 +308,22 @@
             }
         }
 
-        &.kbq-code-block_less-contrast {
-            background-color: map.get($code-block, main-background-less-contrast);
+        &.kbq-code-block_outline {
+            @include kbq-code-block-style(map.get($code-block, outline));
         }
 
-        .kbq-tab-group:after {
-            background: map.get($code-block, border);
+        &.kbq-code-block_filled {
+            @include kbq-code-block-style(map.get($code-block, filled));
+
+            $collapse: map.get(map.get($code-block, filled), collapse);
+
+            & .kbq-code-block__show-more_expanded {
+                background: map.get($collapse, expanded-background);
+            }
+
+            & .kbq-code-block__show-more_collapsed {
+                background: map.get($collapse, collapsed-background);
+            }
         }
 
         .kbq-tab-header {
@@ -298,7 +334,6 @@
         }
 
         .kbq-code-block__show-more {
-            border-top-color: map.get($code-block, border) !important;
         }
     }
 
@@ -319,8 +354,12 @@
     .kbq-code-block {
         @include kbq-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
 
-        .hljs-ln-numbers {
-            @include kbq-typography-level-to-styles($config, caption-mono);
+        & .kbq-code-block__code {
+            font: inherit;
+
+            > code {
+                font: inherit;
+            }
         }
     }
 }

package/code-block/actionbar.component.scss

@@ -13,12 +13,40 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: absolute;
 
-    top: 4px;
-    right: 8px;
-
-    gap: map.get($tokens, code-block-size-actionbar-gap);
-
-    border-radius: map.get($tokens, code-block-size-actionbar-border-radius);
+    top: 0;
+    right: 0;
+
+    padding:
+        var(
+            --kbq-code-block-size-actionbar-padding-vertical,
+            map.get($tokens, code-block-size-actionbar-padding-vertical)
+        )
+        var(
+            --kbq-code-block-size-actionbar-padding-horizontal,
+            map.get($tokens, code-block-size-actionbar-padding-horizontal)
+        );
+
+    gap: var(
+        --kbq-code-block-size-actionbar-content-gap-horizontal,
+        map.get($tokens, code-block-size-actionbar-content-gap-horizontal)
+    );
+
+    & .kbq-code-block__fade-gradient {
+        display: none;
+
+        width: var(
+            --kbq-code-block-size-actionbar-fade-gradient-width,
+            map.get($tokens, code-block-size-actionbar-fade-gradient-width)
+        );
+        height: 40px;
+
+        margin-top: calc(
+            var(
+                --kbq-code-block-size-actionbar-padding-vertical,
+                map.get($tokens, code-block-size-actionbar-padding-vertical)
+            ) * -1
+        );
+    }
 
     &.kbq-actionbar-block_floating {
         top: map.get($tokens, code-block-size-actionbar-margin-top);

package/code-block/code-block.component.d.ts

@@ -44,7 +44,7 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     tabGroup: KbqTabGroup;
     lineNumbers: boolean;
     codeFiles: KbqCodeFile[];
-    lessContrast: boolean;
+    filled: boolean;
     maxHeight: number;
     softWrap: boolean;
     get noHeader(): any;
@@ -70,5 +70,5 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     private updateMultiline;
     private getFullFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["mcCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
 }

package/code-block/code-block.scss

@@ -9,6 +9,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-code-block {
     display: block;
     position: relative;
+    overflow: hidden;
 
     box-sizing: border-box;
 
@@ -17,24 +18,62 @@ $tokens: meta.module-variables(tokens) !default;
     -moz-hyphens: none;
     -webkit-hyphens: none;
 
-    border-width: 1px;
+    border-width: var(
+        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
+    );
     border-style: solid;
-    border-radius: map.get($tokens, code-block-size-border-radius);
-
-    &:not(.kbq-code-block_no-header) .kbq-tab-group:after {
-        content: "";
-
-        position: absolute;
-        top: 39px;
-        left: 0;
-        right: 0;
-
-        height: 1px;
-    }
+    border-radius: var(
+        --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
+    );
 
     .kbq-tab-header {
         // 4 buttons + margin
         margin-right: calc(32 * 4) + 24px;
+
+        padding:
+            var(
+                --kbq-code-block-size-header-padding-vertical,
+                map.get($tokens, code-block-size-header-padding-vertical)
+            )
+            var(
+                --kbq-code-block-size-header-padding-right,
+                map.get($tokens, code-block-size-header-padding-right)
+            )
+            var(
+                --kbq-code-block-size-header-padding-vertical,
+                map.get($tokens, code-block-size-header-padding-vertical)
+            ) var(
+                --kbq-code-block-size-header-padding-left,
+                map.get($tokens, code-block-size-header-padding-left)
+            );
+    }
+
+    .kbq-code-block__code {
+        > code {
+            padding:
+                var(
+                    --kbq-code-block-size-with-header-content-padding-top,
+                    map.get($tokens, code-block-size-with-header-content-padding-top)
+                )
+                var(
+                    --kbq-code-block-size-with-header-content-padding-horizontal,
+                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
+                )
+                var(
+                    --kbq-code-block-size-with-header-content-padding-bottom,
+                    map.get($tokens, code-block-size-with-header-content-padding-bottom)
+                ) var(
+                    --kbq-code-block-size-with-header-content-padding-horizontal,
+                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
+                );
+        }
+
+        .hljs-ln-numbers {
+            padding-right: var(
+                --kbq-code-block-size-with-header-content-content-gap-horizontal,
+                map.get($tokens, code-block-size-with-header-content-content-gap-horizontal)
+            );
+        }
     }
 
     &.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers {
@@ -54,12 +93,31 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-code-block_no-header {
+        .kbq-tab-header {
+            display: none;
+        }
+
         .kbq-code-block__code {
             position: relative;
-        }
 
-        .kbq-tab-header {
-            display: none;
+            & > code {
+                padding:
+                    var(
+                        --kbq-code-block-size-no-header-content-padding-vertical,
+                        map.get($tokens, code-block-size-no-header-content-padding-vertical)
+                    )
+                    var(
+                        --kbq-code-block-size-no-header-content-padding-horizontal,
+                        map.get($tokens, code-block-size-no-header-content-padding-horizontal)
+                    );
+            }
+
+            .hljs-ln-numbers {
+                padding-right: var(
+                    --kbq-code-block-size-no-header-content-content-gap-horizontal,
+                    map.get($tokens, code-block-size-no-header-content-content-gap-horizontal)
+                );
+            }
         }
     }
 
@@ -89,10 +147,6 @@ $tokens: meta.module-variables(tokens) !default;
         white-space: pre-wrap
     }
 
-    > code {
-        padding: map.get($tokens, code-block-size-padding) !important;
-    }
-
     .hljs-ln {
         border-collapse: unset;
 
@@ -102,9 +156,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .hljs-ln-numbers {
-        border-right-width: map.get($tokens, code-block-size-line-numbers-border-width);
-        padding: map.get($tokens, code-block-size-line-numbers-padding);
-
         vertical-align: baseline;
         text-align: right;
     }
@@ -115,14 +166,37 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-code-block__show-more {
+    display: flex;
+    justify-content: center;
     overflow: hidden;
 
     width: 100%;
 
-    border-top-style: solid !important;
-    border-top-width: 1px !important;
+    position: absolute;
+    bottom: 0;
 
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
+    &.kbq-code-block__show-more_collapsed {
+        padding-top: var(
+            --kbq-code-block-size-collapse-collapsed-padding-top,
+            map.get($tokens, code-block-size-collapse-collapsed-padding-top)
+        );
+
+        padding-bottom: var(
+            --kbq-code-block-size-collapse-collapsed-padding-bottom,
+            map.get($tokens, code-block-size-collapse-collapsed-padding-bottom)
+        );
+    }
+
+    &.kbq-code-block__show-more_expanded {
+        padding-top: var(
+            --kbq-code-block-size-collapse-expanded-padding-top,
+            map.get($tokens, code-block-size-collapse-expanded-padding-top)
+        );
+
+        padding-bottom: var(
+            --kbq-code-block-size-collapse-expanded-padding-bottom,
+            map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
+        );
+    }
 }
 /* stylelint-enable no-descending-specificity */

package/core/animation/index.d.ts

@@ -1,3 +1,3 @@
 export { fadeAnimation } from './fade-animations';
 export * from './animation';
-export { mcSelectAnimations } from './select-animations';
+export { kbqSelectAnimations } from './select-animations';

package/core/animation/select-animations.d.ts

@@ -4,7 +4,7 @@ import { AnimationTriggerMetadata } from '@angular/animations';
  * const containing the metadata for one animation.
  *
  */
-export declare const mcSelectAnimations: {
+export declare const kbqSelectAnimations: {
     readonly transformPanel: AnimationTriggerMetadata;
     readonly fadeInContent: AnimationTriggerMetadata;
 };