@koobiq/components 20.4.2 → 21.0.0

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();

package/tabs/_tabs-common.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/animation';
+@use '../core/styles/common/squircle' as *;
 @use '../core/styles/common/tokens';
 @use '../core/styles/common/vendor-prefixes';
 
@@ -28,9 +30,10 @@
         width: var(--kbq-tabs-size-tab-item-focus-outline-width);
         style: solid;
         color: transparent;
-        radius: var(--kbq-tabs-size-tab-item-border-radius);
     }
 
+    @include kbq-squircle(var(--kbq-tabs-size-tab-item-border-radius));
+
     outline: none;
 
     &.kbq-selected {
@@ -77,10 +80,12 @@
         pointer-events: none;
     }
 
+    // Two classes outweigh the single-class base rule above, so no `!important` is needed to drop the
+    // padding here — and without it a consumer can still override the padding on an icon-only tab.
     &.kbq-tab-label_icon-only {
         width: var(--kbq-size-3xl);
         height: var(--kbq-size-3xl);
-        padding: 0 !important;
+        padding: 0;
         margin-inline: var(--kbq-size-xxs);
         box-sizing: content-box;
 
@@ -192,24 +197,17 @@
 
         overflow-x: auto;
         overflow-y: hidden;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
 
         // `kbq-tab-group_vertical` sits on an ancestor either way: the `<kbq-tab-group>` wrapping a
         // `kbq-tab-header`, or the `[kbqTabNavBar]` host itself — so one descendant selector covers
-        // both `KbqPaginatedTabHeader` subclasses instead of the two disagreeing on the scrollbar.
+        // both `KbqPaginatedTabHeader` subclasses instead of the two disagreeing on the scroll axis.
+        // Whether a scrollbar is shown on that axis is `KbqScrollbarViewport`'s call, driven by
+        // `scrollbarMode`. Nothing is hidden here: a local rule would apply unconditionally, including
+        // in `native` mode where the directive deliberately adds no hiding class, and would leave that
+        // header with no scrollbar at all.
         .kbq-tab-group_vertical & {
             overflow-x: hidden;
             overflow-y: auto;
-            scrollbar-width: auto;
-
-            &::-webkit-scrollbar {
-                display: block;
-            }
         }
 
         .kbq-tab-header__pagination-controls_enabled & {
@@ -307,5 +305,7 @@
         &.kbq-disabled {
             background: var(--kbq-states-icon-disabled);
         }
+
+        @include animation.kbq-animations-off();
     }
 }

package/tabs/_tabs-theme.scss

@@ -81,9 +81,8 @@
                     background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
                 }
 
-                // FIXME: need check, tab-group has different subtype
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(filled, on-background);
+                    @include kbq-tab-item-style(filled, on-surface);
                 }
             }
         }
@@ -105,7 +104,7 @@
                 }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-surface);
                 }
             }
         }
@@ -125,7 +124,7 @@
                 background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(filled, on-background);
+                    @include kbq-tab-item-style(filled, on-surface);
                 }
             }
         }
@@ -143,7 +142,7 @@
                 background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-surface);
                 }
             }
         }

package/tabs/tab-body.scss

@@ -1,8 +1,56 @@
+@use '../core/styles/common/animation';
+
+$easing: cubic-bezier(0.35, 0, 0.25, 1);
+
 .kbq-tab-body__content {
     height: 100%;
     overflow: auto;
 
-    .kbq-tab-group_dynamic-height {
+    // `none` rather than a zero translation, which some browsers render blurred.
+    transform: none;
+    transition: transform var(--kbq-tab-body-animation-duration) $easing;
+
+    .kbq-tab-group_dynamic-height & {
         overflow: hidden;
     }
+
+    // A side body keeps a height before it moves: Chrome skips the transition of an element without one in RTL.
+    &.kbq-tab-body__content_left {
+        transform: translate3d(-100%, 0, 0);
+        min-height: 1px;
+    }
+
+    &.kbq-tab-body__content_right {
+        transform: translate3d(100%, 0, 0);
+        min-height: 1px;
+    }
+
+    &.kbq-tab-body__content_left-origin-center {
+        animation: kbq-tab-body-from-left var(--kbq-tab-body-animation-duration) $easing;
+    }
+
+    &.kbq-tab-body__content_right-origin-center {
+        animation: kbq-tab-body-from-right var(--kbq-tab-body-animation-duration) $easing;
+    }
+
+    &.kbq-tab-body__content_left,
+    &.kbq-tab-body__content_right,
+    &.kbq-tab-body__content_left-origin-center,
+    &.kbq-tab-body__content_right-origin-center {
+        @include animation.kbq-animations-off();
+    }
+
+    @include animation.kbq-animations-off();
+}
+
+@keyframes kbq-tab-body-from-left {
+    from {
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes kbq-tab-body-from-right {
+    from {
+        transform: translate3d(100%, 0, 0);
+    }
 }

package/tabs/tab-header.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/common/vendor-prefixes';
 @use './tabs-common';
+@use '../core/styles/common/squircle' as *;
 
 @include tabs-common.paginated-tab-header;
 
@@ -8,7 +9,7 @@
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
-    border-radius: var(--kbq-tabs-size-tab-stack-horizontal-border-radius);
+    @include kbq-squircle(var(--kbq-tabs-size-tab-stack-horizontal-border-radius));
 
     &.kbq-tab-header_underlined {
         .kbq-tab-group:not(.kbq-tab-group_on-surface) & {

package/tags/tag-list.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/input';
 
@@ -12,8 +13,11 @@
         outline: none;
     }
 
+    // The tags carry `kbq-animations-disabled`, see `KbqTag`.
     &.cdk-drop-list-dragging .cdk-drag {
         transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+
+        @include animation.kbq-animations-off();
     }
 }