@koobiq/components 20.4.1 → 21.0.0

package/form-field/cleaner.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/squircle' as *;
+
 .kbq-cleaner {
     display: flex;
     align-items: center;
@@ -8,5 +10,5 @@
 
     outline: none;
 
-    border-radius: var(--kbq-size-xxs);
+    @include kbq-squircle(var(--kbq-size-xxs));
 }

package/form-field/fieldset.scss

@@ -1,6 +1,5 @@
-@use './form-field-theme';
 @use './form-field';
-@use './fiedset-theme';
+@use './fieldset-theme';
 
 .kbq-fieldset {
     display: flex;
@@ -31,7 +30,7 @@
         }
 
         // set selector specifity to 0 , so focused state will override z-index
-        :where(&.kbq-form-field_invalid, &.kbq-form-field_has-validate-directive.ng-invalid) {
+        :where(&.kbq-form-field_invalid) {
             z-index: 2;
         }
 
@@ -69,7 +68,7 @@
         }
     }
 
-    @include fiedset-theme.kbq-fieldset-theme();
+    @include fieldset-theme.kbq-fieldset-theme();
 }
 
 .kbq-fieldset__container {

package/form-field/form-field.scss

@@ -1,17 +1,19 @@
-@use '../core/forms/forms';
 @use './form-field-theme' as theme;
+@use '../core/styles/common/squircle' as *;
 
+// `:has()` is used across this file. It is Baseline Widely available (Chrome/Edge 105+, Safari 15.4+,
+// Firefox 121+); browsers without it simply keep the default spacing, so the layout degrades gracefully.
 @mixin kbq-form-field-hint-geometry {
     display: flex;
     flex-direction: column;
     gap: var(--kbq-form-field-hint-size-gap);
     margin-top: var(--kbq-form-field-hint-size-margin-top);
 
-    &:has(.kbq-reactive-password-hint, .kbq-password-hint) {
+    &:has(.kbq-reactive-password-hint) {
         --kbq-form-field-hint-size-gap: var(--kbq-size-s);
     }
 
-    &:has(:is(.kbq-reactive-password-hint, .kbq-password-hint):first-child) {
+    &:has(.kbq-reactive-password-hint:first-child) {
         --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
     }
 }
@@ -60,7 +62,7 @@
         border-width: var(--kbq-form-field-size-border-width);
         border-style: solid;
         border-color: transparent;
-        border-radius: var(--kbq-form-field-size-border-radius);
+        @include kbq-squircle(var(--kbq-form-field-size-border-radius));
 
         padding-left: var(--kbq-form-field-size-container-left-padding);
         padding-right: var(--kbq-form-field-size-container-right-padding);
@@ -71,10 +73,6 @@
         }
     }
 
-    .kbq-form-field:not(.kbq-form-field-type-textarea) {
-        height: var(--kbq-form-field-size-height);
-    }
-
     .kbq-form-field__infix {
         box-sizing: border-box;
 
@@ -107,7 +105,7 @@
 
     &,
     .kbq-textarea {
-        border-radius: var(--kbq-form-field-size-border-radius);
+        @include kbq-squircle(var(--kbq-form-field-size-border-radius));
     }
 
     &:hover {
@@ -126,18 +124,25 @@
     // suppressed, not replaced — and the tint lives on the container, under a shadow that is drawn
     // above it. Reinstating any of it would only move the text on focus.
 
-    &.kbq-form-field_without-borders .kbq-form-field__container,
-    &.kbq-form-field_no-borders .kbq-form-field__container {
-        border-color: transparent !important;
-        box-shadow: none !important;
-    }
-
-    &.kbq-form-field_in-overlay .kbq-form-field__container {
-        background-color: var(--kbq-background-card) !important;
-    }
-
-    & + .kbq-password-hint {
-        margin-top: var(--kbq-size-m);
+    // The state theme resolves the border and the background through tokens, so overriding the tokens beats
+    // the more specific state selectors without `!important`.
+    // `.kbq-form-field_without-borders` is the pre-v20 name, kept until the `v20-upgrade` migration
+    // (packages/schematics/src/migrations/v20-upgrade/data.ts) is dropped.
+    &.kbq-form-field_without-borders,
+    &.kbq-form-field_no-borders {
+        --kbq-form-field-default-border-color: transparent;
+        --kbq-form-field-states-focused-border-color: transparent;
+        --kbq-form-field-states-error-border-color: transparent;
+        --kbq-form-field-states-disabled-border-color: transparent;
+        --kbq-form-field-states-focused-focus-outline: transparent;
+        --kbq-form-field-states-error-focused-focus-outline: transparent;
+    }
+
+    &.kbq-form-field_in-overlay {
+        --kbq-form-field-default-background: var(--kbq-background-card);
+        --kbq-form-field-states-focused-background: var(--kbq-background-card);
+        --kbq-form-field-states-error-background: var(--kbq-background-card);
+        --kbq-form-field-states-disabled-background: var(--kbq-background-card);
     }
 
     .kbq-form-field__prefix,

package/form-field/password-toggle.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/squircle' as *;
+
 .kbq-password-toggle > .kbq-icon {
     display: flex;
     align-items: center;
@@ -6,7 +8,7 @@
     width: 26px;
     height: var(--kbq-size-xxl);
 
-    border-radius: var(--kbq-size-xxs);
+    @include kbq-squircle(var(--kbq-size-xxs));
 
     outline: none;
 }

package/icon/_icon-button-theme.scss

@@ -100,6 +100,13 @@
                     inset 0 0 0 1px var(--kbq-states-line-focus-error),
                     0 0 0 1px var(--kbq-states-line-focus-error);
             }
+
+            // `box-shadow` is not painted in forced-colors mode, and the native outline is removed above,
+            // so without this the keyboard focus indicator disappears entirely (WCAG 2.4.7 / 1.4.11).
+            @media (forced-colors: active) {
+                outline: 1px solid;
+                outline-offset: 1px;
+            }
         }
     }
 }

