@skyux/layout 4.7.0 → 4.7.4

package/fesm2015/skyux-layout.js

@@ -242,7 +242,7 @@ SkyActionButtonHeaderComponent = __decorate([
     Component({
         selector: 'sky-action-button-header',
         template: "<div\n  class=\"sky-action-button-header\"\n  [skyThemeClass]=\"{\n    'sky-headline' : 'modern',\n    'sky-section-heading' : 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n",
-        styles: [":host .sky-action-button-header{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-xs) .sky-action-button-header{margin:0 5px}@media (min-width:768px){:host .sky-action-button-header{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header{margin:0 0 20px}.sky-theme-modern .sky-action-button-header,:host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 10px}"]
+        styles: [":host .sky-action-button-header{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-xs) .sky-action-button-header{margin:0 5px}@media (min-width:768px){:host .sky-action-button-header{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 10px}.sky-theme-modern .sky-action-button-header{margin:0 0 10px}"]
     })
 ], SkyActionButtonHeaderComponent);
 
@@ -282,7 +282,7 @@ SkyActionButtonIconComponent = __decorate([
     Component({
         selector: 'sky-action-button-icon',
         template: "<div\n  aria-hidden=\"true\"\n  class=\"sky-action-button-icon-container\"\n>\n  <sky-icon\n    class=\"sky-action-button-icon\"\n    [icon]=\"iconType\"\n    [size]=\"fontSizeClass\"\n  ></sky-icon>\n</div>\n",
-        styles: [":host .sky-action-button-icon-container{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container{margin:0 5px}@media (min-width:768px){:host .sky-action-button-icon-container{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container{margin:0 0 20px}.sky-action-button-icon{color:#0974a1}.sky-theme-modern .sky-action-button-icon-container,:host-context(.sky-theme-modern) .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-action-button-icon-container ::ng-deep .sky-icon,:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}"]
+        styles: [":host .sky-action-button-icon-container{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container{margin:0 5px}@media (min-width:768px){:host .sky-action-button-icon-container{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container{margin:0 0 20px}.sky-action-button-icon{color:#0974a1}:host-context(.sky-theme-modern) .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}.sky-theme-modern .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}"]
     })
 ], SkyActionButtonIconComponent);
 
@@ -322,7 +322,7 @@ SkyActionButtonModule = __decorate([
 
 let SkyLayoutResourcesProvider = class SkyLayoutResourcesProvider {
     constructor() {
-        this.resources = { "EN-US": { "skyux_back_to_top": "Back to top", "skyux_card_checkbox_label": "Select card", "skyux_definition_list_none_found": "None found", "skyux_description_list_none_found": "None found", "skyux_inline_delete_assistive_text": "Are you sure you want to delete this item?", "skyux_inline_delete_cancel": "Cancel", "skyux_inline_delete_confirm_deletion": "Confirm deletion", "skyux_inline_delete_delete": "Delete", "skyux_text_expand_close_text": "Close", "skyux_text_expand_modal_title": "Expanded view", "skyux_text_expand_see_less": "See less", "skyux_text_expand_see_more": "See more" } };
+        this.resources = { "EN-US": { "skyux_back_to_top": "Back to top", "skyux_card_checkbox_label": "Select card", "skyux_definition_list_none_found": "None found.", "skyux_description_list_none_found": "None found.", "skyux_inline_delete_assistive_text": "Are you sure you want to delete this item?", "skyux_inline_delete_cancel": "Cancel", "skyux_inline_delete_confirm_deletion": "Confirm deletion", "skyux_inline_delete_delete": "Delete", "skyux_text_expand_close_text": "Close", "skyux_text_expand_modal_title": "Expanded view", "skyux_text_expand_see_less": "See less", "skyux_text_expand_see_more": "See more" } };
     }
     getString(localeInfo, name) {
         return getStringForLocale(this.resources, localeInfo.locale, name);
@@ -1424,7 +1424,7 @@ SkyDescriptionListComponent = __decorate([
         template: "<dl\n  class=\"sky-description-list\"\n  [ngClass]=\"{\n      'sky-description-list-long-description-mode' : mode == 'longDescription',\n      'sky-description-list-vertical-mode' : mode == 'vertical',\n      'sky-description-list-horizontal-mode' : mode == 'horizontal'\n    }\"\n  #descriptionListElement\n>\n  <!--\n    Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n    to avoid adding non-semantic HTML tags to DOM\n  -->\n  <div *ngFor=\"let contentComponent of contentComponents\"\n    class=\"sky-description-list-content\"\n    [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n  >\n    <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n      <ng-container *ngTemplateOutlet=\"termComponent.templateRef\"></ng-container>\n    </dt>\n    <dd *ngFor=\"let descriptionComponent of contentComponent?.descriptionComponents\">\n      <ng-container *ngTemplateOutlet=\"descriptionComponent.templateRef\"></ng-container>\n    </dd>\n  </div>\n</dl>\n",
         providers: [SkyDescriptionListService],
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd,:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}"]
+        styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}"]
     })
 ], SkyDescriptionListComponent);
 
