@koobiq/components 21.0.1 → 21.1.0

package/badge/_badge-theme.scss

@@ -95,6 +95,35 @@
     }
 }
 
+// Blink rounds the font metrics and the half-leading of a line, so under a fractional page zoom a label centred as a
+// line box sits up to a device pixel above the middle. Baseline alignment leaves the line box out of it: the empty
+// `::before` puts the baseline half a cap height below the middle of the badge, which centres the capitals.
+// Goes last in `kbq-badge-typography()`, whose line height it replaces.
+@mixin _kbq-badge-label-alignment() {
+    @supports (height: 1cap) {
+        .kbq-badge {
+            align-items: baseline;
+            // A flex line starts at the item with the longest way to its baseline. In the content box of an outlined
+            // badge a 16px line would take that place from `::before` and push the label down.
+            line-height: 1;
+
+            &::before {
+                content: '';
+
+                height: calc(50% + 0.5cap);
+            }
+
+            & > .kbq-icon {
+                align-self: center;
+            }
+
+            & .kbq-badge-caption {
+                line-height: 1;
+            }
+        }
+    }
+}
+
 @mixin kbq-badge-typography() {
     .kbq-badge {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
@@ -111,4 +140,6 @@
             @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
     }
+
+    @include _kbq-badge-label-alignment();
 }

package/breadcrumbs/breadcrumbs.scss

@@ -17,6 +17,7 @@
     .kbq-overflow-items {
         // add space not to cut focus outline
         padding: 1px;
+        margin: -1px;
     }
 
     // `display: contents` would keep the list's items as the host's direct flex children, but it also
@@ -40,10 +41,13 @@
     // flex algorithm hands it, so the trail stops being squeezed and `KbqOverflowItems` — which
     // measures its own box — concludes that every item fits and collapses nothing.
     &.kbq-breadcrumbs_first-item-negative-margin {
-        .kbq-overflow-items,
         .kbq-breadcrumbs__list {
             margin-left: var(--kbq-breadcrumb-item-negative-margin);
         }
+
+        .kbq-overflow-items {
+            margin-left: calc(var(--kbq-breadcrumb-item-negative-margin) - 1px);
+        }
     }
 
     &.kbq-breadcrumbs_wrap {

package/checkbox/_checkbox-theme.scss

@@ -17,11 +17,6 @@
         color: var(--kbq-#{$base}-default-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);
-    }
-
     &:hover,
     &.kbq-hover {
         .kbq-checkbox__frame {
@@ -76,10 +71,6 @@
             }
         }
 
-        & .kbq-hint .kbq-hint__text {
-            color: var(--kbq-#{$base}-states-disabled-caption);
-        }
-
         .kbq-checkbox-label {
             color: var(--kbq-#{$base}-states-disabled-text);
         }
@@ -100,17 +91,9 @@
 @mixin kbq-checkbox-typography() {
     .kbq-checkbox {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-
-        & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
-        }
     }
 
     .kbq-checkbox.kbq-checkbox_big {
         @include kbq-typography-level-to-styles-css-variables(typography, text-big);
-
-        & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-        }
     }
 }

package/checkbox/checkbox-tokens.scss

@@ -16,7 +16,6 @@
     --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
     --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-theme-default-background: var(--kbq-background-bg);
-    --kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);
     --kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);
     --kbq-checkbox-theme-states-checked-border: transparent;
@@ -33,12 +32,10 @@
     --kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);
     --kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
     --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-error-default-background: var(--kbq-background-error-less);
-    --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-checkbox-error-states-hover-border: var(--kbq-line-error);
     --kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
     --kbq-checkbox-error-states-checked-border: transparent;
@@ -55,5 +52,4 @@
     --kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);
     --kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled);
 }

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