package/icon/_icon-theme.scss

@@ -1,31 +1,34 @@
 @use '../core/styles/common/tokens' as *;
 
+// The `--kbq-icon-*-color` tokens are consumed with their design token as the `var()` fallback rather
+// than declared on `.kbq-icon` — see the note in `icon-tokens.scss`. An ancestor that sets one of them
+// wins here, and an icon left alone resolves exactly the value it always did.
 @mixin kbq-icon-theme() {
     .kbq-icon {
-        color: var(--kbq-icon-contrast-color);
+        color: var(--kbq-icon-contrast-color, var(--kbq-icon-contrast));
 
         &.kbq-theme {
-            color: var(--kbq-icon-theme-color);
+            color: var(--kbq-icon-theme-color, var(--kbq-icon-theme));
         }
 
         &.kbq-contrast {
-            color: var(--kbq-icon-contrast-color);
+            color: var(--kbq-icon-contrast-color, var(--kbq-icon-contrast));
         }
 
         &.kbq-contrast-fade {
-            color: var(--kbq-icon-fade-contrast-color);
+            color: var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade));
         }
 
         &.kbq-error {
-            color: var(--kbq-icon-error-color);
+            color: var(--kbq-icon-error-color, var(--kbq-icon-error));
         }
 
         &.kbq-warning {
-            color: var(--kbq-icon-warning-color);
+            color: var(--kbq-icon-warning-color, var(--kbq-icon-warning));
         }
 
         &.kbq-success {
-            color: var(--kbq-icon-success-color);
+            color: var(--kbq-icon-success-color, var(--kbq-icon-success));
         }
     }
 }

package/icon/icon-button.scss

@@ -9,8 +9,6 @@
 
     padding: var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding);
 
-    // @deprcated Will be removed in the next major release (#DS-5338)
-    &.kbq-icon-button_small,
     &.kbq-icon-button_compact {
         padding: var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding);
     }

package/icon/icon-tokens.scss

