@koobiq/components 20.4.2 → 21.0.1

package/skeleton/skeleton.scss

@@ -1,60 +1,68 @@
-@keyframes wave {
+@use '../core/styles/common/animation';
+
+// The wave crosses the viewport, not the host: the host offset turns viewport coordinates into the host's own, so
+// every skeleton on the page shows the same band at the same moment. `mask-position` is animated directly and must
+// never be `!important`: either an animated custom property or an important base value makes the browser recompute
+// the whole style of every host on every frame.
+@keyframes kbq-skeleton-wave {
     from {
-        transform: translateX(calc(var(--kbq-skeleton-wave-width) * -1));
+        mask-position:
+            calc(var(--kbq-skeleton-wave-width) * -2 - var(--kbq-skeleton-offset, 0px)) 0,
+            0 0;
     }
 
     to {
-        transform: translateX(100vw);
+        mask-position:
+            calc(100vw - var(--kbq-skeleton-wave-width) - var(--kbq-skeleton-offset, 0px)) 0,
+            0 0;
     }
 }
 
-.kbq-skeleton:not(.kbq-skeleton_disabled) {
-    --kbq-skeleton-min-height: var(--kbq-size-l);
-    --kbq-skeleton-animation-duration: 1200ms;
-    --kbq-skeleton-animation-delay: 0ms;
-    --kbq-skeleton-border-radius: var(--kbq-size-xxs);
-    --kbq-skeleton-wave-width: 100px;
-    --kbq-skeleton-z-index: 1;
+// Zero specificity makes the radius a fallback: a host that sets its own radius in any rule keeps it, and only the
+// ones nobody rounded, such as plain text, get this one. It must not become `!important`.
+:where(.kbq-skeleton:not(.kbq-skeleton_disabled)) {
+    border-radius: var(--kbq-skeleton-border-radius);
+}
 
-    &:is(kbq-skeleton) {
-        display: flex;
-        min-height: var(--kbq-skeleton-min-height);
-        border-radius: var(--kbq-skeleton-border-radius);
-    }
+// The standalone element is a fallback too, so a class of the consumer resizes the block.
+:where(kbq-skeleton:not(.kbq-skeleton_disabled)) {
+    display: flex;
+    min-height: var(--kbq-skeleton-min-height);
+}
 
-    position: relative;
-    overflow: hidden;
-    clip-path: inset(0);
+.kbq-skeleton:not(.kbq-skeleton_disabled) {
+    // A solid background and the filter turn the host, children included, into one shape of the host's own
+    // outline; any opaque color works, the filter flattens it with the rest. No pseudo-elements, so the host's own
+    // ones and replaced elements such as `<img>` keep working, and each line of an inline host gets a bar.
+    color: transparent !important;
+    background: var(--kbq-background-bg) !important;
+    box-shadow: none !important;
+    box-decoration-break: clone;
+    filter: var(--kbq-skeleton-filter);
+    mask-image:
+        linear-gradient(
+            90deg,
+            var(--kbq-skeleton-animation-wave-start),
+            var(--kbq-skeleton-animation-wave-center),
+            var(--kbq-skeleton-animation-wave-end)
+        ),
+        linear-gradient(var(--kbq-skeleton-fill), var(--kbq-skeleton-fill));
+    mask-size:
+        var(--kbq-skeleton-wave-width) 100%,
+        100% 100%;
+    // Parks the band just outside the host whenever the wave does not run.
+    mask-position:
+        calc(var(--kbq-skeleton-wave-width) * -1) 0,
+        0 0;
+    mask-repeat: no-repeat;
+    animation: kbq-skeleton-wave var(--kbq-skeleton-animation-duration) ease-in infinite;
     user-select: none;
     pointer-events: none;
-    border-color: transparent;
-    outline-color: transparent;
 
-    &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: var(--kbq-skeleton-background);
-        z-index: var(--kbq-skeleton-z-index);
+    // A host outside the viewport keeps the fill and skips the per-frame work of the wave.
+    &.kbq-skeleton_offscreen {
+        animation: none;
     }
 
-    &::after {
-        content: '';
-        position: fixed;
-        inset-block: 0;
-        left: calc(var(--kbq-skeleton-wave-width) * -1);
-        width: var(--kbq-skeleton-wave-width);
-        z-index: var(--kbq-skeleton-z-index);
-        background: linear-gradient(
-            90deg,
-            var(--kbq-skeleton-animation-wave-start) 0%,
-            var(--kbq-skeleton-animation-wave-center) 50%,
-            var(--kbq-skeleton-animation-wave-end) 100%
-        );
-        animation: wave var(--kbq-skeleton-animation-duration) ease-in var(--kbq-skeleton-animation-delay) infinite;
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-        }
-    }
+    @include animation.kbq-animations-off();
 }

package/split-button/_split-button-theme.scss

@@ -63,7 +63,7 @@
                         color: var(--kbq-icon-contrast);
                     }
 
