@koobiq/components 20.0.0 → 20.1.0

package/accordion/accordion-trigger.component.scss

@@ -3,10 +3,6 @@
     flex-direction: row;
     align-items: center;
 
-    background: transparent;
-    border: none;
-    outline: none;
-
     & .kbq-accordion-trigger__icon {
         box-sizing: initial;
 
@@ -28,14 +24,6 @@
         margin-bottom: calc(-1 * #{var(--kbq-size-3xs)});
     }
 
-    &:hover:not([data-disabled='true']) {
-        cursor: pointer;
-
-        & .kbq-accordion-trigger__icon {
-            color: var(--kbq-accordion-item-states-hover-icon-color);
-        }
-    }
-
     &.kbq-accordion-trigger_fill {
         padding: var(--kbq-accordion-size-item-header-variant-fill-padding);
 
@@ -65,12 +53,6 @@
             transform: rotate(-180deg);
         }
     }
-
-    &[data-disabled='true'] {
-        & .kbq-accordion-trigger__icon {
-            color: var(--kbq-accordion-item-states-disabled-icon-color) !important;
-        }
-    }
 }
 
 button.kbq-accordion-trigger {

package/accordion/accordion.component.scss

@@ -29,14 +29,21 @@
     }
 
     &[data-state='open'] {
-        transition: 300ms ease-out;
+        transition: height 300ms ease-out;
         height: var(--radix-accordion-content-height);
     }
 
     &[data-state='closed'] {
-        transition: 300ms ease-out;
+        transition: height 300ms ease-out;
         height: 0;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+        &[data-state='open'],
+        &[data-state='closed'] {
+            transition: none;
+        }
+    }
 }
 
 @include kbq-accordion-theme();

package/actions-panel/index.d.ts

@@ -289,6 +289,7 @@ declare class KbqActionsPanel implements OnDestroy {
     /** Closes the currently opened actions panel. */
     close<R>(result?: R): void;
     private openDialog;
+    private syncOverlayMaxWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionsPanel, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqActionsPanel>;
 }

package/alert/_alert-theme.scss

