@koobiq/components 20.4.1 → 21.0.0

package/button-toggle/button-toggle.scss

@@ -1,6 +1,9 @@
+@use '../core/styles/common/list';
+
 @use '../core/styles/common/tokens' as *;
 
 @use './button-toggle-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 .kbq-button-toggle-group {
     box-sizing: border-box;
@@ -10,7 +13,7 @@
 
     gap: var(--kbq-button-toggle-size-container-content-gap-horizontal);
 
-    border-radius: var(--kbq-button-toggle-size-container-border-radius);
+    @include kbq-squircle(var(--kbq-button-toggle-size-container-border-radius));
 
     padding: var(--kbq-button-toggle-size-container-padding-vertical)
         var(--kbq-button-toggle-size-container-padding-horizontal);
@@ -47,19 +50,20 @@
         height: var(--kbq-button-toggle-size-item-height);
         min-height: var(--kbq-button-toggle-size-item-height);
 
-        border-radius: var(--kbq-button-toggle-size-item-border-radius);
+        @include kbq-squircle(var(--kbq-button-toggle-size-item-border-radius));
         border: var(--kbq-size-border-width) solid transparent;
 
+        // `border-color` is the theme's to set, from the same token — declaring it here as well
+        // would only work by source order, and would break a consumer who overrides the token.
         &.cdk-keyboard-focused {
-            outline: 1px solid var(--kbq-states-line-focus-theme);
-            border-color: var(--kbq-states-line-focus-theme);
+            outline: 1px solid var(--kbq-button-toggle-item-states-focused-outline);
         }
 
         > .kbq-button,
         > .kbq-button-icon {
             height: inherit;
             min-height: inherit;
-            border-radius: var(--kbq-button-toggle-size-item-border-radius);
+            @include kbq-squircle(var(--kbq-button-toggle-size-item-border-radius));
             border-width: 0;
 
             padding: kbq-difference-series-css-variables(
@@ -93,15 +97,48 @@
             .kbq-button-toggle-wrapper {
                 display: inline-flex;
                 justify-content: center;
-
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
                 align-items: center;
 
                 width: 100%;
 
                 gap: var(--kbq-button-toggle-size-item-content-gap-horizontal);
+
+                // The button's base styles space its own slots with the button token; inside a toggle
+                // the row's `gap` is the whole spacing. Physical properties on purpose, so they
+                // override the same ones from the button.
+                > .kbq-button-prefix {
+                    margin-right: 0;
+                }
+
+                > .kbq-button-suffix {
+                    margin-left: 0;
+                }
+            }
+
+            .kbq-button-toggle-text {
+                @include list.kbq-truncate-line();
+
+                // must stay a block container: `text-overflow: ellipsis` is not painted on a flex box.
+                // `min-width: 0` is what lets this box — and only this box — absorb the shrink, so
+                // icons beside it keep their full size while the label truncates.
+                display: block;
+                min-width: 0;
+
+                // Legacy `<i kbq-icon> Text` markup is projected into the default slot, i.e. in here,
+                // and a block container costs it twice: the single space a template leaves around the
+                // label is painted next to the icon on top of the gap, and `vertical-align: middle`
+                // aligns the icon to the x-height rather than to the centre of the line box, leaving
+                // it ~1px low. Neither is reachable from CSS, so such an icon opts the label box into
+                // flex, where the space is trimmed at the line edge and the gap is the whole gap — at
+                // the cost of the ellipsis. `kbqButtonPrefix`/`kbqButtonSuffix` keep both, exactly as
+                // in `.kbq-button-text`. Scoped to a direct child so an icon nested deeper in the
+                // label (e.g. inside a projected badge) does not also give the ellipsis up.
+                &:has(> .kbq-icon) {
+                    display: flex;
+                    align-items: center;
+
+                    gap: var(--kbq-button-toggle-size-item-content-gap-horizontal);
+                }
             }
 
             &.cdk-keyboard-focused {
@@ -178,13 +215,28 @@
                 .kbq-button-wrapper {
                     justify-content: center;
                 }
-
-                .kbq-button-toggle-wrapper {
-                    display: block;
-                }
             }
         }
     }
