@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.11

package/datepicker/calendar-body.scss

@@ -6,13 +6,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-$kbq-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-size-cell-margin) * 2;
-
-.kbq-calendar__body {
-    min-width: calc(
-        7 * var(--kbq-datepicker-body-size-cell-min-size, map.get($tokens, datepicker-body-size-cell-min-size))
-    );
-}
 
 .kbq-calendar__body-cell {
     position: relative;
@@ -21,41 +14,33 @@ $kbq-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-si
     text-align: center;
     outline: none;
     cursor: pointer;
+
+    padding: 0;
 }
 
-.kbq-calendar__body_disabled {
+.kbq-disabled {
     cursor: default;
 }
 
 .kbq-calendar__body-cell-content {
-    position: absolute;
-    top: var(--kbq-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
-    left: var(--kbq-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
-
-    padding: var(--kbq-datepicker-body-size-cell-padding, map.get($tokens, datepicker-body-size-cell-padding));
-
     display: flex;
     align-items: center;
     justify-content: center;
 
     box-sizing: border-box;
-    width: $kbq-calendar-body-cell-content-size;
-    height: $kbq-calendar-body-cell-content-size;
+    height: 32px;
 
     // Prevents text being off-center on Android.
     line-height: 1;
 
-    border-width: var(
-        --kbq-datepicker-body-size-cell-border-width, map.get($tokens, datepicker-body-size-cell-border-width)
-    );
     border-radius: var(
-        --kbq-datepicker-body-size-cell-border-radius, map.get($tokens, datepicker-body-size-cell-border-radius)
+        --kbq-datepicker-size-grid-cell-border-radius,
+        map.get($tokens, datepicker-size-grid-cell-border-radius)
     );
-    border-style: solid;
-}
 
-kbq-month-view {
-    .kbq-calendar__body-cell-content {
-        justify-content: flex-end;
-    }
+    margin-bottom: var(
+        --kbq-datepicker-size-grid-content-gap-vertical,
+        map.get($tokens, datepicker-size-grid-content-gap-vertical)
+    );
 }
+

package/datepicker/calendar-header.component.d.ts

@@ -9,8 +9,14 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
         value: number;
     }[];
     selectedMonth: number;
-    years: number[];
-    selectedYear: number;
+    years: {
+        name: number;
+        value: string;
+    }[];
+    selectedYear: {
+        name: number;
+        value: string;
+    };
     get activeDate(): D;
     set activeDate(value: D);
     private _activeDate;
@@ -41,5 +47,5 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
     private updateSelectedValues;
     private updateYearsArray;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendarHeader<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["mcCalendarHeader"], { "activeDate": { "alias": "activeDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["kbqCalendarHeader"], { "activeDate": { "alias": "activeDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false, never>;
 }

package/datepicker/calendar-header.scss

@@ -11,40 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
     justify-content: space-between;
 
-    padding:
-        var(--kbq-datepicker-calendar-size-padding-top, map.get($tokens, datepicker-calendar-size-padding-top))
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(--kbq-datepicker-calendar-size-padding-blocks, map.get($tokens, datepicker-calendar-size-padding-blocks))
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        );
-}
-
-.kbq-calendar-header__previous-button::after {
-    border-left-width: var(
-        --kbq-datepicker-calendar-size-icon-border-width,
-        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    padding-right: var(
+        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
     );
 
-    transform: var(
-        --kbq-datepicker-calendar-size-icon-prev-icon-transform,
-        map.get($tokens, datepicker-calendar-size-icon-prev-icon-transform)
-    );
-}
-
-.kbq-calendar-header__next-button::after {
-    border-right-width: var(
-        --kbq-datepicker-calendar-size-icon-border-width,
-        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    padding-left: var(
+        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
     );
 
-    transform: var(
-        --kbq-datepicker-calendar-size-icon-nex-icon-transform,
-        map.get($tokens, datepicker-calendar-size-icon-nex-icon-transform)
+    margin-bottom: var(
+        --kbq-datepicker-size-header-margin-bottom, map.get($tokens, datepicker-size-header-margin-bottom)
     );
 }
 
@@ -66,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-select__content {
         max-height: 12 * 32px;
         overflow-x: hidden;
-        scrollbar-gutter: stable;
+        scrollbar-gutter: auto;
 
         .kbq-option {
             min-width: 65px;

package/datepicker/calendar.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { DateAdapter, KbqDateFormats } from '@koobiq/components/core';
+import { DateAdapter } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqCalendarCellCssClasses } from './calendar-body.component';
 import { KbqDatepickerIntl } from './datepicker-intl';
@@ -11,7 +11,6 @@ import * as i0 from "@angular/core";
  */
 export declare class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
     private readonly adapter;
-    private readonly dateFormats;
     private changeDetectorRef;
     /** A date representing the period (month or year) to start the calendar in. */
     get startAt(): D | null;
@@ -61,7 +60,7 @@ export declare class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnCh
      */
     stateChanges: Subject<void>;
     private readonly intlChanges;
-    constructor(intl: KbqDatepickerIntl, adapter: DateAdapter<D>, dateFormats: KbqDateFormats, changeDetectorRef: ChangeDetectorRef);
+    constructor(intl: KbqDatepickerIntl, adapter: DateAdapter<D>, changeDetectorRef: ChangeDetectorRef);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -76,6 +75,6 @@ export declare class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnCh
      */
     private getValidDateOrNull;
     private getActiveDateDefault;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendar<any>, "kbq-calendar", ["mcCalendar"], { "startAt": { "alias": "startAt"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "userSelection": "userSelection"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendar<any>, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendar<any>, "kbq-calendar", ["kbqCalendar"], { "startAt": { "alias": "startAt"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "userSelection": "userSelection"; }, never, never, false, never>;
 }

package/datepicker/calendar.scss

@@ -11,20 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-calendar__content {
-    padding:
-        0
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        );
+    padding-right: var(
+        --kbq-datepicker-size-grid-padding-horizontal,
+        map.get($tokens, datepicker-size-grid-padding-horizontal)
+    );
+
+    padding-left: var(
+        --kbq-datepicker-size-grid-padding-horizontal,
+        map.get($tokens, datepicker-size-grid-padding-horizontal)
+    );
+
     outline: none;
 }
 
@@ -40,15 +36,14 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-calendar__table-header-divider {
         position: relative;
-        height: calc(
-            var(
-                --kbq-datepicker-calendar-size-padding-blocks,
-                #{map.get($tokens, datepicker-calendar-size-padding-blocks)}
-            ) - 2px
-        );
 
-        $horizontal-padding: map.get($tokens, datepicker-calendar-size-padding-horizontal);
+        box-sizing: border-box;
+        height: var(
+            --kbq-datepicker-size-grid-content-gap-vertical,
+            map.get($tokens, datepicker-size-grid-content-gap-vertical)
+        );;
 
+        $horizontal-padding: map.get($tokens, datepicker-size-grid-padding-horizontal);
         // We use an absolutely positioned pseudo-element as the divider line for the table header so we
         // can extend it all the way to the edge of the calendar.
         &::after {
@@ -56,12 +51,12 @@ $tokens: meta.module-variables(tokens) !default;
 
             position: absolute;
             top: 0;
-            left: calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
-            right: calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
+            left: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
+            right: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
 
             height: var(
-                --kbq-datepicker-calendar-size-divider-width,
-                map.get($tokens, datepicker-calendar-size-divider-width)
+                --kbq-datepicker-size-grid-divider-height,
+                map.get($tokens, datepicker-size-grid-divider-height)
             );
         }
     }

package/datepicker/datepicker-animations.d.ts

@@ -1,9 +1,9 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 /**
- * Animations used by the mosaic datepicker.
+ * Animations used by the Koobiq datepicker.
  * @docs-private
  */
-export declare const mcDatepickerAnimations: {
+export declare const kbqDatepickerAnimations: {
     readonly transformPanel: AnimationTriggerMetadata;
     readonly fadeInCalendar: AnimationTriggerMetadata;
 };

package/datepicker/datepicker-content.scss

@@ -7,27 +7,34 @@
 $tokens: meta.module-variables(tokens) !default;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;
+
 $kbq-datepicker-non-touch-calendar-width:
     $kbq-datepicker-non-touch-calendar-cell-size * 7 +
-    map.get($tokens, datepicker-calendar-size-padding-horizontal) * 2;
+    map.get($tokens, datepicker-size-grid-padding-horizontal) * 2;
 // Based on the natural height of the calendar in a month with 6 rows of dates
 // (largest the calendar will get).
-$kbq-datepicker-non-touch-calendar-height: 348px;
+$kbq-datepicker-non-touch-calendar-height: 270px;
 
 .kbq-datepicker__content {
     display: block;
 
-    border: {
-        width: 1px;
-        style: solid;
-        radius: var(
-            --kbq-datepicker-calendar-size-border-radius,
-            map.get($tokens, datepicker-calendar-size-border-radius)
-        );
-    }
+    border-radius: var(
+        --kbq-datepicker-size-container-border-radius,
+        map.get($tokens, datepicker-size-container-border-radius)
+    );
 
     .kbq-calendar {
         width: $kbq-datepicker-non-touch-calendar-width;
         height: $kbq-datepicker-non-touch-calendar-height;
+
+        padding-top: var(
+            --kbq-datepicker-size-container-padding-vertical,
+            map.get($tokens, datepicker-size-container-padding-vertical)
+        );
+
+        padding-bottom: var(
+            --kbq-datepicker-size-container-padding-vertical,
+            map.get($tokens, datepicker-size-container-padding-vertical)
+        );
     }
 }

package/datepicker/datepicker-input.directive.d.ts

@@ -53,9 +53,9 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     set required(value: boolean);
     private _required;
     /** The datepicker that this input is associated with. */
-    set mcDatepicker(value: KbqDatepicker<D>);
+    set kbqDatepicker(value: KbqDatepicker<D>);
     /** Function that can be used to filter out dates within the datepicker. */
-    set mcDatepickerFilter(value: (date: D | null) => boolean);
+    set kbqDatepickerFilter(value: (date: D | null) => boolean);
     /** The value of the input. */
     get value(): D | null;
     set value(value: D | null);
@@ -75,7 +75,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     get id(): string;
     set id(value: string);
     private _id;
-    set mcValidationTooltip(tooltip: KbqWarningTooltipTrigger);
+    set kbqValidationTooltip(tooltip: KbqWarningTooltipTrigger);
     incorrectInput: EventEmitter<void>;
     /** Emits when a `change` event is fired on this `<input>`. */
     readonly dateChange: EventEmitter<KbqDatepickerInputEvent<D>>;
@@ -176,5 +176,5 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     private createDateTime;
     private correctCursorPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerInput<any>, [null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerInput<any>, "input[mcDatepicker]", ["mcDatepickerInput"], { "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mcDatepicker": { "alias": "mcDatepicker"; "required": false; }; "mcDatepickerFilter": { "alias": "mcDatepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "mcValidationTooltip": { "alias": "mcValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerInput<any>, "input[kbqDatepicker]", ["kbqDatepickerInput"], { "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "kbqDatepicker": { "alias": "kbqDatepicker"; "required": false; }; "kbqDatepickerFilter": { "alias": "kbqDatepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
 }

package/datepicker/datepicker-input.scss

@@ -11,5 +11,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-datepicker {
-    width: var(--kbq-datepicker-input-size-width, map.get($tokens, datepicker-input-size-width));
+    width: 130px;
 }

package/datepicker/datepicker-toggle.component.d.ts

@@ -3,10 +3,10 @@ import { KbqButton } from '@koobiq/components/button';
 import { KbqDatepickerIntl } from './datepicker-intl';
 import { KbqDatepicker } from './datepicker.component';
 import * as i0 from "@angular/core";
-/** Can be used to override the icon of a `mcDatepickerToggle`. */
+/** Can be used to override the icon of a `kbqDatepickerToggle`. */
 export declare class KbqDatepickerToggleIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerToggleIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerToggleIcon, "[kbqDatepickerToggleIcon]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     intl: KbqDatepickerIntl;
@@ -31,5 +31,5 @@ export declare class KbqDatepickerToggle<D> implements AfterContentInit, OnChang
     open(event: Event): void;
     private watchStateChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerToggle<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerToggle<any>, "kbq-datepicker-toggle", ["mcDatepickerToggle"], { "disabled": { "alias": "disabled"; "required": false; }; "datepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["customIcon"], ["[mcDatepickerToggleIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerToggle<any>, "kbq-datepicker-toggle", ["kbqDatepickerToggle"], { "disabled": { "alias": "disabled"; "required": false; }; "datepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["customIcon"], ["[kbqDatepickerToggleIcon]"], false, never>;
 }

package/datepicker/datepicker.component.d.ts

@@ -40,7 +40,7 @@ export declare class KbqDatepickerContent<D> implements OnDestroy {
     ngOnDestroy(): void;
     startExitAnimation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerContent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerContent<any>, "kbq-datepicker__content", ["mcDatepickerContent"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerContent<any>, "kbq-datepicker__content", ["kbqDatepickerContent"], {}, {}, never, never, false, never>;
 }
 /** Component responsible for managing the datepicker popup/dialog. */
 export declare class KbqDatepicker<D> implements OnDestroy {
@@ -144,5 +144,5 @@ export declare class KbqDatepicker<D> implements OnDestroy {
     /** Create the popup PositionStrategy. */
     private createPopupPositionStrategy;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepicker<any>, "kbq-datepicker", ["mcDatepicker"], { "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepicker<any>, "kbq-datepicker", ["kbqDatepicker"], { "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
 }

package/datepicker/month-view.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { DateAdapter, KbqDateFormats } from '@koobiq/components/core';
+import { DateAdapter } from '@koobiq/components/core';
 import { KbqCalendarBody, KbqCalendarCell, KbqCalendarCellCssClasses } from './calendar-body.component';
 import * as i0 from "@angular/core";
 /**
@@ -8,7 +8,6 @@ import * as i0 from "@angular/core";
  */
 export declare class KbqMonthView<D> implements AfterContentInit {
     private changeDetectorRef;
-    private readonly dateFormats;
     adapter: DateAdapter<D>;
     /**
      * The date to display in this month view (everything other than the month and year is ignored).
@@ -35,7 +34,7 @@ export declare class KbqMonthView<D> implements AfterContentInit {
     /** Emits when any date is activated. */
     readonly activeDateChange: EventEmitter<D>;
     /** The body of calendar table */
-    mcCalendarBody: KbqCalendarBody;
+    kbqCalendarBody: KbqCalendarBody;
     /** Grid of calendar cells representing the dates of the month. */
     weeks: KbqCalendarCell[][];
     /** The number of blank cells in the first row before the 1st of the month. */
@@ -52,7 +51,7 @@ export declare class KbqMonthView<D> implements AfterContentInit {
         long: string;
         narrow: string;
     }[];
-    constructor(changeDetectorRef: ChangeDetectorRef, dateFormats: KbqDateFormats, adapter: DateAdapter<D>);
+    constructor(changeDetectorRef: ChangeDetectorRef, adapter: DateAdapter<D>);
     ngAfterContentInit(): void;
     /** Handles when a new date is selected. */
     dateSelected(date: number): void;
@@ -69,6 +68,6 @@ export declare class KbqMonthView<D> implements AfterContentInit {
     private getDateInCurrentMonth;
     /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
     private hasSameMonthAndYear;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMonthView<any>, [null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMonthView<any>, "kbq-month-view", ["mcMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMonthView<any>, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMonthView<any>, "kbq-month-view", ["kbqMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
 }

package/dl/_dl-theme.scss

@@ -21,65 +21,11 @@
 
     .kbq-dl {
         & .kbq-dt {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-horizontal-dt)
-            );
+            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-term));
         }
 
         & .kbq-dd {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-horizontal-dd)
-            );
-        }
-
-        &.kbq-dl_small {
-            & .kbq-dt {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-horizontal-dt)
-                );
-            }
-
-            & .kbq-dd {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-horizontal-dd)
-                );
-            }
-        }
-    }
-
-    .kbq-dl.kbq-dl_vertical {
-        & .kbq-dt {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-vertical-dt)
-            );
-        }
-
-        & .kbq-dd {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-vertical-dd)
-            );
-        }
-
-        &.kbq-dl_small {
-            & .kbq-dt {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-vertical-dt)
-                );
-            }
-
-            & .kbq-dd {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-vertical-dd)
-                );
-            }
+            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-description));
         }
     }
 }