@@ -1473,6 +1473,10 @@ var SkyFluidGridGutterSize;
     SkyFluidGridGutterSize[SkyFluidGridGutterSize["Large"] = 2] = "Large";
 })(SkyFluidGridGutterSize || (SkyFluidGridGutterSize = {}));
 
+/**
+ * Displays a row within the `sky-fluid-grid` wrapper. Previously, you could display a row
+ * without a wrapper, but we no longer officially support that option.
+ */
 let SkyRowComponent = class SkyRowComponent {
     constructor() {
         /**
@@ -1489,7 +1493,7 @@ SkyRowComponent = __decorate([
     Component({
         selector: 'sky-row',
         template: "<div class=\"sky-row\" \n  [ngClass]=\"{ 'sky-row-reverse': reverseColumnOrder }\">\n  <ng-content></ng-content>\n</div>\n",
-        styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row {\n  margin-left: -10px;\n  margin-right: -10px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row {\n  margin-left: -20px;\n  margin-right: -20px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row {\n  margin-left: -15px;\n  margin-right: -15px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row {\n  margin-left: -30px;\n  margin-right: -30px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row {\n  margin-left: -30px;\n  margin-right: -30px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row {\n  margin-left: -60px;\n  margin-right: -60px;\n}\n\n:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width:768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse{flex-direction:row-reverse}.sky-theme-modern .sky-row,:host-context(.sky-theme-modern) .sky-row{margin-left:-30px;margin-right:-30px}"]
+        styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row {\n  margin-left: -10px;\n  margin-right: -10px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row {\n  margin-left: -20px;\n  margin-right: -20px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row {\n  margin-left: -15px;\n  margin-right: -15px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row {\n  margin-left: -30px;\n  margin-right: -30px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row {\n  margin-left: -30px;\n  margin-right: -30px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row {\n  margin-left: -60px;\n  margin-right: -60px;\n}\n\n:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width:768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse{flex-direction:row-reverse}:host-context(.sky-theme-modern) .sky-row{margin-left:-30px;margin-right:-30px}.sky-theme-modern .sky-row{margin-left:-30px;margin-right:-30px}"]
     })
 ], SkyRowComponent);
 
@@ -1545,6 +1549,10 @@ SkyColumnComponent = __decorate([
     })
 ], SkyColumnComponent);
 
+/**
+ * Wraps the fluid grid to ensure proper spacing. Without the wrapper, the
+ * alignment, padding, and margins do not behave as expected.
+ */
 let SkyFluidGridComponent = class SkyFluidGridComponent {
     constructor() {
         /**
@@ -2524,7 +2532,7 @@ SkyToolbarSectionComponent = __decorate([
     Component({
         selector: 'sky-toolbar-section',
         template: "<div class=\"sky-toolbar-section\">\n  <div class=\"sky-toolbar-section-items\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n",
-        styles: [".sky-toolbar-section{display:flex;flex-wrap:nowrap;padding:5px 10px 0;min-height:49px;align-items:center;position:relative;overflow-x:auto}.sky-toolbar-section-items{display:flex;flex-wrap:wrap;align-items:center}.sky-theme-modern .sky-toolbar-section,:host-context(.sky-theme-modern) .sky-toolbar-section{padding:10px 30px}"]
+        styles: [".sky-toolbar-section{display:flex;flex-wrap:nowrap;padding:5px 10px 0;min-height:49px;align-items:center;position:relative;overflow-x:auto}.sky-toolbar-section-items{display:flex;flex-wrap:wrap;align-items:center}:host-context(.sky-theme-modern) .sky-toolbar-section{padding:10px 0}.sky-theme-modern .sky-toolbar-section{padding:10px 0}"]
     })
 ], SkyToolbarSectionComponent);
 
@@ -2546,7 +2554,7 @@ SkyToolbarComponent = __decorate([
     Component({
         selector: 'sky-toolbar',
         template: "<div\n  class=\"sky-toolbar-container\"\n  [ngClass]=\"{ 'sky-toolbar-sectioned': hasSections }\"\n>\n  <ng-content select=\"sky-toolbar-section\"></ng-content>\n  <div class=\"sky-toolbar-items\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n",
-        styles: [".sky-toolbar-container{min-height:49px;background-color:#fff;padding:5px 10px 0;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;display:flex;flex-wrap:wrap;align-items:center;position:relative}.sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #cdcfd2}.sky-toolbar-container:not(.sky-toolbar-sectioned){flex-wrap:nowrap}.sky-toolbar-sectioned{display:block;padding:0}.sky-toolbar-items{display:flex;flex-wrap:wrap;align-items:center}\n:host-context(.sky-theme-modern .sky-viewkeeper-fixed) .sky-toolbar-container {\n  background-color: #fcfcfc;\n}\n\n:host-context(.sky-theme-modern.sky-theme-mode-dark .sky-viewkeeper-fixed) .sky-toolbar-container {\n  background-color: #121212;\n}\n\n.sky-theme-modern .sky-toolbar-container,:host-context(.sky-theme-modern) .sky-toolbar-container{background-color:transparent;border:none;padding:10px 30px}.sky-theme-modern .sky-toolbar-container.sky-viewkeeper-fixed,:host-context(.sky-theme-modern) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}.sky-theme-modern .sky-toolbar-sectioned,:host-context(.sky-theme-modern) .sky-toolbar-sectioned{padding:0}.sky-theme-modern.sky-theme-mode-dark .sky-toolbar-container.sky-viewkeeper-fixed,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}"]
+        styles: [".sky-toolbar-container{min-height:49px;background-color:#fff;padding:5px 10px 0;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;display:flex;flex-wrap:wrap;align-items:center;position:relative}.sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #cdcfd2}.sky-toolbar-container:not(.sky-toolbar-sectioned){flex-wrap:nowrap}.sky-toolbar-sectioned{display:block;padding:0}.sky-toolbar-items{display:flex;flex-wrap:wrap;align-items:center}\n:host-context(.sky-theme-modern .sky-viewkeeper-fixed) .sky-toolbar-container {\n  background-color: #fcfcfc;\n}\n\n:host-context(.sky-theme-modern.sky-theme-mode-dark .sky-viewkeeper-fixed) .sky-toolbar-container {\n  background-color: #121212;\n}\n\n:host-context(.sky-theme-modern) .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}:host-context(.sky-theme-modern) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}:host-context(.sky-theme-modern) .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}:host-context(.sky-theme-modern) .sky-toolbar-sectioned{padding:0}.sky-theme-modern .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}.sky-theme-modern .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}.sky-theme-modern .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}.sky-theme-modern .sky-toolbar-sectioned{padding:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}"]
     })
 ], SkyToolbarComponent);
 
@@ -2559,7 +2567,7 @@ SkyToolbarItemComponent = __decorate([
     Component({
         selector: 'sky-toolbar-item',
         template: "<div class=\"sky-toolbar-item\">\n  <ng-content></ng-content>\n</div>\n",
-        styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}.sky-theme-modern .sky-toolbar-item,:host-context(.sky-theme-modern) .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn,:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default,:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default{background-color:transparent;border:none}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:hover):not(:active):not(:focus),:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}"]
+        styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}:host-context(.sky-theme-modern) .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default{background-color:transparent;border:none}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default{background-color:transparent;border:none}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}"]
     })
 ], SkyToolbarItemComponent);
 
@@ -2574,7 +2582,7 @@ SkyToolbarViewActionsComponent = __decorate([
         selector: 'sky-toolbar-view-actions',
         template: "<div\n  class=\"sky-toolbar-view-actions\"\n>\n  <ng-content></ng-content>\n</div>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}.sky-theme-modern .sky-toolbar-view-actions,:host-context(.sky-theme-modern) .sky-toolbar-view-actions{margin-bottom:0}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep>:not(:last-child),:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn,:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus),:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}"]
+        styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions{margin-bottom:0}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-view-actions{margin-bottom:0}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}"]
     })
 ], SkyToolbarViewActionsComponent);