@@ -16,6 +16,8 @@
 
     &.kbq-code-block_hide-tabs {
         .kbq-code-block__actionbar {
+            background: var(--kbq-#{$base}-actionbar-plate-background);
+
             .kbq-code-block__actionbar__button-stack {
                 border-color: var(--kbq-#{$base}-actionbar-border-color);
                 background: var(--kbq-#{$base}-actionbar-background);
@@ -24,17 +26,16 @@
     }
 
     .kbq-code-block__view-all {
-        .kbq-code-block__view-all__wrapper {
-            background: var(--kbq-#{$base}-collapse-button-expand-background);
-            opacity: 90%;
-        }
-
         &.kbq-code-block__view-all_expanded {
             background: var(--kbq-#{$base}-collapse-expanded-background);
         }
 
         &.kbq-code-block__view-all_collapsed {
             background: var(--kbq-#{$base}-collapse-collapsed-background);
+
+            .kbq-code-block__view-all__wrapper {
+                background: color-mix(in srgb, var(--kbq-#{$base}-collapse-button-expand-background) 90%, transparent);
+            }
         }
     }
 }
@@ -300,7 +301,7 @@
             color: kbq-code-block-hljs-attr(variable-language-color);
         }
 
-        .hljs-ln-n {
+        .kbq-code-block__line::before {
             color: kbq-code-block-hljs-attr(line-numbers-color);
         }
 

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

@@ -21,24 +21,28 @@
     --kbq-code-block-filled-header-background: transparent;
     --kbq-code-block-filled-actionbar-background: var(--kbq-background-card);
     --kbq-code-block-filled-actionbar-border-color: var(--kbq-line-contrast-less);
+    // The translucent container background cannot hide the code under the actionbar plate and the collapse fade:
+    // `bg-tertiary` is how the container looks over the page background.
+    --kbq-code-block-filled-actionbar-plate-background: var(--kbq-background-bg-tertiary);
     --kbq-code-block-filled-collapse-expanded-background: transparent;
     --kbq-code-block-filled-collapse-collapsed-background: linear-gradient(
         180deg,
         transparent,
-        var(--kbq-background-bg-secondary) 100%
+        var(--kbq-background-bg-tertiary) 100%
     );
-    --kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-secondary);
+    --kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-tertiary);
     --kbq-code-block-outline-container-background: var(--kbq-background-card);
     --kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
     --kbq-code-block-outline-header-background: var(--kbq-background-card);
     --kbq-code-block-outline-actionbar-background: var(--kbq-background-card);
     --kbq-code-block-outline-actionbar-border-color: var(--kbq-line-contrast-less);
+    --kbq-code-block-outline-actionbar-plate-background: var(--kbq-code-block-outline-container-background);
     --kbq-code-block-outline-collapse-expanded-background: transparent;
     --kbq-code-block-outline-collapse-collapsed-background: linear-gradient(
         180deg,
         transparent,
-        var(--kbq-background-bg) 100%
+        var(--kbq-code-block-outline-container-background) 100%
     );
-    --kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-card);
+    --kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-bg);
     --kbq-code-block-tab-size: 4;
 }

package/code-block/code-block.scss

@@ -1,5 +1,5 @@
 @use './code-block-theme' as theme;
-@use '../core/styles/common/squircle' as *;
+@use '../core/styles/common/squircle';
 
 .kbq-code-block {
     display: flex;
@@ -8,7 +8,7 @@
 
     border-width: var(--kbq-code-block-size-container-border-width);
     border-style: solid;
-    @include kbq-squircle(var(--kbq-code-block-size-container-border-radius));
+    @include squircle.kbq-squircle(var(--kbq-code-block-size-container-border-radius));
 
     box-sizing: border-box;
 
@@ -41,10 +41,14 @@
         }
     }
 
+    // The expanded "view all" button lies over the end of the code, so the code makes room for the button and the
+    // spacing under it.
     &:has(.kbq-code-block__view-all) {
         .kbq-code-block__main {
             .kbq-code-block__code {
-                padding-bottom: var(--kbq-size-3xl) !important;
+                padding-bottom: calc(
+                    var(--kbq-size-3xl) + var(--kbq-code-block-size-collapse-expanded-padding-bottom)
+                ) !important;
             }
         }
     }
@@ -53,7 +57,7 @@
         flex-grow: 1;
         flex-direction: column;
 
-        @include kbq-squircle(var(--kbq-code-block-size-container-border-radius));
+        @include squircle.kbq-squircle(var(--kbq-code-block-size-container-border-radius));
 
         &.cdk-keyboard-focused {
             outline-style: solid;
@@ -67,6 +71,8 @@
         }
 
         .kbq-code-block__code {
+            --kbq-code-block-line-numbers-gap: var(--kbq-code-block-size-with-header-content-content-gap-horizontal);
+
             tab-size: var(--kbq-code-block-tab-size);
             padding: var(--kbq-code-block-size-with-header-content-padding-top)
                 var(--kbq-code-block-size-with-header-content-padding-horizontal)
@@ -83,28 +89,40 @@
             display: block;
         }
 
-        .hljs-ln-numbers {
-            padding-right: var(--kbq-code-block-size-with-header-content-content-gap-horizontal);
-            vertical-align: baseline;
-            text-align: right;
+        .kbq-code-block__line {
+            display: block;
         }
+    }
 
-        .hljs-ln {
-            border-collapse: unset;
-
-            /* stylelint-disable-next-line selector-class-pattern */
-            .hljs {
-                padding: 0;
+    // The numbers come from a counter, so they are neither selected nor copied with the code. A line is indented by
+    // the column of numbers and its first line outdented back, so that a wrapped line goes on under the code rather
+    // than under its number.
+    &:not(.kbq-code-block_hide-line-numbers) .kbq-code-block__code_line-numbers {
+        --kbq-code-block-line-numbers-width: calc(var(--kbq-code-block-line-numbers-digits) * 1ch);
+        --kbq-code-block-line-numbers-indent: calc(
+            var(--kbq-code-block-line-numbers-width) + var(--kbq-code-block-line-numbers-gap)
+        );
+
+        counter-reset: kbq-code-block-line var(--kbq-code-block-line-numbers-start);
+
+        .kbq-code-block__line {
+            counter-increment: kbq-code-block-line;
+            padding-inline-start: var(--kbq-code-block-line-numbers-indent);
+            text-indent: calc(var(--kbq-code-block-line-numbers-indent) * -1);
+
+            &::before {
+                // The empty alternative text keeps the numbers from assistive technology.
+                content: counter(kbq-code-block-line) / '';
+                display: inline-block;
+                width: var(--kbq-code-block-line-numbers-width);
+                margin-inline-end: var(--kbq-code-block-line-numbers-gap);
+                text-align: end;
+                // Otherwise the number would take the outdent of its line.
+                text-indent: 0;
+                // Soft wrap would otherwise break a number that its column fits only to a fraction of a pixel.
+                white-space: nowrap;
             }
         }
-
-        .hljs-ln-n:before {
-            white-space: nowrap;
-        }
-    }
-
-    &.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers {
-        display: none;
     }
 
     &.kbq-code-block_soft-wrap {
@@ -138,6 +156,10 @@
     }
 
     &.kbq-code-block_hide-tabs {
+        // The actionbar reaches the right edge, over the top of the vertical scrollbar track. Isolated by the block
+        // rather than by the scrollport, the track's z-index keeps the track above the actionbar and inside the block.
+        isolation: isolate;
+
         .kbq-code-block__header {
             padding: 0;
         }
@@ -147,26 +169,26 @@
             position: absolute;
             top: 0;
             right: 0;
-            margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-s) 0;
+            padding: var(--kbq-size-s) var(--kbq-size-s) 0 0;
+            @include squircle.kbq-squircle(var(--kbq-code-block-size-container-border-radius), border-top-right-radius);
 
             .kbq-code-block__actionbar__button-stack {
                 border-width: 1px;
                 border-style: solid;
-                @include kbq-squircle(calc(var(--kbq-size-border-radius) + 1px));
+                @include squircle.kbq-squircle(calc(var(--kbq-size-border-radius) + 1px));
             }
         }
 
         .kbq-code-block__main {
             position: relative;
+            isolation: auto;
 
             .kbq-code-block__code {
+                --kbq-code-block-line-numbers-gap: var(--kbq-code-block-size-no-header-content-content-gap-horizontal);
+
                 padding: var(--kbq-code-block-size-no-header-content-padding-vertical)
                     var(--kbq-code-block-size-no-header-content-padding-horizontal);
             }
-
-            .hljs-ln-numbers {
-                padding-right: var(--kbq-code-block-size-no-header-content-content-gap-horizontal);
-            }
         }
     }
 
@@ -174,11 +196,11 @@
         $radius: var(--kbq-code-block-size-container-border-radius);
 
         .kbq-code-block__header {
-            @include kbq-squircle($radius $radius 0 0);
+            @include squircle.kbq-squircle($radius $radius 0 0);
         }
 
         .kbq-code-block__main {
-            @include kbq-squircle(0 0 $radius $radius);
+            @include squircle.kbq-squircle(0 0 $radius $radius);
         }
     }
 
@@ -200,10 +222,10 @@
         position: absolute;
         bottom: calc(var(--kbq-code-block-size-container-border-width) * -1);
 
-        @include kbq-squircle(var(--kbq-code-block-size-container-border-radius));
+        @include squircle.kbq-squircle(var(--kbq-code-block-size-container-border-radius));
 
         .kbq-code-block__view-all__wrapper {
-            @include kbq-squircle(var(--kbq-size-border-radius));
+            @include squircle.kbq-squircle(var(--kbq-size-border-radius));
         }
 
         &.kbq-code-block__view-all_collapsed {

package/content-panel/content-panel-header.scss

@@ -7,16 +7,15 @@
 
     .kbq-content-panel-header__wrapper {
         display: flex;
-        justify-content: space-between;
     }
 
     .kbq-content-panel-header__actions {
         display: flex;
-        justify-content: flex-end;
+        margin-inline-start: auto;
     }
 
     .kbq-content-panel-header__close-button {
-        margin-left: var(--kbq-size-m);
+        margin-inline-start: var(--kbq-size-m);
     }
 
     .kbq-content-panel-header-title {

package/content-panel/content-panel.scss

@@ -2,6 +2,8 @@
 
 .kbq-content-panel {
     display: flex;
+    flex-grow: 1;
+    min-width: 0;
     @include kbq-squircle(var(--kbq-content-panel-border-radius));
     background-color: var(--kbq-content-panel-background-color);
     border: var(--kbq-content-panel-border);
@@ -13,6 +15,7 @@
         display: flex;
         flex: 1;
         flex-direction: column;
+        min-width: 0;
         @include kbq-squircle-inherit(border-top-right-radius border-bottom-right-radius);
     }
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss

@@ -16,7 +16,6 @@
     --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
     --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-theme-default-background: var(--kbq-background-bg);
-    --kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);
     --kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);
     --kbq-checkbox-theme-states-checked-border: transparent;
@@ -38,7 +37,6 @@
     --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-error-default-background: var(--kbq-background-error-less);
-    --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-checkbox-error-states-hover-border: var(--kbq-line-error);
     --kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
     --kbq-checkbox-error-states-checked-border: transparent;

package/fesm2022/koobiq-components-accordion.mjs

@@ -31,7 +31,7 @@ class KbqAccordionContentDirective {
         /**
          * Value of `data-state`.
          *
-         * @internal
+         * @docs-private
          */
         this.dataState = computed(() => this.item.dataState, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
         /** @docs-private */
@@ -186,13 +186,13 @@ class KbqAccordionTriggerDirective {
         /**
          * Value of `aria-expanded`.
          *
-         * @internal
+         * @docs-private
          */
         this.expanded = computed(() => this.item.expanded, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         /**
          * Value of `data-state`.
          *
-         * @internal
+         * @docs-private
          */
         this.dataState = computed(() => this.item.dataState, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
     }
@@ -950,7 +950,7 @@ class KbqAccordionHeader {
         /**
          * Value of `data-state`.
          *
-         * @internal
+         * @docs-private
          */
         this.dataState = computed(() => this.item.dataState, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
     }