package/dl/dl.component.d.ts

@@ -5,7 +5,6 @@ export declare class KbqDlComponent implements AfterContentInit, OnDestroy {
     protected elementRef: ElementRef;
     minWidth: number;
     wide: boolean;
-    small: boolean;
     vertical: boolean | null;
     readonly resizeStream: Subject<Event>;
     private readonly resizeDebounceInterval;
@@ -15,7 +14,7 @@ export declare class KbqDlComponent implements AfterContentInit, OnDestroy {
     ngOnDestroy(): void;
     updateState: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDlComponent, "kbq-dl", never, { "minWidth": { "alias": "minWidth"; "required": false; }; "wide": { "alias": "wide"; "required": false; }; "small": { "alias": "small"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDlComponent, "kbq-dl", never, { "minWidth": { "alias": "minWidth"; "required": false; }; "wide": { "alias": "wide"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare class KbqDtComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDtComponent, never>;

package/dl/dl.scss

@@ -9,37 +9,22 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-dl {
     display: grid;
     column-gap: var(
-        --kbq-description-list-size-default-horizontal-column-gap,
-        map.get($tokens, description-list-size-default-horizontal-column-gap)
+        --kbq-description-list-size-horizontal-content-gap-horizontal,
+        map.get($tokens, description-list-size-horizontal-content-gap-horizontal)
     );
     row-gap: var(
-        --kbq-description-list-size-default-horizontal-row-gap,
-        map.get($tokens, description-list-size-default-horizontal-row-gap)
+        --kbq-description-list-size-horizontal-gap-vertical,
+        map.get($tokens, description-list-size-horizontal-gap-vertical)
     );
 
     grid-template-columns: repeat(4, 1fr);
 
     .kbq-dt {
-        grid-column: var(
-            --kbq-description-list-size-dt-grid-column, map.get($tokens, description-list-size-dt-grid-column)
-        );
+        grid-column: 1;
     }
 
     .kbq-dd {
-        grid-column: var(
-            --kbq-description-list-size-dd-grid-column, map.get($tokens, description-list-size-dd-grid-column)
-        );
-    }
-
-    &.kbq-dl_small {
-        column-gap: var(
-            --kbq-description-list-size-small-horizontal-column-gap,
-            map.get($tokens, description-list-size-small-horizontal-column-gap)
-        );
-        row-gap: var(
-            --kbq-description-list-size-small-horizontal-row-gap,
-            map.get($tokens, description-list-size-small-horizontal-row-gap)
-        );
+        grid-column: 2 / span 3;
     }
 
     &.kbq-dl_wide {
@@ -57,13 +42,9 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-dl_vertical {
         grid-template-columns: repeat(1, 1fr);
 
-        column-gap: var(
-            --kbq-description-list-size-default-vertical-column-gap,
-            map.get($tokens, description-list-size-default-vertical-column-gap)
-        );
         row-gap: var(
-            --kbq-description-list-size-default-vertical-row-gap,
-            map.get($tokens, description-list-size-default-vertical-row-gap)
+            --kbq-description-list-size-vertical-content-gap-vertical,
+            map.get($tokens, description-list-size-vertical-content-gap-vertical)
         );
 
         .kbq-dt,
@@ -73,27 +54,9 @@ $tokens: meta.module-variables(tokens) !default;
 
         .kbq-dd {
             margin-bottom: var(
-                --kbq-description-list-size-default-vertical-dd-margin-bottom,
-                map.get($tokens, description-list-size-default-vertical-dd-margin-bottom)
-            );
-        }
-
-        &.kbq-dl_small {
-            column-gap: var(
-                --kbq-description-list-size-small-vertical-column-gap,
-                map.get($tokens, description-list-size-small-vertical-column-gap)
-            );
-            row-gap: var(
-                --kbq-description-list-size-small-vertical-row-gap,
-                map.get($tokens, description-list-size-small-vertical-row-gap)
+                --kbq-description-list-size-vertical-gap-vertical,
+                map.get($tokens, description-list-size-vertical-gap-vertical)
             );
-
-            .kbq-dd {
-                margin-bottom: var(
-                    --kbq-description-list-size-small-vertical-dd-margin-bottom,
-                    map.get($tokens, description-list-size-small-vertical-dd-margin-bottom)
-                );
-            }
         }
     }
 }