@ptsecurity/mosaic 13.10.0 → 14.1.0

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

@@ -1,7 +1,6 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormGroupDirective, NgForm, ValidationErrors, Validator } from '@angular/forms';
+import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
-import { McValidationOptions } from '@ptsecurity/mosaic/core';
 import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
 import { McWarningTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
 import { Subject } from 'rxjs';
@@ -33,11 +32,7 @@ export declare class McDatepickerInputEvent<D> {
 /** Directive used to connect an input to a McDatepicker. */
 export declare class McDatepickerInput<D> implements McFormFieldControl<D>, ControlValueAccessor, Validator, OnDestroy {
     elementRef: ElementRef<HTMLInputElement>;
-    private changeDetectorRef;
     private readonly renderer;
-    private mcValidation;
-    parentForm: NgForm;
-    parentFormGroup: FormGroupDirective;
     readonly dateAdapter: DateAdapter<D>;
     private readonly dateFormats;
     readonly stateChanges: Subject<void>;
@@ -104,7 +99,7 @@ export declare class McDatepickerInput<D> implements McFormFieldControl<D>, Cont
     private secondDigit;
     private thirdDigit;
     private separatorPositions;
-    constructor(elementRef: ElementRef<HTMLInputElement>, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, mcValidation: McValidationOptions, parentForm: NgForm, parentFormGroup: FormGroupDirective, dateAdapter: DateAdapter<D>, dateFormats: McDateFormats);
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, dateAdapter: DateAdapter<D>, dateFormats: McDateFormats);
     onContainerClick(): void;
     focus(): void;
     focusChanged(isFocused: boolean): void;
@@ -120,7 +115,7 @@ export declare class McDatepickerInput<D> implements McFormFieldControl<D>, Cont
     setDisabledState(isDisabled: boolean): void;
     onKeyDown(event: KeyboardEvent): void;
     onInput: () => void;
-    parseOnBlur: () => number | null | undefined;
+    parseOnBlur: () => any;
     onChange(): void;
     /** Handles blur events on the input. */
     onBlur(): void;
@@ -173,6 +168,6 @@ export declare class McDatepickerInput<D> implements McFormFieldControl<D>, Cont
     private getDigitPositions;
     private createDate;
     private correctCursorPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerInput<any>, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerInput<any>, "input[mcDatepicker]", ["mcDatepickerInput"], { "placeholder": "placeholder"; "required": "required"; "mcDatepicker": "mcDatepicker"; "mcDatepickerFilter": "mcDatepickerFilter"; "value": "value"; "min": "min"; "max": "max"; "disabled": "disabled"; "id": "id"; "mcValidationTooltip": "mcValidationTooltip"; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerInput<any>, [null, null, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerInput<any>, "input[mcDatepicker]", ["mcDatepickerInput"], { "placeholder": "placeholder"; "required": "required"; "mcDatepicker": "mcDatepicker"; "mcDatepickerFilter": "mcDatepickerFilter"; "value": "value"; "min": "min"; "max": "max"; "disabled": "disabled"; "id": "id"; "mcValidationTooltip": "mcValidationTooltip"; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false>;
 }

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

@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
 /** Can be used to override the icon of a `mcDatepickerToggle`. */
 export declare class McDatepickerToggleIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerToggleIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never, never, false>;
 }
 export declare class McDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     intl: McDatepickerIntl;
@@ -31,5 +31,5 @@ export declare class McDatepickerToggle<D> implements AfterContentInit, OnChange
     open(event: Event): void;
     private watchStateChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerToggle<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerToggle<any>, "mc-datepicker-toggle", ["mcDatepickerToggle"], { "disabled": "disabled"; "datepicker": "for"; "tabIndex": "tabIndex"; }, {}, ["customIcon"], ["[mcDatepickerToggleIcon]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerToggle<any>, "mc-datepicker-toggle", ["mcDatepickerToggle"], { "disabled": "disabled"; "datepicker": "for"; "tabIndex": "tabIndex"; }, {}, ["customIcon"], ["[mcDatepickerToggleIcon]"], false>;
 }

package/datepicker/datepicker.component.d.ts

@@ -41,7 +41,7 @@ export declare class McDatepickerContent<D> implements OnDestroy {
     ngOnDestroy(): void;
     startExitAnimation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerContent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerContent<any>, "mc-datepicker__content", ["mcDatepickerContent"], {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerContent<any>, "mc-datepicker__content", ["mcDatepickerContent"], {}, {}, never, never, false>;
 }
 /** Component responsible for managing the datepicker popup/dialog. */
 export declare class McDatepicker<D> implements OnDestroy {
@@ -154,5 +154,5 @@ export declare class McDatepicker<D> implements OnDestroy {
      */
     private getValidDateOrNull;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepicker<any>, "mc-datepicker", ["mcDatepicker"], { "hasBackdrop": "hasBackdrop"; "startAt": "startAt"; "disabled": "disabled"; "opened": "opened"; "minDate": "minDate"; "maxDate": "maxDate"; "calendarHeaderComponent": "calendarHeaderComponent"; "startView": "startView"; "panelClass": "panelClass"; "dateClass": "dateClass"; "backdropClass": "backdropClass"; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepicker<any>, "mc-datepicker", ["mcDatepicker"], { "hasBackdrop": "hasBackdrop"; "startAt": "startAt"; "disabled": "disabled"; "opened": "opened"; "minDate": "minDate"; "maxDate": "maxDate"; "calendarHeaderComponent": "calendarHeaderComponent"; "startView": "startView"; "panelClass": "panelClass"; "dateClass": "dateClass"; "backdropClass": "backdropClass"; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false>;
 }

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

@@ -89,5 +89,5 @@ export declare class McMonthView<D> implements AfterContentInit {
     /** Determines whether the user has the RTL layout direction. */
     private isRtl;
     static ɵfac: i0.ɵɵFactoryDeclaration<McMonthView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McMonthView<any>, "mc-month-view", ["mcMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McMonthView<any>, "mc-month-view", ["mcMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false>;
 }

package/datepicker/multi-year-view.component.d.ts

@@ -68,5 +68,5 @@ export declare class McMultiYearView<D> implements AfterContentInit {
     /** Determines whether the user has the RTL layout direction. */
     private isRtl;
     static ɵfac: i0.ɵɵFactoryDeclaration<McMultiYearView<any>, [null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McMultiYearView<any>, "mc-multi-year-view", ["mcMultiYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McMultiYearView<any>, "mc-multi-year-view", ["mcMultiYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never, false>;
 }

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

@@ -86,5 +86,5 @@ export declare class McYearView<D> implements AfterContentInit {
     /** Determines whether the user has the RTL layout direction. */
     private isRtl;
     static ɵfac: i0.ɵɵFactoryDeclaration<McYearView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McYearView<any>, "mc-year-view", ["mcYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McYearView<any>, "mc-year-view", ["mcYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never, false>;
 }

package/design-tokens/legacy-2017/tokens/components/badge.json5

@@ -4,42 +4,42 @@
             solid: {
                 primary: {
                     background: { value: '{light-color-scheme.primary.palette.value.500}' },
-                    color: { value: 'white' },
                     border: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    color: { value: 'white' }
                 },
                 info: {
-                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
                     background: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 success: {
-                    border: { value: '{light-color-scheme.success.palette.value.500}' },
                     background: { value: '{light-color-scheme.success.palette.value.500}' },
+                    border: { value: '{light-color-scheme.success.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 warning: {
-                    border: { value: '{light-color-scheme.warning.palette.value.500}' },
                     background: { value: '{light-color-scheme.warning.palette.value.500}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 error: {
-                    border: { value: '{light-color-scheme.error.palette.value.500}' },
                     background: { value: '{light-color-scheme.error.palette.value.500}' },
+                    border: { value: '{light-color-scheme.error.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 transparent: {
+                    background: { value: 'transparent' },
                     border: { value: '{light-color-scheme.second.palette.value.200}' },
-                    color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' },
-                    background: { value: 'transparent' }
+                    color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' }
                 },
                 light: {
-                    border: { value: '{light-color-scheme.second.palette.value.100}' },
                     background: { value: '{light-color-scheme.second.palette.value.100}' },
+                    border: { value: '{light-color-scheme.second.palette.value.100}' },
                     color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' }
                 },
                 second: {
-                    border: { value: '{light-color-scheme.second.palette.value.600}' },
                     background: { value: '{light-color-scheme.second.palette.value.600}' },
+                    border: { value: '{light-color-scheme.second.palette.value.600}' },
                     color: { value: 'white' }
                 }
             },
@@ -72,74 +72,74 @@
             }
         },
         'dark-color-scheme': {
-            pastel: {
-                primary: {
-                    background: { value: '{light-color-scheme.primary.palette.value.A100}' },
-                    color: { value: '{light-color-scheme.primary.palette.value.100}' },
-                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
-                },
-                info: {
-                    background: { value: '{light-color-scheme.primary.palette.value.100}' },
-                    color: { value: '{light-color-scheme.primary.palette.value.100}' },
-                    border: { value: '{light-color-scheme.primary.palette.value.A100}' }
-                },
-                success: {
-                    border: { value: '{light-color-scheme.success.palette.value.700}' },
-                    background: { value: '{light-color-scheme.success.palette.value.A100}' },
-                    color: { value: '{light-color-scheme.success.palette.value.100}' }
-                },
-                warning: {
-                    border: { value: '{light-color-scheme.warning.palette.value.700}' },
-                    background: { value: '{light-color-scheme.warning.palette.value.A100}' },
-                    color: { value: '{light-color-scheme.warning.palette.value.100}' }
-                },
-                error: {
-                    border: { value: '{light-color-scheme.error.palette.value.700}' },
-                    background: { value: '{light-color-scheme.error.palette.value.A100}' },
-                    color: { value: '{light-color-scheme.error.palette.value.100}' }
-                }
-            },
             solid: {
                 primary: {
                     background: { value: '{light-color-scheme.primary.palette.value.700}' },
-                    color: { value: 'white' },
-                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    color: { value: 'white' }
                 },
                 info: {
-                    border: { value: '{light-color-scheme.primary.palette.value.800}' },
-                    background: { value: '{light-color-scheme.primary.palette.value.800}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.700}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 success: {
-                    border: { value: '{light-color-scheme.success.palette.value.700}' },
                     background: { value: '{light-color-scheme.success.palette.value.700}' },
+                    border: { value: '{light-color-scheme.success.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 warning: {
-                    border: { value: '{light-color-scheme.warning.palette.value.700}' },
                     background: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 error: {
-                    border: { value: '{light-color-scheme.error.palette.value.700}' },
                     background: { value: '{light-color-scheme.error.palette.value.700}' },
+                    border: { value: '{light-color-scheme.error.palette.value.500}' },
                     color: { value: 'white' }
                 },
                 transparent: {
+                    background: { value: 'transparent' },
                     border: { value: '{light-color-scheme.second.palette.value.500}' },
                     color: { value: '{light-color-scheme.second.palette.value.40}' },
-                    background: { value: 'transparent' }
                 },
                 light: {
-                    border: { value: '{light-color-scheme.second.palette.value.400}' },
                     background: { value: '{light-color-scheme.second.palette.value.400}' },
+                    border: { value: '{light-color-scheme.second.palette.value.400}' },
                     color: { value: 'white' }
                 },
                 second: {
-                    border: { value: '{light-color-scheme.second.palette.value.700}' },
                     background: { value: '{light-color-scheme.second.palette.value.700}' },
+                    border: { value: '{light-color-scheme.second.palette.value.600}' },
                     color: { value: 'white' }
                 }
+            },
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.A100}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.100}' }
+                },
+                info: {
+                    background: { value: '{light-color-scheme.primary.palette.value.A100}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.100}' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.A100}' },
+                    border: { value: '{light-color-scheme.success.palette.value.700}' },
+                    color: { value: '{light-color-scheme.success.palette.value.100}' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.A100}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.100}' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.A100}' },
+                    border: { value: '{light-color-scheme.error.palette.value.700}' },
+                    color: { value: '{light-color-scheme.error.palette.value.100}' }
+                }
             }
         },
         size: {

package/design-tokens/legacy-2017/tokens/components/button-toggle.json5

@@ -3,7 +3,8 @@
         size: {
             border: {
                 size: { value: '{size.border-width}' },
-                radius: { value: '{size.border-radius}' }
+                radius: { value: '{size.border-radius}' },
+                'siblings-radius': { value: '0' }
             }
         }
     }

package/design-tokens/legacy-2017/tokens/components/checkbox.json5

@@ -4,50 +4,53 @@
             default: {
                 border: { value: '{light-color-scheme.foreground.border}' },
                 color: { value: 'white' },
+                background: { value: 'transparent' },
 
                 states: {
                     checked: {
                         border: { value: '{light-color-scheme.primary.palette.value.600}' },
-                        background: { value: '{light-color-scheme.primary.palette.value.500}' },
+                        background: { value: '{light-color-scheme.primary.palette.value.500}' }
                     },
                     focused: {
                         border: { value: '{light-color-scheme.states.focused-color}' },
-                        shadow: { value: '0 0 0 1px {light-color-scheme.states.focused-color}' },
+                        shadow: { value: '0 0 0 1px {light-color-scheme.states.focused-color}' }
                     },
                     'checked-focused': {
                         border: { value: '{light-color-scheme.states.focused-color}' },
                         background: { value: '{light-color-scheme.primary.palette.value.500}' },
                         shadow: { value: '0 0 0 1px {light-color-scheme.states.focused-color}' },
-                        outline: { value: '1px solid {light-color-scheme.background.background}' },
-                    }   
+                        outline: { value: '1px solid {light-color-scheme.background.background}' }
+                    }
                 }
-            }, 
+            },
             error: {
                 border: { value: '{light-color-scheme.error.palette.value.400}' },
                 color: { value: 'white' },
+                background: { value: 'transparent' },
 
                 states: {
                     checked: {
                         border: { value: '{light-color-scheme.error.palette.value.600}' },
-                        background: { value: '{light-color-scheme.error.palette.value.500}'},
+                        background: { value: '{light-color-scheme.error.palette.value.500}'}
                     },
                     focused: {
                         border: { value: '{light-color-scheme.error.palette.value.400}' },
-                        shadow: { value: '0 0 0 1px {light-color-scheme.error.palette.value.400}' },
+                        shadow: { value: '0 0 0 1px {light-color-scheme.error.palette.value.400}' }
                     },
                     'checked-focused': {
                         border: { value: '{light-color-scheme.error.palette.value.400}' },
                         background: { value: '{light-color-scheme.error.palette.value.500}'},
                         shadow: { value: '0 0 0 1px {light-color-scheme.error.palette.value.400}' },
-                        outline: { value: '1px solid {light-color-scheme.background.background}' },
+                        outline: { value: '1px solid {light-color-scheme.background.background}' }
                     }
                 }
-            }, 
+            }
         },
         'dark-color-scheme': {
             default: {
                 border: { value: '{dark-color-scheme.foreground.border}' },
                 color: { value: 'white' },
+                background: { value: 'transparent' },
 
                 states: {
                     checked: {
@@ -62,36 +65,38 @@
                         border: { value: '{dark-color-scheme.states.focused-color}' },
                         background: { value: '{dark-color-scheme.primary.palette.value.600}' },
                         shadow: { value: '0 0 0 1px {dark-color-scheme.states.focused-color}' },
-                        outline: { value: '1px solid {dark-color-scheme.background.background}' },
+                        outline: { value: '1px solid {dark-color-scheme.background.background}' }
                     }
                 }
-            }, 
+            },
             error: {
                 border: { value: '{dark-color-scheme.error.palette.value.400}' },
                 color: { value: 'white' },
+                background: { value: 'transparent' },
 
                 states: {
                     checked: {
                         border: { value: '{dark-color-scheme.error.palette.value.400}' },
-                        background: { value: '{dark-color-scheme.error.palette.value.600}'},
+                        background: { value: '{dark-color-scheme.error.palette.value.600}'}
                     },
                     focused: {
                         border: { value: '{dark-color-scheme.error.palette.value.400}' },
-                        shadow: { value: '0 0 0 1px {dark-color-scheme.error.palette.value.400}' },
+                        shadow: { value: '0 0 0 1px {dark-color-scheme.error.palette.value.400}' }
                     },
                     'checked-focused': {
                         border: { value: '{dark-color-scheme.error.palette.value.400}' },
                         background: { value: '{dark-color-scheme.error.palette.value.600}'},
                         shadow: { value: '0 0 0 1px {dark-color-scheme.error.palette.value.400}' },
-                        outline: { value: '1px solid {dark-color-scheme.background.background}' },
+                        outline: { value: '1px solid {dark-color-scheme.background.background}' }
                     }
                 }
-            }, 
+            }
         },
         size: {
             width: { value: '{size.l}' },
             'label-margin': { value: '{size.s}' },
             'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
             'toggle-box-shadow': { value: 'inset 0 0 1px 0 rgba(0, 0, 0, 0.2)' }
         },
         font: {

package/design-tokens/legacy-2017/tokens/components/forms.json5

@@ -13,10 +13,6 @@
                 row: {
                     'margin-bottom': { value: '{size.xl}' }
                 },
-                label: {
-                    'padding-top': { value: '{size.xs}' },
-                    'padding-bottom': { value: '0' }
-                },
                 control: {
                     'padding-left': { value: '{size.l}' }
                 },

package/design-tokens/legacy-2017/tokens/components/progress-spinner.json5

@@ -1,7 +1,16 @@
 {
     'progress-spinner': {
         size: {
-            size: { value: '{size.l}' }
+            default: {
+                size: { value: '{size.l}' },
+                'svg-circle-radius': { value: '42.5%' },
+                'svg-stroke-width': { value: '13%' }
+            },
+            large: {
+                size: { value: '{size.5xl}' },
+                'svg-circle-radius': { value: '47%' },
+                'svg-stroke-width': { value: '6%' }
+            }
         }
     }
 }

package/design-tokens/legacy-2017/tokens/components/timezone.json5

@@ -0,0 +1,23 @@
+{
+    'timezone-option': {
+        'light-color-scheme': {
+            text: { value: '{light-color-scheme.foreground.text}' },
+            caption: { value: '{light-color-scheme.foreground.text-less-contrast}' }
+        },
+        'dark-color-scheme': {
+            text: { value: '{dark-color-scheme.foreground.text}' },
+            caption: { value: '{dark-color-scheme.foreground.text-less-contrast}' }
+        },
+        size: {
+            padding: { value: '6px 8px 6px 14px' },
+            'column-gap': { value: '16px' },
+            height: { value: 'auto' },
+            'max-height': { value: '4em' }
+        },
+        font: {
+            text: { value: 'body' },
+            'offset-text': { value: 'body-tabular' },
+            caption: { value: 'caption' }
+        }
+    }
+}