@@ -13,10 +13,6 @@
 }
 
 @mixin kbq-alert-theme() {
-    .kbq-alert__close:focus {
-        outline: none;
-    }
-
     .kbq-alert.kbq-alert_default {
         &.kbq-alert_error {
             @include kbq-alert-style(default, error);

package/alert/alert-tokens.scss

@@ -40,16 +40,16 @@
     --kbq-alert-size-compact-no-title-icon-margin-top: var(--kbq-size-m);
     --kbq-alert-size-compact-no-title-icon-padding-top: var(--kbq-size-3xs);
     /* THEME TOKENS */
-    --kbq-alert-default-error-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-error-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-error-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-error-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-default-warning-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-warning-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-warning-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-warning-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-default-success-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-success-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-success-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-success-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-default-info-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-info-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-info-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-info-container-text: var(--kbq-foreground-contrast);
     --kbq-alert-colored-error-container-background: var(--kbq-background-error-less);

package/app-switcher/app-switcher-dropdown-app.scss

@@ -9,6 +9,8 @@
     min-height: 50px;
 
     border-radius: var(--kbq-size-xs);
+    // base transparent border so the .cdk-keyboard-focused border-color renders a focus ring (matches list-item-base)
+    border: var(--kbq-size-3xs) solid transparent;
 
     @include common.user-select(none);
 

package/breadcrumbs/breadcrumbs.scss

@@ -73,6 +73,10 @@
             --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
         }
 
+        &.kbq-dropdown-trigger {
+            --kbq-dropdown-trigger-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+        }
+
         &:focus-visible {
             outline-offset: unset;
         }

package/breadcrumbs/index.d.ts

@@ -211,6 +211,7 @@ declare class KbqBreadcrumbs {
     protected readonly separator?: TemplateRef<any>;
     protected readonly items: _angular_core.Signal<readonly KbqBreadcrumbItem[]>;
     private readonly breadcrumbsResult;
+    private readonly resultDropdownTrigger;
     private readonly result;
     private readonly overflowItems;
     private readonly overflowItemsDir;
@@ -230,7 +231,7 @@ declare class KbqBreadcrumbs {
     constructor();
     private enforceMaxVisible;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapMode": { "alias": "wrapMode"; "required": false; "isSignal": true; }; }, {}, ["items", "separator"], ["*"], true, [{ directive: typeof RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapMode": { "alias": "wrapMode"; "required": false; "isSignal": true; }; }, {}, ["items", "separator"], never, true, [{ directive: typeof RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class KbqBreadcrumbsModule {

package/button/button-group.scss

@@ -3,15 +3,55 @@
 .kbq-button-group {
     &.kbq-button-group_horizontal {
         @include groups-mixins.group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-right-color: transparent;
+        }
     }
 
     &.kbq-button-group_vertical {
         @include groups-mixins.vertical-group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-bottom-color: transparent;
+        }
     }
 
     &:not(:has(> :not(.kbq-contrast-fade.kbq-button_filled))),
     &:not(:has(> :not(.kbq-contrast.kbq-button_filled))) {
-        // @TODO tech debt (#DS-4847)
-        gap: var(--kbq-size-3xs);
+        :is(.kbq-button, .kbq-button-icon) {
+            background-clip: padding-box !important;
+        }
+    }
+
+    &.kbq-contrast-fade.kbq-button-group-root_filled {
+        // internal css variable, so don't prefixed with kbq
+        --button-group-divider-color: var(--kbq-line-contrast-fade);
+
+        &.kbq-button-group_horizontal {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                // offset by -1px because absolute positioning is relative to the padding edge,
+                // but the visual junction sits 1px to the left in the transparent border area
+                left: calc(-1 * var(--kbq-size-border-width));
+                top: 0;
+                bottom: 0;
+                width: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
+
+        &.kbq-button-group_vertical {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                top: calc(-1 * var(--kbq-size-border-width));
+                left: 0;
+                right: 0;
+                height: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
     }
 }

package/button-toggle/button-toggle.scss

@@ -54,6 +54,7 @@
 
             .kbq-button-toggle-wrapper {
                 display: inline-flex;
+                justify-content: center;
 
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -81,6 +82,28 @@
             }
         }
     }
+
+    &.kbq-button-toggle-group_stretched {
+        width: 100%;
+
+        .kbq-button-toggle {
+            flex: 1;
+
+            > .kbq-button,
+            > .kbq-button-icon {
+                width: 100%;
+                flex: 1;
+
+                .kbq-button-wrapper {
+                    justify-content: center;
+                }
+
+                .kbq-button-toggle-wrapper {
+                    display: block;
+                }
+            }
+        }
+    }
 }
 
 .kbq-button-toggle_vertical {

package/button-toggle/index.d.ts

@@ -32,6 +32,8 @@ declare class KbqButtonToggleGroup implements ControlValueAccessor, OnInit, Afte
     /** Whether the toggle group is vertical. */
     get vertical(): boolean;
     set vertical(value: boolean);
+    /** Whether the toggle group stretches to fill its container width, with toggles sharing equal space. */
+    readonly stretched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Value of the toggle group. */
     get value(): any;
     set value(newValue: any);
@@ -101,7 +103,7 @@ declare class KbqButtonToggleGroup implements ControlValueAccessor, OnInit, Afte
     /** Selects a value if there's a toggle that corresponds to it. */
     private selectValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqButtonToggleGroup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "stretched": { "alias": "stretched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, true, never>;
 }
 /** Single button inside of a toggle group. */
 declare class KbqButtonToggle implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {

package/checkbox/checkbox.scss

@@ -32,9 +32,7 @@
 
     max-width: calc(100% - var(--padding));
 
-    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the kbq-checkbox
-    // (e.g. pointer by default, regular when disabled), instead of the browser default.
-    cursor: inherit;
+    cursor: pointer;
 
     padding-top: var(--kbq-checkbox-size-normal-padding-top);
 
@@ -56,7 +54,6 @@
 .kbq-checkbox {
     display: inline-block;
 
-    cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
     max-width: 100%;
@@ -89,6 +86,10 @@
     &.kbq-disabled {
         cursor: default;
 
+        .kbq-checkbox__layout {
+            cursor: default;
+        }
+
         .kbq-checkbox__frame {
             box-shadow: none;
         }

package/clamped-text/index.d.ts

@@ -109,6 +109,7 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
     private readonly destroyRef;
     private readonly elementRef;
     private readonly resizeObserver;
+    private readonly platform;
     /**
      * Clamped text locale configuration.
      * @docs-private