@@ -1,9 +1,12 @@
-.kbq-icon {
-    /* THEME TOKENS */
-    --kbq-icon-theme-color: var(--kbq-icon-theme);
-    --kbq-icon-contrast-color: var(--kbq-icon-contrast);
-    --kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);
-    --kbq-icon-error-color: var(--kbq-icon-error);
-    --kbq-icon-success-color: var(--kbq-icon-success);
-    --kbq-icon-warning-color: var(--kbq-icon-warning);
-}
+/* THEME TOKENS
+ *
+ * `--kbq-icon-theme-color`, `--kbq-icon-contrast-color`, `--kbq-icon-fade-contrast-color`,
+ * `--kbq-icon-error-color`, `--kbq-icon-success-color` and `--kbq-icon-warning-color` are deliberately
+ * left undeclared here, and `_icon-theme.scss` consumes each of them with the design token it aliases as
+ * the `var()` fallback.
+ *
+ * A declaration on `.kbq-icon` would sit on the very element the value is used on, where it beats
+ * anything inherited — so a container setting `--kbq-icon-warning-color` could never re-theme the icons
+ * inside it. Declaring them at `:root` instead is not an option either: the dark palette is scoped to
+ * `.kbq-dark`, and an alias resolved at `:root` would freeze the light value.
+ */

package/inline-edit/inline-edit.scss

@@ -1,52 +1,24 @@
-@use 'sass:map';
-
+@use '../core/styles/common/animation';
 @use '../core/styles/common/tokens';
-
-@mixin _mask($config) {
-    & {
-        position: relative;
-    }
-
-    .kbq-mask {
-        display: flex;
-        position: absolute;
-
-        @if (map.get($config, 'top')) {
-            top: map.get($config, 'top');
-        }
-
-        @if (map.get($config, 'right')) {
-            right: map.get($config, 'right');
-        }
-
-        @if (map.get($config, 'bottom')) {
-            bottom: map.get($config, 'bottom');
-        }
-
-        @if (map.get($config, 'left')) {
-            left: map.get($config, 'left');
-        }
-
-        .kbq-mask__fade {
-            background: var(--kbq-mask-background, transparent);
-            // @TODO remove fallback (#DS-3002)
-            mask-image: linear-gradient(90deg, transparent, var(--kbq-plt-black, var(--kbq-black-default)));
-        }
-
-        .kbq-mask__container {
-            background: var(--kbq-mask-background, transparent);
-        }
-    }
-}
+@use '../core/styles/common/squircle' as *;
 
 @mixin _inline-edit-theme {
     background: var(--kbq-inline-edit-background);
 
-    &:focus-visible {
+    // The tab stop is the view content (or the focus anchor), while the ring is drawn on the host
+    // through `cdk-keyboard-focused` — so the native outline of the focused child is suppressed.
+    .kbq-inline-edit__view-content:focus,
+    .kbq-inline-edit__focus-anchor:focus {
         outline: none;
     }
 
-    &.cdk-keyboard-focused,
+    // The host watches its whole subtree, so it is marked focused for anything inside it — a control in
+    // the label, whatever `interactiveSelectors` leaves tabbable in view mode, the menu button — each of
+    // which draws a ring of its own. The row ring stands for the component's own tab stops, so it is
+    // drawn only while one of those two holds focus. Stated about the focused element rather than about
+    // where it sits: naming the containers to skip means enumerating every slot a consumer can project a
+    // focusable control into, and missing one is silent — it renders as two rings at once.
+    &.cdk-keyboard-focused:not(:has(:focus:not(.kbq-inline-edit__view-content, .kbq-inline-edit__focus-anchor))),
     &.kbq-inline-edit_anchor-focused {
         box-shadow: inset 0 0 0.1px 1px var(--kbq-states-line-focus-theme);
         border-color: var(--kbq-states-line-focus-theme);
@@ -112,12 +84,13 @@
 
 .kbq-inline-edit {
     display: flex;
+    position: relative;
     flex-direction: column;
     justify-content: center;
     box-sizing: border-box;
 
     border: var(--kbq-size-border-width) solid transparent;
-    border-radius: var(--kbq-size-border-radius);
+    @include kbq-squircle(var(--kbq-size-border-radius));
     padding: var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);
     min-height: var(--kbq-inline-edit-height);
 
@@ -169,19 +142,16 @@
         color: var(--kbq-foreground-contrast-secondary);
     }
 
-    @include _mask(
-        (
-            'top': calc(var(--kbq-size-border-width) * -1),
-            'right': calc(var(--kbq-size-border-width) * -1)
-        )
-    );
-
     .kbq-inline-edit__menu-mask {
+        display: flex;
+        position: absolute;
+        top: calc(var(--kbq-size-border-width) * -1);
+        right: calc(var(--kbq-size-border-width) * -1);
+
         opacity: 0;
         height: calc(100% + 2 * var(--kbq-size-border-width));
         justify-content: flex-end;
-        border-top-right-radius: var(--kbq-size-border-radius);
-        border-bottom-right-radius: var(--kbq-size-border-radius);
+        @include kbq-squircle(var(--kbq-size-border-radius), border-top-right-radius border-bottom-right-radius);
 
         &:has(.kbq-inline-edit__menu.kbq-pressed, .kbq-inline-edit__menu.cdk-keyboard-focused) {
             opacity: 1;
@@ -189,13 +159,16 @@
 
         .kbq-inline-edit__menu-mask-fade {
             width: 32px;
+            background: var(--kbq-mask-background, transparent);
+            mask-image: linear-gradient(90deg, transparent, var(--kbq-plt-black));
         }
 
         .kbq-inline-edit__menu-mask-container {
             display: flex;
             justify-content: flex-end;
             min-width: 40px;
-            border-radius: inherit;
+            @include kbq-squircle-inherit();
+            background: var(--kbq-mask-background, transparent);
         }
 
         .kbq-inline-edit__menu {
@@ -219,14 +192,27 @@
         padding: var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s);
     }
 
+    .kbq-inline-edit__action-buttons_enter {
+        animation: kbq-inline-edit-action-buttons-enter 50ms cubic-bezier(0, 0, 0.2, 1);
+
+        @include animation.kbq-animations-off();
+    }
+
     &.kbq-inline-edit__panel_select .kbq-inline-edit__control-container {
         display: none;
     }
 
     .kbq-inline-edit__control-container,
     .kbq-inline-edit__action-button {
-        box-shadow: var(--kbq-shadow-popup);
+        box-shadow: var(--kbq-inline-edit-panel-shadow);
         background-color: var(--kbq-background-bg);
-        border-radius: var(--kbq-size-border-radius);
+        @include kbq-squircle(var(--kbq-size-border-radius));
+    }
+}
+
+@keyframes kbq-inline-edit-action-buttons-enter {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
     }
 }

package/input/input.scss

@@ -17,6 +17,10 @@
     padding: var(--kbq-input-size-padding-vertical) var(--kbq-input-size-padding-horizontal);
 }
 
