@koobiq/components 20.4.2 → 21.0.0

package/skeleton/skeleton-presets.scss

@@ -0,0 +1,350 @@
+// As the components they stand in for, the element presets sit in a line of text and do not shrink in a row.
+:where(.kbq-skeleton-button, .kbq-skeleton-badge, .kbq-skeleton-tag, .kbq-skeleton-icon, .kbq-skeleton-link) {
+    display: inline-flex;
+    flex-shrink: 0;
+    vertical-align: middle;
+}
+
+:where(.kbq-skeleton-button) {
+    width: 72px;
+    height: var(--kbq-size-3xl);
+}
+
+:where(.kbq-skeleton-badge, .kbq-skeleton-tag) {
+    width: var(--kbq-size-6xl);
+    height: var(--kbq-size-xxl);
+}
+
+:where(.kbq-skeleton-icon) {
+    width: var(--kbq-size-xxl);
+    height: var(--kbq-size-xxl);
+}
+
+:where(.kbq-skeleton-link) {
+    width: var(--kbq-size-3xl);
+    height: var(--kbq-size-xl);
+}
+
+:where(.kbq-skeleton-typography) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+// A line of the level less the gap, so the placeholder is as tall as the text it stands in for.
+:where(.kbq-skeleton-typography__line) {
+    height: calc(1lh - var(--kbq-skeleton-typography-gap));
+    margin-block: calc(var(--kbq-skeleton-typography-gap) / 2);
+}
+
+:where(.kbq-skeleton-typography__line:nth-child(3n + 1)) {
+    width: var(--kbq-skeleton-typography-line-width-1);
+}
+
+:where(.kbq-skeleton-typography__line:nth-child(3n + 2)) {
+    width: var(--kbq-skeleton-typography-line-width-2);
+}
+
+:where(.kbq-skeleton-typography__line:nth-child(3n)) {
+    width: var(--kbq-skeleton-typography-line-width-3);
+}
+
+:where(.kbq-skeleton-typography__line:only-child) {
+    width: var(--kbq-skeleton-typography-single-line-width);
+}
+
+:where(.kbq-skeleton-dl) {
+    display: grid;
+    grid-template-columns: var(--kbq-skeleton-dl-term-width) minmax(0, 1fr);
+    grid-auto-rows: var(--kbq-skeleton-dl-row-height);
+    align-items: center;
+    gap: var(--kbq-skeleton-dl-row-gap) var(--kbq-skeleton-dl-column-gap);
+    width: 100%;
+}
+
+:where(.kbq-skeleton-dl__term, .kbq-skeleton-dl__description) {
+    height: var(--kbq-skeleton-dl-line-height);
+}
+
+// Every other child is a description, and the descriptions take the lengths in turn.
+:where(.kbq-skeleton-dl__description:nth-child(6n + 2)) {
+    width: var(--kbq-skeleton-dl-line-width-1);
+}
+
+:where(.kbq-skeleton-dl__description:nth-child(6n + 4)) {
+    width: var(--kbq-skeleton-dl-line-width-2);
+}
+
+:where(.kbq-skeleton-dl__description:nth-child(6n)) {
+    width: var(--kbq-skeleton-dl-line-width-3);
+}
+
+:where(.kbq-skeleton-table) {
+    display: grid;
+    width: 100%;
+}
+
+:where(.kbq-skeleton-table__cell) {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    height: var(--kbq-skeleton-table-row-height);
+    padding-inline: var(--kbq-skeleton-table-cell-padding-horizontal);
+}
+
+:where(.kbq-skeleton-table__cell_header) {
+    border-bottom: var(--kbq-skeleton-table-border-width) solid var(--kbq-skeleton-table-border-color);
+}
+
+:where(.kbq-skeleton-table__cell_pinned-edge) {
+    border-inline-end: var(--kbq-skeleton-table-border-width) solid var(--kbq-skeleton-table-border-color);
+}
+
+:where(.kbq-skeleton-table__cell > .kbq-skeleton) {
+    flex: 1;
+    height: var(--kbq-skeleton-table-line-height);
+}
+
+// The checkbox of a grid whose rows can be selected.
+:where(.kbq-skeleton-table__cell_selection > .kbq-skeleton) {
+    flex: none;
+    width: var(--kbq-skeleton-table-selection-size);
+    height: var(--kbq-skeleton-table-selection-size);
+}
+
+:where(.kbq-skeleton-group) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kbq-skeleton-group-gap);
+}
+
+:where(.kbq-skeleton-form-field) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+:where(.kbq-skeleton-form-field_horizontal) {
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+// Sized the way the label of .kbq-form-field is, so a labelClass such as flex-30 gives both the same width.
+:where(.kbq-skeleton-form-field__label) {
+    box-sizing: border-box;
+    display: flex;
+    margin-bottom: var(--kbq-skeleton-form-field-gap);
+}
+
+// Like the label of a horizontal .kbq-form-field: level with the value of the control.
+:where(.kbq-skeleton-form-field_horizontal > .kbq-skeleton-form-field__label) {
+    margin-bottom: 0;
+    padding: var(--kbq-size-xs) var(--kbq-size-l) 0 0;
+}
+
+// The bar sits in the middle of the line the text of the label would take.
+:where(.kbq-skeleton-form-field__label > .kbq-skeleton) {
+    width: var(--kbq-skeleton-form-field-label-width);
+    height: var(--kbq-skeleton-form-field-line-height);
+    margin-block: calc((var(--kbq-skeleton-form-field-label-height) - var(--kbq-skeleton-form-field-line-height)) / 2);
+}
+
+:where(.kbq-skeleton-form-field__content) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+}
+
+:where(.kbq-skeleton-form-field__control) {
+    height: var(--kbq-skeleton-form-field-control-height);
+}
+
+:where(.kbq-skeleton-form-field_textarea .kbq-skeleton-form-field__control) {
+    height: var(--kbq-skeleton-form-field-textarea-height);
+}
+
+:where(.kbq-skeleton-form-field__hint) {
+    width: var(--kbq-skeleton-form-field-hint-width);
+    height: var(--kbq-skeleton-form-field-hint-height);
+    margin-top: var(--kbq-skeleton-form-field-gap);
+}
+
+:where(.kbq-skeleton-accordion) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+:where(.kbq-skeleton-accordion__item) {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: calc(var(--kbq-skeleton-accordion-header-height) + var(--kbq-skeleton-accordion-border-width) * 2);
+    border: var(--kbq-skeleton-accordion-border-width) solid transparent;
+    padding: var(--kbq-skeleton-accordion-padding);
+}
+
+// At the top of the header, as the icon of the component.
+:where(.kbq-skeleton-accordion__icon) {
+    flex: none;
+    align-self: flex-start;
+    width: var(--kbq-skeleton-accordion-icon-size);
+    height: var(--kbq-skeleton-accordion-icon-size);
+    margin: var(--kbq-skeleton-accordion-icon-padding);
+}
+
+:where(.kbq-skeleton-accordion__title) {
+    flex: 1;
+    height: var(--kbq-skeleton-accordion-line-height);
+}
+
+:where(.kbq-skeleton-checkable) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kbq-skeleton-checkable-gap);
+}
+
+:where(.kbq-skeleton-checkable__row) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--kbq-skeleton-checkable-control-gap);
+}
+
+// The control sits in the middle of the line of the label, as in the component.
+:where(.kbq-skeleton-checkable__control) {
+    flex: none;
+    width: var(--kbq-skeleton-checkable-control-width);
+    height: var(--kbq-skeleton-checkable-control-height);
+    margin-top: calc(
+        (var(--kbq-skeleton-checkable-label-line-height) - var(--kbq-skeleton-checkable-control-height)) / 2
+    );
+}
+
+// As wide as the label, which gives the hint its share.
+:where(.kbq-skeleton-checkable__text) {
+    display: flex;
+    flex-direction: column;
+}
+
+:where(.kbq-skeleton-checkable__label) {
+    height: var(--kbq-skeleton-checkable-line-height);
+    margin-block: calc(
+        (var(--kbq-skeleton-checkable-label-line-height) - var(--kbq-skeleton-checkable-line-height)) / 2
+    );
+}
+
+:where(.kbq-skeleton-checkable__row:nth-child(3n + 1) .kbq-skeleton-checkable__label) {
+    width: var(--kbq-skeleton-checkable-label-width-1);
+}
+
+:where(.kbq-skeleton-checkable__row:nth-child(3n + 2) .kbq-skeleton-checkable__label) {
+    width: var(--kbq-skeleton-checkable-label-width-2);
+}
+
+:where(.kbq-skeleton-checkable__row:nth-child(3n) .kbq-skeleton-checkable__label) {
+    width: var(--kbq-skeleton-checkable-label-width-3);
+}
+
+// A line of smaller text right below the label, as kbq-hint in the component.
+:where(.kbq-skeleton-checkable__hint) {
+    width: var(--kbq-skeleton-checkable-hint-width);
+    height: var(--kbq-skeleton-checkable-hint-height);
+    margin-top: var(--kbq-skeleton-checkable-hint-gap);
+}
+
+:where(.kbq-skeleton-tabs) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kbq-skeleton-tabs-content-gap);
+    width: 100%;
+}
+
+:where(.kbq-skeleton-tabs_vertical) {
+    flex-direction: row;
+}
+
+:where(.kbq-skeleton-tabs__header) {
+    display: flex;
+    gap: var(--kbq-skeleton-tabs-gap);
+}
+
+:where(.kbq-skeleton-tabs_vertical > .kbq-skeleton-tabs__header) {
+    flex-direction: column;
+    flex: none;
+    width: var(--kbq-skeleton-tabs-vertical-width);
+}
+
+// The selected tab fills the height of a tab of .kbq-tab-group, the others are a line of text.
+:where(.kbq-skeleton-tabs__tab) {
+    display: flex;
+    align-items: center;
+    height: var(--kbq-skeleton-tabs-tab-height);
+}
+
+:where(.kbq-skeleton-tabs__tab > .kbq-skeleton) {
+    width: var(--kbq-skeleton-tabs-tab-width);
+    height: var(--kbq-skeleton-tabs-line-height);
+}
+
+:where(.kbq-skeleton-tabs__tab_selected > .kbq-skeleton) {
+    height: var(--kbq-skeleton-tabs-tab-height);
+}
+
+// A stacked tab takes the width of the list, and the text of the others keeps to the padding of the tab.
+:where(.kbq-skeleton-tabs_vertical .kbq-skeleton-tabs__tab > .kbq-skeleton) {
+    width: 100%;
+}
+
+:where(.kbq-skeleton-tabs_vertical .kbq-skeleton-tabs__tab:not(.kbq-skeleton-tabs__tab_selected)) {
+    padding-inline: var(--kbq-skeleton-tabs-tab-padding);
+}
+
+:where(.kbq-skeleton-tabs__content) {
+    min-width: 0;
+}
+
+:where(.kbq-skeleton-tabs_vertical > .kbq-skeleton-tabs__content) {
+    flex: 1;
+}
+
+:where(.kbq-skeleton-tree) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+:where(.kbq-skeleton-tree__node) {
+    display: flex;
+    align-items: center;
+    gap: var(--kbq-skeleton-tree-gap);
+    height: var(--kbq-skeleton-tree-node-height);
+    padding-inline-start: var(--kbq-skeleton-tree-padding);
+}
+
+:where(.kbq-skeleton-tree__node_nested) {
+    padding-inline-start: calc(var(--kbq-skeleton-tree-padding) + var(--kbq-skeleton-tree-indent));
+}
+
+:where(.kbq-skeleton-tree__toggle) {
+    flex: none;
+    width: var(--kbq-skeleton-tree-toggle-size);
+    height: var(--kbq-skeleton-tree-toggle-size);
+}
+
+:where(.kbq-skeleton-tree__label) {
+    height: var(--kbq-skeleton-tree-line-height);
+}
+
+:where(.kbq-skeleton-tree__node_1 > .kbq-skeleton-tree__label) {
+    width: var(--kbq-skeleton-tree-label-width-1);
+}
+
+:where(.kbq-skeleton-tree__node_2 > .kbq-skeleton-tree__label) {
+    width: var(--kbq-skeleton-tree-label-width-2);
+}
+
+:where(.kbq-skeleton-tree__node_3 > .kbq-skeleton-tree__label) {
+    width: var(--kbq-skeleton-tree-label-width-3);
+}