+
+    // Content that is neither text nor an icon, down to a consumer's own wrapper element, has nothing
+    // to truncate and is only centred exactly by a flex context. `:has()` cannot decide this on its
+    // own — it would have to tell such content from a label containing an icon, and selectors cannot
+    // see text nodes — so the class is computed by `KbqButtonCssStyler`. Keyed off the button's own
+    // classes rather than `kbq-button-toggle-icon`, which describes the toggle as a whole and not the
+    // box that has to lay the content out.
+    .kbq-button-toggle > :is(.kbq-button, .kbq-button-icon).kbq-button_no-label .kbq-button-toggle-text {
+        display: flex;
+        align-items: center;
+    }
+
+    // Content in a marker slot with nothing beside it: the empty label box would still take a gap of
+    // the row and push that content off centre. Written with the same prefix as the rule above and
+    // declared last, so it wins the tie on specificity — a bare `.kbq-button-toggle-text:empty` would
+    // lose to both rules above it.
+    .kbq-button-toggle > :is(.kbq-button, .kbq-button-icon) .kbq-button-toggle-text:empty {
+        display: none;
+    }
 }
 
 .kbq-button-toggle_vertical {
@@ -196,8 +248,6 @@
         > .kbq-button,
         > .kbq-button-icon {
             width: 100%;
-
-            border-radius: var(--kbq-button-toggle-size-item-border-radius);
         }
     }
 }

package/checkbox/_checkbox-theme.scss