-                    &:before {
+                    &::before {
                         background: var(--kbq-line-contrast-fade);
                     }
                 }
@@ -96,18 +96,18 @@
             }
 
             &.kbq-theme.kbq-button_transparent {
-                & .kbq-split-button_second:before {
+                & .kbq-split-button_second::before {
                     background: var(--kbq-states-line-disabled);
                 }
             }
 
-            & .kbq-split-button_second:before {
+            & .kbq-split-button_second::before {
                 background: var(--kbq-states-line-disabled);
             }
         }
 
         &.kbq-split-button_first-disabled.kbq-split-button_second-disabled {
-            & .kbq-split-button_second:before {
+            & .kbq-split-button_second::before {
                 background: var(--kbq-line-contrast-fade);
             }
         }

package/split-button/split-button.scss

@@ -1,5 +1,5 @@
-@use '../core/styles/common/list';
 @use './split-button-theme';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-split-button {
     display: flex;
@@ -7,7 +7,7 @@
 
     min-width: 0;
 
-    border-radius: var(--kbq-size-border-radius);
+    @include kbq-squircle(var(--kbq-size-border-radius));
 
     &.kbq-split-button_styles-for-nested {
         & .kbq-split-button_first {
@@ -21,10 +21,6 @@
 
             border-top-right-radius: unset;
             border-bottom-right-radius: unset;
-
-            & .kbq-button-wrapper {
-                @include list.kbq-truncate-line();
-            }
         }
 
         & .kbq-split-button_second {

package/splitter/{_splitter-theme.scss → deprecated/_splitter-theme.scss}

@@ -1,4 +1,4 @@
-@use '../core/styles/common/tokens' as *;
+@use '../../core/styles/common/tokens' as *;
 
 @mixin kbq-splitter-theme() {
     .kbq-gutter {

package/splitter/deprecated/splitter.scss

@@ -0,0 +1,51 @@
+@use './splitter-theme' as *;
+
+.kbq-splitter-component {
+    display: flex;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
+
+    overflow: hidden;
+
+    .kbq-splitter-area {
+        overflow: hidden;
+    }
+
+    .kbq-splitter-area_resizing {
+        pointer-events: none;
+    }
+}
+
+.kbq-gutter {
+    display: flex;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    justify-content: center;
+    align-items: center;
+
+    overflow: hidden;
+
+    &.kbq-gutter_vertical > .kbq-icon {
+        transform: rotate(90deg);
+    }
+}
+
+.kbq-gutter-ghost {
+    position: absolute;
+    z-index: 999;
+    display: none;
+    overflow: hidden;
+
+    &.kbq-gutter-ghost_vertical > .kbq-icon {
+        transform: rotate(90deg);
+    }
+
+    &.kbq-gutter-ghost_visible {
+        display: block;
+    }
+}
+
+@include kbq-splitter-theme();

package/splitter/splitter-tokens.scss

@@ -0,0 +1,19 @@
+.kbq-splitter {
+    --kbq-splitter-size-line-width: 1px;
+    --kbq-splitter-size-active-line-width: 3px;
+    --kbq-splitter-size-focus-outline-width: 2px;
+    /* Wider than the line it draws, so the separator is easy to hit; it overlays the panels instead of
+       sitting between them, which is why the panels never shift when it grows. */
+    --kbq-splitter-size-hit-area: calc(2 * var(--kbq-size-s) + var(--kbq-splitter-size-line-width));
+    --kbq-splitter-size-handle-length: var(--kbq-size-3xl);
+    --kbq-splitter-size-handle-thickness: var(--kbq-size-xxs);
+    --kbq-splitter-size-handle-border-radius: var(--kbq-size-3xs);
+
+    /* THEME TOKENS */
+    --kbq-splitter-line-color: var(--kbq-line-contrast-less);
+    --kbq-splitter-state-hover-line-color: var(--kbq-line-contrast-fade);
+    --kbq-splitter-state-active-line-color: var(--kbq-states-line-focus-theme);
+    --kbq-splitter-focus-outline-color: var(--kbq-states-line-focus-theme);
+    --kbq-splitter-handle-color: var(--kbq-line-contrast-fade);
+    --kbq-splitter-state-active-handle-color: var(--kbq-states-line-focus-theme);
+}

package/splitter/splitter.scss

@@ -1,51 +1,171 @@
-@use './splitter-theme' as *;
-
 .kbq-splitter {
-    display: flex;
+    display: grid;
     position: relative;
-    flex-wrap: nowrap;
-    align-items: stretch;
-
-    overflow: hidden;
+    // As a flex or grid item the splitter would otherwise be stretched by its own content-based minimum, and
+    // that minimum is computed with the `fr` tracks against indefinite space: a track small enough relative to
+    // the content it holds — a panel pinned to its collapsed size, say — drives the flex fraction above one and
+    // multiplies every other track by it, so the splitter grows to tens of thousands of pixels. Measuring that
+    // height back into the track values then feeds the growth. Nowhere else does this change anything: outside a
+    // flex or grid item `min-*: auto` already means zero.
+    min-width: 0;
+    min-height: 0;
+    // Half of every separator's hit area reaches past the panel it belongs to, so a separator on the splitter's
+    // own edge — where one ends up once the panel beyond it collapses to nothing — would otherwise paint and
+    // hit-test outside the component, stealing clicks from whatever sits beside it. `clip` rather than
+    // `hidden`: a scroll container would let any reveal (focus, Tab, find-in-page, `scrollIntoView`) displace
+    // the panels. The cost is that such an edge separator is grabbable over the inner half of its hit area.
+    overflow: clip;
+    // The panel tracks of the resize axis are written as inline percentages by the component; the cross axis
+    // is a single track here, so panels always fill the splitter across it.
+    grid-template-rows: minmax(0, 1fr);
 
-    .kbq-splitter-area {
-        overflow: hidden;
+    &.kbq-splitter_vertical {
+        grid-template-rows: none;
+        grid-template-columns: minmax(0, 1fr);
     }
 
-    .kbq-splitter-area_resizing {
+    // A drag must not land on the content it flies over: a text selection, an iframe or a hover target under
+    // the pointer would all fight the resize.
+    &.kbq-splitter_dragging .kbq-splitter-panel__content {
         pointer-events: none;
+        user-select: none;
     }
 }
 
-.kbq-gutter {
+.kbq-splitter-panel {
+    position: relative;
+    // Grid items are `min-width: auto` by default, which lets their content veto the track size the splitter
+    // computed. Panels are clipped instead, so the layout stays the single source of truth.
+    min-width: 0;
+    min-height: 0;
+    // Focusable for `F6` only, so the ring is drawn on keyboard focus and nowhere else.
+    outline: none;
+
+    &:focus-visible {
+        outline: var(--kbq-splitter-size-focus-outline-width) solid var(--kbq-splitter-focus-outline-color);
+        outline-offset: calc(-1 * var(--kbq-splitter-size-focus-outline-width));
+    }
+}
+
+// A column flex container rather than a plain block, so content can fill the panel with `flex: 1` instead of
+// chasing a percentage height through every wrapper it happens to sit in. Children still stack top to bottom,
+// as they did in block flow. Content taller than the panel is still clipped rather than squashed: a flex item's
+// automatic minimum size keeps it at its own content height. Only a child with an explicit height can now shrink
+// below it, and such a child wants `flex-shrink: 0`.
+.kbq-splitter-panel__content {
     display: flex;
+    flex-direction: column;
+    block-size: 100%;
+    inline-size: 100%;
+    overflow: hidden;
+}
 
-    flex-grow: 0;
-    flex-shrink: 0;
+.kbq-splitter-panel__separator {
+    position: absolute;
+    z-index: 1;
+    // Centred on the boundary the panel shares with the next one, so half of the hit area reaches into each.
+    inset-block: 0;
+    inset-inline-end: calc(var(--kbq-splitter-size-hit-area) / -2);
+    inline-size: var(--kbq-splitter-size-hit-area);
+    touch-action: none;
+    // Suppress the native ring: the frame is drawn solely by `.cdk-keyboard-focused` below, so a pointer drag
+    // (which demotes the focus origin to mouse) leaves no `:focus-visible` outline lingering.
+    outline: none;
 
-    justify-content: center;
-    align-items: center;
+    // The separator line, centred inside the hit area and running the full length of the boundary, edge to edge.
+    &::after {
+        position: absolute;
+        inset-block: 0;
+        inset-inline: 0;
+        inline-size: var(--kbq-splitter-size-line-width);
+        margin-inline: auto;
+        background-color: var(--kbq-splitter-line-color);
+        content: '';
+    }
 
-    overflow: hidden;
+    &:is(:hover, .kbq-hover)::after {
+        background-color: var(--kbq-splitter-state-hover-line-color);
+    }
 
-    &.kbq-gutter_vertical > .kbq-icon {
-        transform: rotate(90deg);
+    // Tint and thicken the line only while dragging; keyboard focus keeps the line at its default width and is
+    // marked solely by the outline frame below.
+    &:is(:active, .kbq-active)::after {
+        inline-size: var(--kbq-splitter-size-active-line-width);
+        background-color: var(--kbq-splitter-state-active-line-color);
+    }
+
+    // Only keyboard focus shows the frame; a pointer drag demotes the focus origin to mouse (see
+    // `handleResizeStart`), so the frame stays hidden throughout the drag and does not linger after it.
+    &.cdk-keyboard-focused {
+        outline: var(--kbq-splitter-size-focus-outline-width) solid var(--kbq-splitter-focus-outline-color);
+        outline-offset: calc(-1 * var(--kbq-splitter-size-focus-outline-width));
     }
 }
 
-.kbq-gutter-ghost {
-    position: absolute;
-    z-index: 999;
-    display: none;
-    overflow: hidden;
+// Every rule below reaches the splitter's own panels through child combinators rather than as descendants.
+// A nested splitter sits inside a panel of the outer one, so a descendant selector would hand its separators
+// the outer splitter's orientation, appearance and disabled state — a horizontal splitter nested in a vertical
+// one would draw its separators as horizontal bands laid over the boundary they do not belong to.
 
-    &.kbq-gutter-ghost_vertical > .kbq-icon {
-        transform: rotate(90deg);
+// A disabled splitter must not light up under the pointer. Taking the separator out of hit-testing is what
+// settles it for every state at once: neither `:hover` nor `:active` can match an element events never reach,
+// and the cursor falls through to the panel underneath, which is the plain one the specification asks for.
+.kbq-splitter_disabled > .kbq-splitter-panel > .kbq-splitter-panel__separator {
+    pointer-events: none;
+}
+
+.kbq-splitter_vertical > .kbq-splitter-panel > .kbq-splitter-panel__separator {
+    inset-block: auto;
+    inset-inline: 0;
+    inset-block-end: calc(var(--kbq-splitter-size-hit-area) / -2);
+    inline-size: auto;
+    block-size: var(--kbq-splitter-size-hit-area);
+
+    &::after {
+        inset-block: 0;
+        inset-inline: 0;
+        inline-size: auto;
+        block-size: var(--kbq-splitter-size-line-width);
+        margin-inline: 0;
+        margin-block: auto;
     }
 
-    &.kbq-gutter-ghost_visible {
-        display: block;
+    &:is(:active, .kbq-active)::after {
+        inline-size: auto;
+        block-size: var(--kbq-splitter-size-active-line-width);
     }
 }
 
-@include kbq-splitter-theme();
+// A transparent splitter gives itself away by the cursor alone — the line never appears, not on hover and not
+// during a drag, which is what makes it usable on a boundary that already has a visual edge of its own. The
+// keyboard-focus frame on the separator itself is deliberately left alone: it is the only visible focus
+// indicator this appearance has, and dropping it too would leave keyboard users with nothing to see.
+.kbq-splitter_transparent > .kbq-splitter-panel > .kbq-splitter-panel__separator::after {
+    opacity: 0;
+}
+
+// The handle replaces the line with a grip centred on the boundary.
+.kbq-splitter_handle > .kbq-splitter-panel > .kbq-splitter-panel__separator {
+    &::after {
+        inset-block: 0;
+        inline-size: var(--kbq-splitter-size-handle-thickness);
+        block-size: var(--kbq-splitter-size-handle-length);
+        margin-block: auto;
+        border-radius: var(--kbq-splitter-size-handle-border-radius);
+        background-color: var(--kbq-splitter-handle-color);
+    }
+
+    &:is(:hover, .kbq-hover)::after,
+    &:is(:active, .kbq-active)::after,
+    &.cdk-keyboard-focused::after {
+        background-color: var(--kbq-splitter-state-active-handle-color);
+    }
+}
+
+.kbq-splitter_handle.kbq-splitter_vertical > .kbq-splitter-panel > .kbq-splitter-panel__separator::after {
+    inset-inline: 0;
+    inline-size: var(--kbq-splitter-size-handle-length);
+    block-size: var(--kbq-splitter-size-handle-thickness);
+    margin-inline: auto;
+    margin-block: auto;
+}

package/table/_table-theme.scss

@@ -3,40 +3,40 @@
 @mixin kbq-table-theme() {
     .kbq-table {
         & > thead {
-            color: var(--kbq-foreground-contrast-secondary);
+            color: var(--kbq-table-header-text);
 
             & > tr > th {
-                border-bottom-color: var(--kbq-line-contrast-less);
+                border-bottom-color: var(--kbq-table-border-color);
             }
         }
 
-        & > tbody {
+        & > tbody,
+        & > tfoot {
             & > tr {
                 & > th,
                 & > td {
-                    color: var(--kbq-foreground-contrast);
+                    color: var(--kbq-table-body-text);
                 }
             }
         }
 
         &:not(.kbq-table_disable-hover) > tbody {
             & > tr {
-                &.kbq-hovered td,
-                &:hover td {
-                    background-color: var(--kbq-states-background-transparent-hover);
+                &.kbq-hovered > :is(td, th),
+                &:hover > :is(td, th) {
+                    background-color: var(--kbq-table-states-hover-background);
                 }
             }
         }
 
         &.kbq-table_sticky-header > thead > tr > th {
-            background-color: var(--kbq-background-bg);
+            background-color: var(--kbq-table-sticky-header-background);
         }
 
         &.kbq-table_bordered {
             & > tbody > tr {
-                & th,
-                & td {
-                    border-bottom-color: var(--kbq-line-contrast-less);
+                & > :is(td, th) {
+                    border-bottom-color: var(--kbq-table-border-color);
                 }
             }
         }
@@ -53,7 +53,8 @@
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
-        & > tbody {
+        & > tbody,
+        & > tfoot {
             & > tr > th {
                 font-weight: normal;
             }

package/table/table-tokens.scss

@@ -2,4 +2,12 @@
     --kbq-table-size-border-width: var(--kbq-size-border-width);
     --kbq-table-size-row-padding-vertical: 10px;
     --kbq-table-size-row-padding-horizontal: var(--kbq-size-s);
+    --kbq-table-size-row-border-radius: var(--kbq-size-m);
+    --kbq-table-cell-text-align: start;
+    /* THEME TOKENS */
+    --kbq-table-header-text: var(--kbq-foreground-contrast-secondary);
+    --kbq-table-body-text: var(--kbq-foreground-contrast);
+    --kbq-table-border-color: var(--kbq-line-contrast-less);
+    --kbq-table-states-hover-background: var(--kbq-states-background-transparent-hover);
+    --kbq-table-sticky-header-background: var(--kbq-background-bg);
 }

package/table/table.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/squircle' as *;
 @use '../core/styles/common/tokens' as *;
 
 @use './table-theme' as *;
@@ -11,15 +12,11 @@
         & > tr {
             & > th,
             & > td {
-                padding: {
-                    top: var(--kbq-table-size-row-padding-vertical);
-                    right: var(--kbq-table-size-row-padding-horizontal);
-                    bottom: var(--kbq-table-size-row-padding-vertical);
-                    left: var(--kbq-table-size-row-padding-horizontal);
-                }
+                padding-block: var(--kbq-table-size-row-padding-vertical);
+                padding-inline: var(--kbq-table-size-row-padding-horizontal);
 
                 vertical-align: baseline;
-                text-align: left;
+                text-align: var(--kbq-table-cell-text-align);
             }
         }
     }
@@ -31,9 +28,11 @@
         }
     }
 
-    .kbq-table-cell_has-button {
-        padding-top: var(--kbq-size-xxs);
-        padding-bottom: var(--kbq-size-xxs);
+    // A cell holding a button keeps the row at the button's own height instead of stacking the cell
+    // padding on top of it. `KbqButtonCssStyler` binds one of these two classes on every `kbq-button`.
+    // `tfoot` gets the same treatment as `tbody`, matching the color/typography parity it has elsewhere.
+    & > :is(tbody, tfoot) > tr > :is(td, th):has(.kbq-button, .kbq-button-icon) {
+        padding-block: var(--kbq-size-xxs);
     }
 }
 
@@ -43,12 +42,21 @@
         top: 0;
         z-index: 1;
     }
+
+    // `scroll-margin` is read from the element the browser scrolls to, so keeping a focused control
+    // clear of the pinned header takes the margin on the control itself, not only on its cell
+    // (WCAG 2.2 SC 2.4.11 Focus Not Obscured). The height is measured and published by `KbqTable`.
+    // `tfoot` is included alongside `tbody`: a focusable control in a footer row can be scrolled
+    // backwards under the pinned header exactly like one in the body.
+    & > :is(tbody, tfoot) > tr > :is(td, th),
+    & > :is(tbody, tfoot) > tr > :is(td, th) :is(a, button, input, select, textarea, summary, [tabindex]) {
+        scroll-margin-block-start: var(--kbq-table-size-sticky-header-height, 0px);
+    }
 }
 
 .kbq-table.kbq-table_bordered {
     & > tbody > tr {
-        & th,
-        & td {
+        & > :is(td, th) {
             border-bottom-width: var(--kbq-table-size-border-width);
             border-bottom-style: solid;
         }
@@ -57,26 +65,43 @@
 
 .kbq-table:not(.kbq-table_bordered) {
     & > tbody > tr {
-        & > td:first-child {
-            border-top-left-radius: var(--kbq-size-m);
-            border-bottom-left-radius: var(--kbq-size-m);
+        & > :is(td, th):first-child {
+            @include kbq-squircle(
+                var(--kbq-table-size-row-border-radius),
+                border-start-start-radius border-end-start-radius
+            );
         }
 
-        & > td:last-child {
-            border-top-right-radius: var(--kbq-size-m);
-            border-bottom-right-radius: var(--kbq-size-m);
+        & > :is(td, th):last-child {
+            @include kbq-squircle(
+                var(--kbq-table-size-row-border-radius),
+                border-start-end-radius border-end-end-radius
+            );
         }
 
         &:first-child {
-            & > td:first-child {
-                border-top-left-radius: 0;
+            & > :is(td, th):first-child {
+                border-start-start-radius: 0;
             }
 
-            & > td:last-child {
-                border-top-right-radius: 0;
+            & > :is(td, th):last-child {
+                border-start-end-radius: 0;
             }
         }
     }
+
+    // Mirrors the `:first-child` carve-out above: a `tfoot` caps the bottom the same way a `thead`
+    // caps the top, so the last body row squares off against it instead of showing a rounded corner
+    // right above a square footer cell.
+    & > tbody:has(+ tfoot) > tr:last-child {
+        & > :is(td, th):first-child {
+            border-end-start-radius: 0;
+        }
+
+        & > :is(td, th):last-child {
+            border-end-end-radius: 0;
+        }
+    }
 }
 
 @include kbq-table-theme();