@koobiq/components 20.4.1 → 21.0.0

package/progress-bar/_progress-bar-theme.scss

@@ -1,13 +1,30 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-progress-bar-theme() {
-    .kbq-progress-bar.kbq-theme {
+    .kbq-progress-bar {
+        // Declared unconditionally so that an unsupported — or absent — `color` degrades to the default
+        // palette instead of leaving both surfaces transparent.
+        --kbq-progress-bar-track: var(--kbq-progress-bar-bar-background);
+        --kbq-progress-bar-fill: var(--kbq-progress-bar-bar-foreground);
+
         .kbq-progress-bar__inner {
-            background-color: var(--kbq-progress-bar-bar-background);
+            background-color: var(--kbq-progress-bar-track);
         }
 
         .kbq-progress-bar__line {
-            background-color: var(--kbq-progress-bar-bar-foreground);
+            background-color: var(--kbq-progress-bar-fill);
+        }
+
+        &.kbq-contrast {
+            --kbq-progress-bar-fill: var(--kbq-progress-bar-bar-contrast-foreground);
+        }
+
+        &.kbq-contrast-fade {
+            --kbq-progress-bar-fill: var(--kbq-progress-bar-bar-contrast-fade-foreground);
+        }
+
+        &.kbq-error {
+            --kbq-progress-bar-fill: var(--kbq-progress-bar-bar-error-foreground);
         }
     }
 

package/progress-bar/progress-bar-tokens.scss

@@ -6,6 +6,9 @@
     /* THEME TOKENS */
     --kbq-progress-bar-bar-background: var(--kbq-background-contrast-fade);
     --kbq-progress-bar-bar-foreground: var(--kbq-icon-theme);
+    --kbq-progress-bar-bar-contrast-foreground: var(--kbq-icon-contrast);
+    --kbq-progress-bar-bar-contrast-fade-foreground: var(--kbq-icon-contrast-fade);
+    --kbq-progress-bar-bar-error-foreground: var(--kbq-icon-error);
     --kbq-progress-bar-text-color: var(--kbq-foreground-contrast);
     --kbq-progress-bar-caption-color: var(--kbq-foreground-contrast-secondary);
 }

package/progress-bar/progress-bar.scss

@@ -1,24 +1,39 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/functions/timing';
 
-@use '../core/styles/common/tokens' as *;
-
 @use './progress-bar-theme' as *;
 
+// The fill is sized statically, so the animation only has to move and stretch it: both are
+// compositor-only, and neither is the thing that makes the bar visible. `translateX()` is a share of
+// the fill's own width, and the two ends are chosen so that no frame is empty: at `0%` its leading
+// edge sits exactly on the track's, and `400%` carries it clear of the track even at the widest
+// `scaleX()`. Anything further left parks the fill outside the clipped track for the start of every
+// iteration, which reads as an animation that restarts.
 @keyframes kbq-progress-bar-indeterminate {
     0% {
-        width: 25%;
-        transform: translateX(-150%);
+        transform: translateX(-100%) scaleX(1);
     }
 
     100% {
-        width: 40%;
-        transform: translateX(250%);
+        transform: translateX(400%) scaleX(1.6);
+    }
+}
+
+// Reduced motion still has to read as "running", and an opacity pulse is not a motion trigger
+// under WCAG 2.3.3.
+@keyframes kbq-progress-bar-indeterminate-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.4;
     }
 }
 
 .kbq-progress-bar {
     display: block;
-    overflow: hidden;
 
     .kbq-progress-bar-text {
         margin-bottom: var(--kbq-progress-bar-size-container-content-gap);
@@ -37,6 +52,8 @@
 
     & .kbq-progress-bar__line {
         height: 100%;
+        // Load-bearing: the indeterminate animation stretches the fill with `scaleX()`, which grows it
+        // away from its leading edge only while the origin stays at the left.
         transform-origin: top left;
 
         border-radius: var(--kbq-progress-bar-size-bar-border-radius);
@@ -44,13 +61,24 @@
 
     &.kbq-progress-bar_determinate .kbq-progress-bar__line {
         transition: width 0.3s;
+
+        @include animation.kbq-animations-off();
     }
 
     &.kbq-progress-bar_indeterminate .kbq-progress-bar__line {
+        // Declared outside the keyframes so that suppressing the animation cannot leave the fill at
+        // `width: auto`, which covers the whole track and reads as a finished operation.
+        width: 25%;
+
         animation: kbq-progress-bar-indeterminate 2.1s timing.$ease-in-out-quad infinite;
 
+        // Without motion the fill still has to read as running, so it pulses in place instead of sliding.
+        &.kbq-animations-disabled {
+            animation: kbq-progress-bar-indeterminate-pulse 2s ease-in-out infinite;
+        }
+
         @media (prefers-reduced-motion: reduce) {
-            animation: none;
+            animation: kbq-progress-bar-indeterminate-pulse 2s ease-in-out infinite;
         }
     }
 }

package/progress-spinner/progress-spinner.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/functions/timing';
 
 @use '../core/styles/common/tokens' as *;
@@ -23,6 +24,8 @@
     stroke-width: 13%;
     transition: stroke-dashoffset 0.3s;
     transform-origin: center center;
+
+    @include animation.kbq-animations-off();
 }
 
 .kbq-progress-spinner__inner {
@@ -65,9 +68,7 @@
 .kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner {
     animation: kbq-progress-spinner-indeterminate 1.5s timing.$ease-in-out-quad infinite;
 
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-    }
+    @include animation.kbq-animations-off();
 
     // TODO: rework this place
     .kbq-progress-spinner__circle {

package/radio/_radio-theme.scss

@@ -65,10 +65,6 @@
 
 @mixin kbq-radio-theme() {
     .kbq-radio-button {
-        & .kbq-radio-button__inner-circle {
-            border-width: 0 !important;
-        }
-
         @include kbq-radio-color(theme);
 
         color: var(--kbq-foreground-contrast);
@@ -79,6 +75,18 @@
             color: var(--kbq-foreground-contrast);
         }
     }
+
+    // A color or an error state on the group is a single binding for every button in it, so the error
+    // palette does not have to be repeated per option.
+    .kbq-radio-group.kbq-error .kbq-radio-button,
+    .kbq-radio-group.kbq-invalid .kbq-radio-button {
+        @include kbq-radio-color(error);
+    }
+
+    // A hint of the group reads like the hints of its options; the error keeps its own color.
+    .kbq-radio-group__subscript .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text {
+        color: var(--kbq-radio-theme-default-caption);
+    }
 }
 
 @mixin kbq-radio-typography() {
@@ -97,4 +105,13 @@
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
+
+    // The error and the hints under the group read at the size of the hints of its options.
+    .kbq-radio-group_normal .kbq-radio-group__subscript .kbq-hint__text {
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+    }
+
+    .kbq-radio-group_big .kbq-radio-group__subscript .kbq-hint__text {
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+    }
 }

package/radio/radio-tokens.scss

@@ -1,7 +1,6 @@
 .kbq-radio-group {
     --kbq-radio-size-big-vertical-gap: var(--kbq-size-m);
     --kbq-radio-size-normal-vertical-gap: var(--kbq-size-s);
-    --kbq-radio-size-big-top: var(--kbq-size-3xs);
     /* THEME TOKENS */
     --kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);
     --kbq-radio-theme-default-outer-circle-background: var(--kbq-background-bg);
@@ -34,6 +33,7 @@
     --kbq-radio-error-default-outer-circle-border: var(--kbq-line-error);
     --kbq-radio-error-default-outer-circle-background: var(--kbq-background-error-less);
     --kbq-radio-error-default-inner-circle-background: transparent;
+    --kbq-radio-error-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-radio-error-states-hover-outer-circle-border: var(--kbq-line-error);
     --kbq-radio-error-states-hover-outer-circle-background: var(--kbq-states-background-error-fade-hover);
     --kbq-radio-error-states-hover-inner-circle-background: transparent;
@@ -60,7 +60,9 @@
     --kbq-radio-error-states-disabled-caption: var(--kbq-states-foreground-disabled);
 }
 
-.kbq-radio-button {
+// The error and the hints under a group line up with the buttons, so they read their sizes too.
+.kbq-radio-button,
+.kbq-radio-group__subscript {
     --kbq-radio-size-normal-outer-circle-border-width: var(--kbq-size-border-width);
     --kbq-radio-size-normal-outer-size: calc(
         var(--kbq-size-l) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2
@@ -68,7 +70,9 @@
     --kbq-radio-size-normal-inner-size: var(--kbq-size-xs);
     --kbq-radio-size-normal-horizontal-content-padding: var(--kbq-size-s);
     --kbq-radio-size-normal-vertical-content-padding: var(--kbq-size-3xs);
-    --kbq-radio-size-normal-top: 0;
+    /* The geometry of the big size intentionally matches the normal one: the sizes differ in
+       typography, in the group gap and in the vertical offset that follows the line height. The
+       tokens are kept apart so the two sizes stay independently overridable. */
     --kbq-radio-size-big-outer-circle-border-width: var(--kbq-size-border-width);
     --kbq-radio-size-big-outer-size: calc(var(--kbq-size-l) - var(--kbq-radio-size-big-outer-circle-border-width) * 2);
     --kbq-radio-size-big-inner-size: var(--kbq-size-xs);

package/radio/radio.scss

@@ -15,15 +15,64 @@
     }
 }
 
+// Lines up with the option text, as `.kbq-radio-label-content` indents it.
+.kbq-radio-group__subscript {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kbq-radio-size-normal-vertical-content-padding);
+
+    // Sits as close to the last option as a hint to its label, as in a checkbox: the gap of the group, which spaces
+    // the options apart, would otherwise push the error away from them.
+    margin-top: calc(var(--kbq-radio-size-normal-vertical-content-padding) - var(--kbq-radio-size-normal-vertical-gap));
+
+    padding-left: kbq-sum-series-css-variables(
+        [radio-size-normal-outer-size,
+        radio-size-normal-horizontal-content-padding,
+        calc(var(--kbq-radio-size-normal-outer-circle-border-width) * 2)]
+    );
+}
+
+.kbq-radio-group_label-before .kbq-radio-group__subscript {
+    padding-left: 0;
+    padding-right: kbq-sum-series-css-variables(
+        [radio-size-normal-outer-size,
+        radio-size-normal-horizontal-content-padding,
+        calc(var(--kbq-radio-size-normal-outer-circle-border-width) * 2)]
+    );
+}
+
+.kbq-radio-group_big .kbq-radio-group__subscript {
+    margin-top: calc(var(--kbq-radio-size-big-vertical-content-padding) - var(--kbq-radio-size-big-vertical-gap));
+    padding-left: kbq-sum-series-css-variables(
+        [radio-size-big-outer-size,
+        radio-size-big-horizontal-content-padding,
+        calc(var(--kbq-radio-size-big-outer-circle-border-width) * 2)]
+    );
+}
+
+.kbq-radio-group_big.kbq-radio-group_label-before .kbq-radio-group__subscript {
+    padding-left: 0;
+    padding-right: kbq-sum-series-css-variables(
+        [radio-size-big-outer-size,
+        radio-size-big-horizontal-content-padding,
+        calc(var(--kbq-radio-size-big-outer-circle-border-width) * 2)]
+    );
+}
+
 // Top-level host container.
 .kbq-radio-button {
-    display: inline-flex;
+    // Inline-block rather than inline-flex: the host's own line box keeps the button one line tall
+    // even when the label is empty, and puts the baseline where the surrounding text expects it.
+    display: inline-block;
 }
 
 .kbq-radio-label {
+    // required for '.cdk-visually-hidden' input to be positioned correctly
+    position: relative;
+
     display: inline-flex;
     align-items: center;
-    vertical-align: middle;
+    vertical-align: top;
 
     cursor: pointer;
 
@@ -52,15 +101,13 @@
         position: absolute;
         display: flex;
 
-        content: '';
-
-        border: {
-            style: solid;
-            radius: 50%;
-        }
+        border-radius: 50%;
     }
 
     .kbq-radio-button__outer-circle {
+        // Only the outer circle is drawn with a border. Setting `border-style` on both used to give the
+        // inner circle the initial `medium` width, which the theme then had to cancel with `!important`.
+        border-style: solid;
         border-width: var(--kbq-radio-size-normal-outer-circle-border-width);
 
         left: 0;