@@ -1,4 +1,3 @@
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-checkbox-color($style-name) {
@@ -18,7 +17,8 @@
         color: var(--kbq-#{$base}-default-text);
     }
 
-    & .kbq-hint .kbq-hint__text {
+    // A projected `kbq-error` is a hint too, and keeps its own color. `:where` leaves the specificity as it was.
+    & .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text {
         color: var(--kbq-#{$base}-default-caption);
     }
 
@@ -90,7 +90,8 @@
     .kbq-checkbox {
         @include kbq-checkbox-color(theme);
 
-        &.kbq-error {
+        &.kbq-error,
+        &.kbq-invalid {
             @include kbq-checkbox-color(error);
         }
     }

package/checkbox/checkbox.scss

@@ -1,4 +1,5 @@
 @use './checkbox-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 .kbq-checkbox__frame {
     display: flex;
@@ -9,7 +10,7 @@
     pointer-events: none;
     background-color: transparent;
 
-    border-radius: var(--kbq-checkbox-size-normal-border-radius);
+    @include kbq-squircle(var(--kbq-checkbox-size-normal-border-radius));
 
     border: {
         width: var(--kbq-checkbox-size-normal-border-width);
@@ -34,10 +35,6 @@
 
     cursor: pointer;
 
-    padding-top: var(--kbq-checkbox-size-normal-padding-top);
-
-    padding-bottom: var(--kbq-checkbox-size-normal-padding-bottom);
-
     padding-left: var(--padding);
 
     vertical-align: top;
@@ -110,7 +107,7 @@
     }
 
     & .kbq-checkbox__frame {
-        border-radius: var(--kbq-checkbox-size-big-border-radius);
+        @include kbq-squircle(var(--kbq-checkbox-size-big-border-radius));
 
         border: {
             width: var(--kbq-checkbox-size-big-border-width);

package/clamped-text/clamped-text.scss

@@ -6,12 +6,16 @@
 .kbq-clamped-text__content {
     &.kbq-clamped-text__content_collapsed {
         display: -webkit-box;
-        overflow-y: hidden;
+        // Both axes, so the block does not become a scroll container in the inline axis:
+        // per CSS Overflow a `visible` axis computes to `auto` when the other one is not `visible`.
+        overflow: hidden;
         -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--kbq-clamped-text-line-clamp);
+        line-clamp: var(--kbq-clamped-text-line-clamp);
     }
 }
 
 .kbq-clamped-text__toggle {
-    margin-top: var(--kbq-size-xxs);
+    margin-top: var(--kbq-clamped-text-size-toggle-margin, var(--kbq-size-xxs));
     align-self: flex-start;
 }

package/code-block/code-block-tokens.scss

@@ -15,108 +15,6 @@
     --kbq-code-block-size-collapse-expanded-padding-bottom: var(--kbq-size-l);
     --kbq-code-block-size-collapse-collapsed-padding-top: var(--kbq-size-3xl);
     --kbq-code-block-size-collapse-collapsed-padding-bottom: var(--kbq-size-l);
-    --kbq-code-block-font-hljs-addition-font-style: null;
-    --kbq-code-block-font-hljs-addition-font-weight: null;
-    --kbq-code-block-font-hljs-attr-font-style: null;
-    --kbq-code-block-font-hljs-attr-font-weight: null;
-    --kbq-code-block-font-hljs-attribute-font-style: null;
-    --kbq-code-block-font-hljs-attribute-font-weight: null;
-    --kbq-code-block-font-hljs-built-in-font-style: null;
-    --kbq-code-block-font-hljs-built-in-font-weight: null;
-    --kbq-code-block-font-hljs-bullet-font-style: null;
-    --kbq-code-block-font-hljs-bullet-font-weight: null;
-    --kbq-code-block-font-hljs-char-escape-font-style: null;
-    --kbq-code-block-font-hljs-char-escape-font-weight: null;
-    --kbq-code-block-font-hljs-class-font-style: null;
-    --kbq-code-block-font-hljs-class-font-weight: null;
-    --kbq-code-block-font-hljs-code-font-style: null;
-    --kbq-code-block-font-hljs-code-font-weight: null;
-    --kbq-code-block-font-hljs-comment-font-style: null;
-    --kbq-code-block-font-hljs-comment-font-weight: null;
-    --kbq-code-block-font-hljs-deletion-font-style: null;
-    --kbq-code-block-font-hljs-deletion-font-weight: null;
-    --kbq-code-block-font-hljs-doctag-font-style: null;
-    --kbq-code-block-font-hljs-doctag-font-weight: null;
-    --kbq-code-block-font-hljs-emphasis-font-style: null;
-    --kbq-code-block-font-hljs-emphasis-font-weight: null;
-    --kbq-code-block-font-hljs-formula-font-style: null;
-    --kbq-code-block-font-hljs-formula-font-weight: null;
-    --kbq-code-block-font-hljs-function-font-style: null;
-    --kbq-code-block-font-hljs-function-font-weight: null;
-    --kbq-code-block-font-hljs-keyword-font-style: null;
-    --kbq-code-block-font-hljs-keyword-font-weight: null;
-    --kbq-code-block-font-hljs-link-font-style: null;
-    --kbq-code-block-font-hljs-link-font-weight: null;
-    --kbq-code-block-font-hljs-literal-font-style: null;
-    --kbq-code-block-font-hljs-literal-font-weight: null;
-    --kbq-code-block-font-hljs-meta-font-style: null;
-    --kbq-code-block-font-hljs-meta-font-weight: null;
-    --kbq-code-block-font-hljs-meta-keyword-font-style: null;
-    --kbq-code-block-font-hljs-meta-keyword-font-weight: null;
-    --kbq-code-block-font-hljs-meta-string-font-style: null;
-    --kbq-code-block-font-hljs-meta-string-font-weight: null;
-    --kbq-code-block-font-hljs-meta-prompt-font-style: null;
-    --kbq-code-block-font-hljs-meta-prompt-font-weight: null;
-    --kbq-code-block-font-hljs-name-font-style: null;
-    --kbq-code-block-font-hljs-name-font-weight: null;
-    --kbq-code-block-font-hljs-number-font-style: null;
-    --kbq-code-block-font-hljs-number-font-weight: null;
-    --kbq-code-block-font-hljs-operator-font-style: null;
-    --kbq-code-block-font-hljs-operator-font-weight: null;
-    --kbq-code-block-font-hljs-params-font-style: null;
-    --kbq-code-block-font-hljs-params-font-weight: null;
-    --kbq-code-block-font-hljs-property-font-style: null;
-    --kbq-code-block-font-hljs-property-font-weight: null;
-    --kbq-code-block-font-hljs-punctuation-font-style: null;
-    --kbq-code-block-font-hljs-punctuation-font-weight: null;
-    --kbq-code-block-font-hljs-quote-font-style: null;
-    --kbq-code-block-font-hljs-quote-font-weight: null;
-    --kbq-code-block-font-hljs-regexp-font-style: null;
-    --kbq-code-block-font-hljs-regexp-font-weight: null;
-    --kbq-code-block-font-hljs-section-font-style: null;
-    --kbq-code-block-font-hljs-section-font-weight: null;
-    --kbq-code-block-font-hljs-selector-attr-font-style: null;
-    --kbq-code-block-font-hljs-selector-attr-font-weight: null;
-    --kbq-code-block-font-hljs-selector-class-font-style: null;
-    --kbq-code-block-font-hljs-selector-class-font-weight: null;
-    --kbq-code-block-font-hljs-selector-id-font-style: null;
-    --kbq-code-block-font-hljs-selector-id-font-weight: null;
-    --kbq-code-block-font-hljs-selector-pseudo-font-style: null;
-    --kbq-code-block-font-hljs-selector-pseudo-font-weight: null;
-    --kbq-code-block-font-hljs-selector-tag-font-style: null;
-    --kbq-code-block-font-hljs-selector-tag-font-weight: null;
-    --kbq-code-block-font-hljs-string-font-style: null;
-    --kbq-code-block-font-hljs-string-font-weight: null;
-    --kbq-code-block-font-hljs-strong-font-style: null;
-    --kbq-code-block-font-hljs-strong-font-weight: null;
-    --kbq-code-block-font-hljs-subst-font-style: null;
-    --kbq-code-block-font-hljs-subst-font-weight: null;
-    --kbq-code-block-font-hljs-symbol-font-style: null;
-    --kbq-code-block-font-hljs-symbol-font-weight: null;
-    --kbq-code-block-font-hljs-tag-font-style: null;
-    --kbq-code-block-font-hljs-tag-font-weight: null;
-    --kbq-code-block-font-hljs-template-tag-font-style: null;
-    --kbq-code-block-font-hljs-template-tag-font-weight: null;
-    --kbq-code-block-font-hljs-template-variable-font-style: null;
-    --kbq-code-block-font-hljs-template-variable-font-weight: null;
-    --kbq-code-block-font-hljs-title-font-style: null;
-    --kbq-code-block-font-hljs-title-font-weight: null;
-    --kbq-code-block-font-hljs-title-class-font-style: normal;
-    --kbq-code-block-font-hljs-title-class-font-weight: 500;
-    --kbq-code-block-font-hljs-title-class-inherited-font-style: null;
-    --kbq-code-block-font-hljs-title-class-inherited-font-weight: null;
-    --kbq-code-block-font-hljs-title-function-font-style: null;
-    --kbq-code-block-font-hljs-title-function-font-weight: null;
-    --kbq-code-block-font-hljs-title-function-invoke-font-style: null;
-    --kbq-code-block-font-hljs-title-function-invoke-font-weight: null;
-    --kbq-code-block-font-hljs-type-font-style: null;
-    --kbq-code-block-font-hljs-type-font-weight: null;
-    --kbq-code-block-font-hljs-variable-font-style: null;
-    --kbq-code-block-font-hljs-variable-font-weight: null;
-    --kbq-code-block-font-hljs-variable-constant-font-style: null;
-    --kbq-code-block-font-hljs-variable-constant-font-weight: null;
-    --kbq-code-block-font-hljs-variable-language-font-style: null;
-    --kbq-code-block-font-hljs-variable-language-font-weight: null;
     /* THEME TOKENS */
     --kbq-code-block-filled-container-background: var(--kbq-background-contrast-less);
     --kbq-code-block-filled-container-border-color: transparent;
@@ -142,127 +40,5 @@
         var(--kbq-background-bg) 100%
     );
     --kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-card);
-    --kbq-code-block-hljs-addition-background: var(--kbq-plt-green-a2, var(--kbq-palette-green-95));
-    --kbq-code-block-hljs-addition-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
-    --kbq-code-block-hljs-attr-background: null;
-    --kbq-code-block-hljs-attr-color: null;
-    --kbq-code-block-hljs-attribute-background: null;
-    --kbq-code-block-hljs-attribute-color: null;
-    --kbq-code-block-hljs-built-in-background: null;
-    --kbq-code-block-hljs-built-in-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-bullet-background: null;
-    --kbq-code-block-hljs-bullet-color: null;
-    --kbq-code-block-hljs-char-escape-background: null;
-    --kbq-code-block-hljs-char-escape-color: null;
-    --kbq-code-block-hljs-class-background: null;
-    --kbq-code-block-hljs-class-color: null;
-    --kbq-code-block-hljs-code-background: null;
-    --kbq-code-block-hljs-code-color: null;
-    --kbq-code-block-hljs-comment-background: null;
-    --kbq-code-block-hljs-comment-color: var(--kbq-plt-slate-a16, var(--kbq-palette-grey-60));
-    --kbq-code-block-hljs-deletion-background: var(--kbq-plt-red-a2, var(--kbq-palette-red-95));
-    --kbq-code-block-hljs-deletion-color: var(--kbq-plt-red-a16, var(--kbq-palette-red-35));
-    --kbq-code-block-hljs-doctag-background: null;
-    --kbq-code-block-hljs-doctag-color: null;
-    --kbq-code-block-hljs-emphasis-background: null;
-    --kbq-code-block-hljs-emphasis-color: null;
-    --kbq-code-block-hljs-formula-background: null;
-    --kbq-code-block-hljs-formula-color: null;
-    --kbq-code-block-hljs-function-background: null;
-    --kbq-code-block-hljs-function-color: null;
-    --kbq-code-block-hljs-keyword-background: null;
-    --kbq-code-block-hljs-keyword-color: null;
-    --kbq-code-block-hljs-line-numbers-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-code-block-hljs-link-background: null;
-    --kbq-code-block-hljs-link-color: null;
-    --kbq-code-block-hljs-literal-background: null;
-    --kbq-code-block-hljs-literal-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));
-    --kbq-code-block-hljs-meta-background: null;
-    --kbq-code-block-hljs-meta-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-meta-keyword-background: null;
-    --kbq-code-block-hljs-meta-keyword-color: null;
-    --kbq-code-block-hljs-meta-string-background: null;
-    --kbq-code-block-hljs-meta-string-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-meta-prompt-background: null;
-    --kbq-code-block-hljs-meta-prompt-color: null;
-    --kbq-code-block-hljs-name-background: null;
-    --kbq-code-block-hljs-name-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-number-background: null;
-    --kbq-code-block-hljs-number-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));
-    --kbq-code-block-hljs-operator-background: null;
-    --kbq-code-block-hljs-operator-color: null;
-    --kbq-code-block-hljs-params-background: null;
-    --kbq-code-block-hljs-params-color: null;
-    --kbq-code-block-hljs-property-background: null;
-    --kbq-code-block-hljs-property-color: null;
-    --kbq-code-block-hljs-punctuation-background: null;
-    --kbq-code-block-hljs-punctuation-color: null;
-    --kbq-code-block-hljs-quote-background: null;
-    --kbq-code-block-hljs-quote-color: null;
-    --kbq-code-block-hljs-regexp-background: null;
-    --kbq-code-block-hljs-regexp-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
-    --kbq-code-block-hljs-section-background: null;
-    --kbq-code-block-hljs-section-color: null;
-    --kbq-code-block-hljs-selector-attr-background: null;
-    --kbq-code-block-hljs-selector-attr-color: null;
-    --kbq-code-block-hljs-selector-class-background: null;
-    --kbq-code-block-hljs-selector-class-color: null;
-    --kbq-code-block-hljs-selector-id-background: null;
-    --kbq-code-block-hljs-selector-id-color: null;
-    --kbq-code-block-hljs-selector-pseudo-background: null;
-    --kbq-code-block-hljs-selector-pseudo-color: null;
-    --kbq-code-block-hljs-selector-tag-background: null;
-    --kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-string-background: null;
-    --kbq-code-block-hljs-string-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
-    --kbq-code-block-hljs-strong-background: null;
-    --kbq-code-block-hljs-strong-color: null;
-    --kbq-code-block-hljs-subst-background: null;
-    --kbq-code-block-hljs-subst-color: null;
-    --kbq-code-block-hljs-symbol-background: null;
-    --kbq-code-block-hljs-symbol-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-tag-background: null;
-    --kbq-code-block-hljs-tag-color: null;
-    --kbq-code-block-hljs-template-tag-background: null;
-    --kbq-code-block-hljs-template-tag-color: null;
-    --kbq-code-block-hljs-template-variable-background: null;
-    --kbq-code-block-hljs-template-variable-color: null;
-    --kbq-code-block-hljs-title-background: null;
-    --kbq-code-block-hljs-title-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-title-class-background: null;
-    --kbq-code-block-hljs-title-class-color: null;
-    --kbq-code-block-hljs-title-class-inherited-background: null;
-    --kbq-code-block-hljs-title-class-inherited-color: null;
-    --kbq-code-block-hljs-title-function-background: null;
-    --kbq-code-block-hljs-title-function-color: null;
-    --kbq-code-block-hljs-title-function-invoke-background: null;
-    --kbq-code-block-hljs-title-function-invoke-color: null;
-    --kbq-code-block-hljs-type-background: null;
-    --kbq-code-block-hljs-type-color: null;
-    --kbq-code-block-hljs-variable-background: null;
-    --kbq-code-block-hljs-variable-color: null;
-    --kbq-code-block-hljs-variable-constant-background: null;
-    --kbq-code-block-hljs-variable-constant-color: null;
-    --kbq-code-block-hljs-variable-language-background: null;
-    --kbq-code-block-hljs-variable-language-color: null;
     --kbq-code-block-tab-size: 4;
 }