package/skeleton/skeleton-tokens.scss

@@ -0,0 +1,127 @@
+:where(.kbq-skeleton) {
+    --kbq-skeleton-min-height: var(--kbq-size-l);
+    --kbq-skeleton-border-radius: var(--kbq-size-xxs);
+    --kbq-skeleton-animation-duration: 1200ms;
+    --kbq-skeleton-wave-width: 100px;
+}
+
+:where(.kbq-skeleton-typography) {
+    --kbq-skeleton-typography-gap: var(--kbq-size-xxs);
+    --kbq-skeleton-typography-line-width-1: 80%;
+    --kbq-skeleton-typography-line-width-2: 100%;
+    --kbq-skeleton-typography-line-width-3: 60%;
+    --kbq-skeleton-typography-single-line-width: 50%;
+}
+
+// Rows and gaps of .kbq-dl, so the list does not move once it replaces the preset.
+:where(.kbq-skeleton-dl) {
+    --kbq-skeleton-dl-term-width: 120px;
+    --kbq-skeleton-dl-line-height: var(--kbq-size-l);
+    --kbq-skeleton-dl-row-height: var(--kbq-size-xl);
+    --kbq-skeleton-dl-column-gap: var(--kbq-size-l);
+    --kbq-skeleton-dl-row-gap: var(--kbq-size-l);
+    --kbq-skeleton-dl-line-width-1: 80%;
+    --kbq-skeleton-dl-line-width-2: 100%;
+    --kbq-skeleton-dl-line-width-3: 60%;
+}
+
+// Rows of .kbq-table: 10px of padding around a 20px line.
+:where(.kbq-skeleton-table) {
+    --kbq-skeleton-table-row-height: var(--kbq-size-4xl);
+    --kbq-skeleton-table-line-height: var(--kbq-size-l);
+    --kbq-skeleton-table-cell-padding-horizontal: var(--kbq-size-s);
+    --kbq-skeleton-table-border-width: var(--kbq-size-border-width);
+    --kbq-skeleton-table-border-color: var(--kbq-line-contrast-less);
+    --kbq-skeleton-table-selection-width: var(--kbq-size-4xl);
+    --kbq-skeleton-table-selection-size: var(--kbq-size-l);
+}
+
+// The gap of .kbq-tag-list, and that of a row of buttons.
+:where(.kbq-skeleton-group) {
+    --kbq-skeleton-group-gap: var(--kbq-size-xxs);
+}
+
+:where(.kbq-skeleton-group_button) {
+    --kbq-skeleton-group-gap: var(--kbq-size-s);
+}
+
+// Lines of .kbq-form-field: a 20px label, a 32px input or a 72px textarea with its container,
+// and a 16px hint, 6px apart.
+:where(.kbq-skeleton-form-field) {
+    --kbq-skeleton-form-field-label-width: 120px;
+    --kbq-skeleton-form-field-label-height: var(--kbq-size-xl);
+    --kbq-skeleton-form-field-line-height: var(--kbq-size-l);
+    --kbq-skeleton-form-field-control-height: var(--kbq-size-3xl);
+    --kbq-skeleton-form-field-textarea-height: 72px;
+    --kbq-skeleton-form-field-hint-width: 60%;
+    --kbq-skeleton-form-field-hint-height: var(--kbq-size-l);
+    --kbq-skeleton-form-field-gap: var(--kbq-size-xs);
+}
+
+// An item of .kbq-accordion: a 36px header inside a 2px border, with a 16px icon padded to 24px.
+:where(.kbq-skeleton-accordion) {
+    --kbq-skeleton-accordion-header-height: 36px;
+    --kbq-skeleton-accordion-border-width: 2px;
+    --kbq-skeleton-accordion-padding: var(--kbq-size-xs) var(--kbq-size-s);
+    --kbq-skeleton-accordion-icon-size: var(--kbq-size-l);
+    --kbq-skeleton-accordion-icon-padding: var(--kbq-size-xxs);
+    --kbq-skeleton-accordion-line-height: var(--kbq-size-l);
+}
+
+// A 16px control 8px away from the 20px line of the label, and the 16px line of the hint 2px below.
+:where(.kbq-skeleton-checkable) {
+    --kbq-skeleton-checkable-gap: var(--kbq-size-s);
+    --kbq-skeleton-checkable-control-gap: var(--kbq-size-s);
+    --kbq-skeleton-checkable-control-width: var(--kbq-size-l);
+    --kbq-skeleton-checkable-control-height: var(--kbq-size-l);
+    --kbq-skeleton-checkable-label-line-height: var(--kbq-size-xl);
+    --kbq-skeleton-checkable-line-height: var(--kbq-size-l);
+    --kbq-skeleton-checkable-label-width-1: 120px;
+    --kbq-skeleton-checkable-label-width-2: 140px;
+    --kbq-skeleton-checkable-label-width-3: 80px;
+    --kbq-skeleton-checkable-hint-width: 60%;
+    --kbq-skeleton-checkable-hint-height: var(--kbq-size-l);
+    --kbq-skeleton-checkable-hint-gap: var(--kbq-size-3xs);
+}
+
+:where(.kbq-skeleton-checkable_toggle) {
+    --kbq-skeleton-checkable-control-width: 28px;
+}
+
+// Tabs of .kbq-tab-group: 32px tabs 8px apart, the selected one filled.
+:where(.kbq-skeleton-tabs) {
+    --kbq-skeleton-tabs-tab-height: var(--kbq-size-3xl);
+    --kbq-skeleton-tabs-tab-width: var(--kbq-size-6xl);
+    --kbq-skeleton-tabs-tab-padding: var(--kbq-size-m);
+    --kbq-skeleton-tabs-line-height: var(--kbq-size-l);
+    --kbq-skeleton-tabs-gap: var(--kbq-size-s);
+    --kbq-skeleton-tabs-content-gap: var(--kbq-size-s);
+    --kbq-skeleton-tabs-vertical-width: 160px;
+}
+
+// Nodes of .kbq-tree-selection indented by kbqTreeNodePadding with its default: 32px rows with a 16px toggle 12px in,
+// and 14px further for a child.
+:where(.kbq-skeleton-tree) {
+    --kbq-skeleton-tree-node-height: var(--kbq-size-3xl);
+    --kbq-skeleton-tree-padding: var(--kbq-size-m);
+    --kbq-skeleton-tree-indent: 14px;
+    --kbq-skeleton-tree-gap: var(--kbq-size-s);
+    --kbq-skeleton-tree-toggle-size: var(--kbq-size-l);
+    --kbq-skeleton-tree-line-height: var(--kbq-size-l);
+    --kbq-skeleton-tree-label-width-1: 120px;
+    --kbq-skeleton-tree-label-width-2: 100px;
+    --kbq-skeleton-tree-label-width-3: 80px;
+}
+
+// The filter paints the host as a flat black shape; only the alpha of `fill` and of the wave colors is used,
+// as mask layers that thin that shape out. Declared on the theme and inherited, like the wave colors, so that the
+// nearest theme wins: a `.kbq-dark .kbq-skeleton` rule would also match inside a light section of a dark page.
+:where(:root, .kbq-light) {
+    --kbq-skeleton-filter: contrast(0) brightness(0);
+    --kbq-skeleton-fill: var(--kbq-semantic-contrast-a1);
+}
+
+:where(.kbq-dark) {
+    --kbq-skeleton-filter: contrast(0) brightness(0) invert(1);
+    --kbq-skeleton-fill: var(--kbq-semantic-dark-contrast-a2);
+}

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 {