+/*
+ * Native number fields, i.e. `<input kbqInput type="number">` without `kbqNumberInput` — that directive
+ * always renders into a `type="text"` field, so these rules deliberately do not reach it.
+ */
 input.kbq-input[type='number'] {
     -moz-appearance: textfield;
 }

package/link/{_link-theme.scss → deprecated/_link-theme.scss}

@@ -1,9 +1,14 @@
 @use 'sass:string';
 
-@use '../core/styles/common/tokens' as *;
+@use '../../core/styles/common/tokens' as *;
 
 @use './link-tokens';
 
+// The links this theme styles: the directive and any markup that carries its classes. The `KbqLink` component
+// shares the `kbq-link` class but brings a stylesheet of its own, and `:where()` keeps it out without changing the
+// specificity of a single rule here.
+$_kbq-link: '.kbq-link:where(:not([kbqlink]))';
+
 // Unquoted, so that the joiner reaches the CSS as an escape rather than as an invisible character
 $_kbq-link-word-joiner: string.unquote('"\\2060"');
 
@@ -164,7 +169,7 @@ $_kbq-link-trailing-icon-reserve: 15.5px;
 }
 
 @mixin kbq-link-theme() {
-    .kbq-link {
+    #{$_kbq-link} {
         @include kbq-link-geometry();
 
         @include kbq-link-state();
@@ -226,7 +231,7 @@ $_kbq-link-trailing-icon-reserve: 15.5px;
         }
 
         @media print {
-            .kbq-link_print:not(.kbq-disabled) {
+            &.kbq-link_print:not(.kbq-disabled) {
                 &.kbq-text-only,
                 &.kbq-text-with-icon .kbq-link__text,
                 &.kbq-text-with-dot .kbq-link__text {
@@ -243,15 +248,15 @@ $_kbq-link-trailing-icon-reserve: 15.5px;
 }
 
 @mixin kbq-link-typography() {
-    .kbq-link {
+    #{$_kbq-link} {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
-    .kbq-link.kbq-link_compact {
+    #{$_kbq-link}.kbq-link_compact {
         @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 
-    .kbq-link.kbq-link_big {
+    #{$_kbq-link}.kbq-link_big {
         @include kbq-typography-level-to-styles-css-variables(typography, text-big);
     }
 }

package/link/deprecated/link-tokens.scss

@@ -0,0 +1,27 @@
+// Scoped like the rest of the directive theme: the `KbqLink` component declares tokens of its own
+.kbq-link:where(:not([kbqlink])) {
+    --kbq-link-size-state-focused-outline-offset: 0px;
+    --kbq-link-size-state-focused-outline-width: 2px;
+    --kbq-link-size-multiline-hit-area-gap: calc((1lh - 1em) / 2);
+    --kbq-link-size-compact-content-padding: var(--kbq-size-xxs);
+    --kbq-link-size-normal-content-padding: var(--kbq-size-xxs);
+    --kbq-link-size-big-content-padding: var(--kbq-size-xxs);
+    --kbq-link-underline-width: 1px;
+    /* THEME TOKENS */
+    --kbq-link-text: var(--kbq-foreground-theme);
+    --kbq-link-border-bottom: var(--kbq-line-theme-fade);
+    --kbq-link-state-visited-text: var(--kbq-foreground-visited);
+    /* @TODO (#DS-3002) */
+    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
+    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
+    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
+    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-fade);
+    --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
+    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-fade);
+    --kbq-link-state-focused-outline: var(--kbq-states-line-focus-theme);
+    --kbq-link-state-disabled-text: var(--kbq-states-foreground-disabled);
+    --kbq-link-state-disabled-border-bottom: var(--kbq-states-line-disabled);
+}

package/link/link-tokens.scss

@@ -1,26 +1,7 @@
-.kbq-link {
-    --kbq-link-size-state-focused-outline-offset: 0px;
-    --kbq-link-size-state-focused-outline-width: 2px;
-    --kbq-link-size-multiline-hit-area-gap: calc((1lh - 1em) / 2);
-    --kbq-link-size-compact-content-padding: var(--kbq-size-xxs);
-    --kbq-link-size-normal-content-padding: var(--kbq-size-xxs);
-    --kbq-link-size-big-content-padding: var(--kbq-size-xxs);
-    --kbq-link-underline-width: 1px;
-    /* THEME TOKENS */
-    --kbq-link-text: var(--kbq-foreground-theme);
-    --kbq-link-border-bottom: var(--kbq-line-theme-fade);
-    --kbq-link-state-visited-text: var(--kbq-foreground-visited);
-    /* @TODO (#DS-3002) */
-    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
-    --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
-    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
-    --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
-    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
-    --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
-    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-fade);
-    --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
-    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-fade);
-    --kbq-link-state-focused-outline: var(--kbq-states-line-focus-theme);
-    --kbq-link-state-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-link-state-disabled-border-bottom: var(--kbq-states-line-disabled);
+@use '../core/styles/common/link';
+
+// The hosts of the component only, as in `link.scss`
+// @TODO: drop `:where([kbqlink])` together with `link/deprecated`
+.kbq-link:where([kbqlink]) {
+    @include link.kbq-link-tokens();
 }

package/link/link.scss

@@ -0,0 +1,137 @@
+@use 'sass:string';
+@use '../core/styles/common/tokens';
+@use '../core/styles/common/link';
+
+// Sass writes an escape in a quoted string as the character itself, an invisible one here. Unquoted, the
+// joiner reaches the CSS as the `\2060` escape.
+$_kbq-link-word-joiner: string.unquote('"\\2060"');
+
+// Only an icon or an image after the text keeps its distance from it: the punctuation ending a sentence
+// follows the last word immediately.
+@mixin _kbq-link-gaps($gap, $external-icon-gap) {
+    .kbq-link__prefix + .kbq-link__text {
+        margin-inline-start: $gap;
+    }
+
+    .kbq-link__trailing {
+        > .kbq-icon,
+        > img,
+        > svg {
+            margin-inline-start: $gap;
+        }
+
+        > .kbq-link__external-icon {
+            margin-inline-start: $external-icon-gap;
+        }
+    }
+}
+
+// The hosts of the component only: the deprecated directive shares the `kbq-link` class, and `:where()` keeps it
+// out without adding to the specificity of a rule.
+// @TODO: drop `:where([kbqlink])` together with `link/deprecated`: the plain `.kbq-link` is enough then.
+.kbq-link:where([kbqlink]) {
+    display: inline;
+
+    text-decoration: none;
+
+    @include link.kbq-link-root();
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+    @include link.kbq-link-states('.kbq-link__text');
+
+    &.kbq-link_use-visited:visited:not(.kbq-disabled),
+    &.kbq-link_use-visited.kbq-visited:not(.kbq-disabled) {
+        @include link.kbq-link-visited-states('.kbq-link__text');
+    }
+
+    &.cdk-keyboard-focused {
+        @include link.kbq-link-keyboard-focus-outline();
+    }
+
+    // The vertical padding covers the gap between the lines of a wrapped link, so the pointer moving from one
+    // line to the next stays on the link. It changes neither the line height nor the focus ring, drawn around
+    // the link itself, so a link that fits on one line keeps it too.
+    .kbq-link__text {
+        padding-block: var(--kbq-link-size-multiline-hit-area-gap);
+
+        @include link.kbq-link-text();
+    }
+
+    // The states color the underline whatever the mode: a link underlined on hover only, or never, has no line
+    &.kbq-link_underline_hover:not(:hover, .kbq-hovered, :active, .kbq-active),
+    &.kbq-link_underline_none {
+        .kbq-link__text {
+            text-decoration-line: none;
+        }
+    }
+
+    .kbq-link__prefix.kbq-icon,
+    .kbq-link__trailing .kbq-icon {
+        vertical-align: baseline;
+
+        &:has(> svg) {
+            vertical-align: middle;
+            line-height: 0;
+        }
+    }
+
+    // The trailing part starts with a word joiner and does not wrap inside, so the last word of the text, the
+    // punctuation and the trailing icon fit on a line together or wrap together, whatever the icon size. The
+    // joiner is kept out of the accessible name.
+    .kbq-link__trailing {
+        white-space: nowrap;
+
+        &:not(:empty)::before {
+            // Firefox before 128 and Safari before 17.4 drop the declaration with the alternative text
+            content: $_kbq-link-word-joiner;
+            content: $_kbq-link-word-joiner / '';
+        }
+
+        // Only the joint stays on one line: a suffix, such as a caption, wraps inside like the text
+        > .kbq-link__suffix {
+            white-space: normal;
+        }
+    }
+
+    @include _kbq-link-gaps(var(--kbq-link-size-normal-content-padding), 1px);
+
+    &.kbq-link_size_compact {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
+
+        .kbq-link__prefix.kbq-icon {
+            vertical-align: text-top;
+        }
+
+        .kbq-link__trailing .kbq-icon {
+            vertical-align: middle;
+        }
+
+        .kbq-link__external-icon {
+            margin-bottom: 1px;
+        }
+
+        @include _kbq-link-gaps(var(--kbq-link-size-compact-content-padding), 0px);
+    }
+
+    &.kbq-link_size_big {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+        @include _kbq-link-gaps(var(--kbq-link-size-big-content-padding), 2px);
+    }
+
+    // An icon without a color of its own takes the color of the link in every state
+    .kbq-icon.kbq-empty {
+        color: inherit !important;
+    }
+
+    @media print {
+        &[data-print]:not(.kbq-disabled) {
+            .kbq-link__text {
+                text-decoration: none;
+            }
+
+            &::after {
+                content: ':\a' attr(data-print);
+                white-space: pre;
+            }
+        }
+    }
+}