-
-.kbq-dark .kbq-code-block {
-    --kbq-code-block-hljs-addition-background: var(--kbq-plt-dark-green-a5, var(--kbq-palette-green-95));
-    --kbq-code-block-hljs-addition-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
-    --kbq-code-block-hljs-built-in-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-comment-color: var(--kbq-plt-dark-slate-a14, var(--kbq-palette-grey-60));
-    --kbq-code-block-hljs-deletion-background: var(--kbq-plt-dark-red-a5, var(--kbq-palette-red-95));
-    --kbq-code-block-hljs-deletion-color: var(--kbq-plt-dark-red-a14, var(--kbq-palette-red-35));
-    --kbq-code-block-hljs-literal-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));
-    --kbq-code-block-hljs-meta-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-meta-string-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-name-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-number-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));
-    --kbq-code-block-hljs-regexp-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
-    --kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-string-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
-    --kbq-code-block-hljs-symbol-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
-    --kbq-code-block-hljs-title-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
-}

package/code-block/code-block.scss

@@ -1,4 +1,5 @@
 @use './code-block-theme' as theme;
+@use '../core/styles/common/squircle' as *;
 
 .kbq-code-block {
     display: flex;
@@ -7,7 +8,7 @@
 
     border-width: var(--kbq-code-block-size-container-border-width);
     border-style: solid;
-    border-radius: var(--kbq-code-block-size-container-border-radius);
+    @include kbq-squircle(var(--kbq-code-block-size-container-border-radius));
 
     box-sizing: border-box;
 
@@ -52,7 +53,7 @@
         flex-grow: 1;
         flex-direction: column;
 
-        border-radius: var(--kbq-code-block-size-container-border-radius);
+        @include kbq-squircle(var(--kbq-code-block-size-container-border-radius));
 
         &.cdk-keyboard-focused {
             outline-style: solid;
@@ -113,6 +114,16 @@
         }
     }
 
+    // The code's right padding is painted at the edge of its box, which stays one scrollport wide under
+    // `white-space: pre`; stretched to the content, the padding follows the longest line. Not under soft
+    // wrap, where `max-content` would undo the wrapping.
+    &:not(.kbq-code-block_soft-wrap) {
+        .kbq-code-block__pre {
+            width: max-content;
+            min-width: 100%;
+        }
+    }
+
     &.kbq-code-block_view-all {
         .kbq-code-block__main {
             max-height: unset;
@@ -141,7 +152,7 @@
             .kbq-code-block__actionbar__button-stack {
                 border-width: 1px;
                 border-style: solid;
-                border-radius: calc(var(--kbq-size-border-radius) + 1px);
+                @include kbq-squircle(calc(var(--kbq-size-border-radius) + 1px));
             }
         }
 
@@ -160,14 +171,14 @@
     }
 
     &:not(.kbq-code-block_hide-tabs) {
+        $radius: var(--kbq-code-block-size-container-border-radius);
+
         .kbq-code-block__header {
-            border-radius: var(--kbq-code-block-size-container-border-radius)
-                var(--kbq-code-block-size-container-border-radius) 0 0;
+            @include kbq-squircle($radius $radius 0 0);
         }
 
         .kbq-code-block__main {
-            border-radius: 0 0 var(--kbq-code-block-size-container-border-radius)
-                var(--kbq-code-block-size-container-border-radius);
+            @include kbq-squircle(0 0 $radius $radius);
         }
     }
 
@@ -189,10 +200,10 @@
         position: absolute;
         bottom: calc(var(--kbq-code-block-size-container-border-width) * -1);
 
-        border-radius: var(--kbq-code-block-size-container-border-radius);
+        @include kbq-squircle(var(--kbq-code-block-size-container-border-radius));
 
         .kbq-code-block__view-all__wrapper {
-            border-radius: var(--kbq-size-border-radius);
+            @include kbq-squircle(var(--kbq-size-border-radius));
         }
 
         &.kbq-code-block__view-all_collapsed {

package/content-panel/content-panel-aside.scss

@@ -1,9 +1,10 @@
+@use '../core/styles/common/squircle' as *;
+
 .kbq-content-panel-aside {
     display: flex;
     flex-direction: column;
     gap: var(--kbq-size-s);
     padding: var(--kbq-size-l) var(--kbq-size-m);
-    border-top-left-radius: inherit;
-    border-bottom-left-radius: inherit;
+    @include kbq-squircle-inherit(border-top-left-radius border-bottom-left-radius);
     border-right: inherit;
 }

package/content-panel/content-panel-container.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/animation';
+
 .kbq-content-panel-container {
     display: flex;
     gap: var(--kbq-size-l);
@@ -11,6 +13,17 @@
         height: 100%;
     }
 
+    .kbq-content-panel-container__scrollbar_animating {
+        transition: margin-right 150ms cubic-bezier(0.4, 0, 1, 1);
+
+        @include animation.kbq-animations-off();
+    }
+
+    &.kbq-content-panel-container__opened .kbq-content-panel-container__scrollbar_animating {
+        transition-duration: 125ms;
+        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+
     .kbq-content-panel-container__panel {
         position: absolute;
         right: 0;
@@ -21,6 +34,18 @@
         box-sizing: border-box;
     }
 
+    .kbq-content-panel-container__panel_enter {
+        animation: kbq-content-panel-slide-in 150ms cubic-bezier(0, 0, 0.2, 1);
+
+        @include animation.kbq-animations-off();
+    }
+
+    .kbq-content-panel-container__panel_leave {
+        animation: kbq-content-panel-slide-out 125ms cubic-bezier(0.4, 0, 1, 1) forwards;
+
+        @include animation.kbq-animations-off();
+    }
+
     .kbq-content-panel-container__panel-resizer {
         position: absolute;
         top: 0;
@@ -30,3 +55,15 @@
         z-index: 2;
     }
 }
+
+@keyframes kbq-content-panel-slide-in {
+    from {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes kbq-content-panel-slide-out {
+    to {
+        transform: translateX(100%);
+    }
+}

package/content-panel/content-panel.scss

@@ -1,6 +1,8 @@
+@use '../core/styles/common/squircle' as *;
+
 .kbq-content-panel {
     display: flex;
-    border-radius: var(--kbq-content-panel-border-radius);
+    @include kbq-squircle(var(--kbq-content-panel-border-radius));
     background-color: var(--kbq-content-panel-background-color);
     border: var(--kbq-content-panel-border);
     height: 100%;
@@ -11,7 +13,6 @@
         display: flex;
         flex: 1;
         flex-direction: column;
-        border-top-right-radius: inherit;
-        border-bottom-right-radius: inherit;
+        @include kbq-squircle-inherit(border-top-right-radius border-bottom-right-radius);
     }
 }

package/core/highlight/_highlight-theme.scss

@@ -1,3 +1,5 @@
+@use '../styles/common/squircle' as *;
+
 @mixin kbq-highlight-theme() {
     .kbq-highlight {
         color: inherit;
@@ -12,6 +14,6 @@
         color: var(--kbq-foreground-contrast);
         background-color: var(--kbq-background-highlight);
 
-        border-radius: var(--kbq-size-xxs);
+        @include kbq-squircle(var(--kbq-size-xxs));
     }
 }

package/core/option/action-container.scss

@@ -1,3 +1,4 @@
+@use '../styles/common/squircle' as *;
 @use '../styles/common/tokens' as *;
 
 .kbq-action-container {
@@ -15,8 +16,7 @@
     overflow: hidden;
 
     border: 1px solid transparent;
-    border-top-right-radius: var(--kbq-size-xs);
-    border-bottom-right-radius: var(--kbq-size-xs);
+    @include kbq-squircle(var(--kbq-size-xs), border-top-right-radius border-bottom-right-radius);
 }
 
 .kbq-action-container__gradient {

package/core/option/action.scss

@@ -1,6 +1,7 @@
 @use '../styles/common/tokens' as *;
 
 @use './option-action-theme' as *;
+@use '../styles/common/squircle' as *;
 
 .kbq-option-action {
     display: flex;
@@ -19,7 +20,7 @@
     box-sizing: content-box;
 
     border: var(--kbq-size-3xs) solid transparent;
-    border-radius: var(--kbq-size-xs);
+    @include kbq-squircle(var(--kbq-size-xs));
 
     width: var(--kbq-size-xl);
     height: var(--kbq-size-xl);