npm - @skyux/layout - Versions diffs - 9.0.0-alpha.0 → 9.0.0-alpha.1 - Mend

@skyux/layout 9.0.0-alpha.0 → 9.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/documentation.json +228 -228
package/package.json +9 -9

package/documentation.json CHANGED Viewed

@@ -9737,194 +9737,194 @@
   },
   "codeExamples": [
     {
-      "fileName": "action-button-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/action-button/basic/action-button-demo.component.html",
-      "rawContents": "<sky-action-button-container>\n  <sky-action-button (actionClick)=\"filterActionClick()\">\n    <sky-action-button-icon iconType=\"filter\"> </sky-action-button-icon>\n    <sky-action-button-header> Build a new list </sky-action-button-header>\n    <sky-action-button-details>\n      Start from scratch and fine-tune with filters.\n    </sky-action-button-details>\n  </sky-action-button>\n\n  <sky-action-button (actionClick)=\"openActionClick()\">\n    <sky-action-button-icon iconType=\"folder-open-o\"> </sky-action-button-icon>\n    <sky-action-button-header> Open a saved list </sky-action-button-header>\n    <sky-action-button-details>\n      Open a list with filters saved in the web view.\n    </sky-action-button-details>\n  </sky-action-button>\n</sky-action-button-container>\n"
+      "fileName": "toolbar-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/toolbar/sectioned/toolbar-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyToolbarModule } from '@skyux/layout';\n\nimport { ToolbarDemoComponent } from './toolbar-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyIconModule, SkyToolbarModule],\n  exports: [ToolbarDemoComponent],\n  declarations: [ToolbarDemoComponent],\n})\nexport class ToolbarDemoModule {}\n"
     },
     {
-      "fileName": "action-button-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/action-button/basic/action-button-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-action-button-demo',\n  templateUrl: './action-button-demo.component.html',\n})\nexport class ActionButtonDemoComponent {\n  public filterActionClick(): void {\n    alert('Filter action clicked');\n  }\n\n  public openActionClick(): void {\n    alert('Open action clicked');\n  }\n}\n"
+      "fileName": "toolbar-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/toolbar/sectioned/toolbar-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-toolbar-demo',\n  templateUrl: './toolbar-demo.component.html',\n})\nexport class ToolbarDemoComponent {\n  public onButtonClicked(buttonText: string): void {\n    alert(buttonText + ' clicked!');\n  }\n}\n"
     },
     {
-      "fileName": "action-button-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/action-button/basic/action-button-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyActionButtonModule } from '@skyux/layout';\n\nimport { ActionButtonDemoComponent } from './action-button-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyActionButtonModule],\n  declarations: [ActionButtonDemoComponent],\n  exports: [ActionButtonDemoComponent],\n})\nexport class ActionButtonDemoModule {}\n"
+      "fileName": "toolbar-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/toolbar/sectioned/toolbar-demo.component.html",
+      "rawContents": "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 1')\"\n      >\n        Button 1\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 2')\"\n      >\n        Button 2\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort descending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Expand')\"\n      >\n        <sky-icon icon=\"angle-double-down\"></sky-icon>\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort ascending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Collapse')\"\n      >\n        <sky-icon icon=\"angle-double-up\"></sky-icon>\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Sort')\"\n      >\n        <sky-icon icon=\"sort\"></sky-icon>\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Filter')\"\n      >\n        <sky-icon icon=\"filter\"></sky-icon>\n      </button>\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n"
     },
     {
-      "fileName": "action-button-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/action-button/permalink/action-button-demo.component.html",
-      "rawContents": "<sky-action-button-container>\n  <sky-action-button [permalink]=\"url\">\n    <sky-action-button-icon iconType=\"link\"> </sky-action-button-icon>\n    <sky-action-button-header> Open a link </sky-action-button-header>\n    <sky-action-button-details> Open a link. </sky-action-button-details>\n  </sky-action-button>\n\n  <sky-action-button [permalink]=\"routerlink\">\n    <sky-action-button-icon iconType=\"link\"> </sky-action-button-icon>\n    <sky-action-button-header> Open a router link </sky-action-button-header>\n    <sky-action-button-details> Open a router link. </sky-action-button-details>\n  </sky-action-button>\n</sky-action-button-container>\n"
+      "fileName": "toolbar-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/toolbar/basic/toolbar-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyToolbarModule } from '@skyux/layout';\n\nimport { ToolbarDemoComponent } from './toolbar-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyIconModule, SkyToolbarModule],\n  exports: [ToolbarDemoComponent],\n  declarations: [ToolbarDemoComponent],\n})\nexport class ToolbarDemoModule {}\n"
     },
     {
-      "fileName": "action-button-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/action-button/permalink/action-button-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyActionButtonPermalink } from '@skyux/layout';\n\n@Component({\n  selector: 'app-action-button-demo',\n  templateUrl: './action-button-demo.component.html',\n})\nexport class ActionButtonDemoComponent {\n  public routerlink: SkyActionButtonPermalink = {\n    route: {\n      commands: [],\n      extras: {\n        queryParams: {\n          component: 'MyComponent',\n        },\n      },\n    },\n  };\n\n  public url: SkyActionButtonPermalink = {\n    url: 'https://www.stackblitz.com',\n  };\n}\n"
+      "fileName": "toolbar-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/toolbar/basic/toolbar-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-toolbar-demo',\n  templateUrl: './toolbar-demo.component.html',\n})\nexport class ToolbarDemoComponent {\n  public onButtonClicked(buttonText: string): void {\n    alert(buttonText + ' clicked!');\n  }\n}\n"
     },
     {
-      "fileName": "action-button-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/action-button/permalink/action-button-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyActionButtonModule } from '@skyux/layout';\n\nimport { ActionButtonDemoComponent } from './action-button-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyActionButtonModule],\n  declarations: [ActionButtonDemoComponent],\n  exports: [ActionButtonDemoComponent],\n})\nexport class ActionButtonDemoModule {}\n"
+      "fileName": "toolbar-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/toolbar/basic/toolbar-demo.component.html",
+      "rawContents": "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 1')\"\n    >\n      Button 1\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 2')\"\n    >\n      Button 2\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-view-actions>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort descending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Expand')\"\n    >\n      <sky-icon icon=\"angle-double-down\"></sky-icon>\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort ascending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Collapse')\"\n    >\n      <sky-icon icon=\"angle-double-up\"></sky-icon>\n    </button>\n  </sky-toolbar-view-actions>\n</sky-toolbar>\n"
     },
     {
-      "fileName": "back-to-top-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/back-to-top-demo.component.html",
-      "rawContents": "<sky-repeater skyBackToTop>\n  <sky-repeater-item *ngFor=\"let person of personList\">\n    <sky-repeater-item-title>\n      {{ person.name }}\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      {{ person.address }}\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\">\n</sky-infinite-scroll>\n"
+      "fileName": "text-expand-repeater-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand-repeater/text-expand-repeater-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandRepeaterModule } from '@skyux/layout';\n\nimport { TextExpandRepeaterDemoComponent } from './text-expand-repeater-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandRepeaterModule],\n  declarations: [TextExpandRepeaterDemoComponent],\n  exports: [TextExpandRepeaterDemoComponent],\n})\nexport class TextExpandRepeaterDemoModule {}\n"
     },
     {
-      "fileName": "back-to-top-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/back-to-top-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { Person } from './person';\n\n@Component({\n  selector: 'app-back-to-top-demo',\n  templateUrl: './back-to-top-demo.component.html',\n})\nexport class BackToTopDemoComponent implements OnInit {\n  public hasMore = true;\n\n  public personList: Person[] = [];\n\n  public personDataSet = [\n    {\n      name: 'Barbara Durr',\n      address: '7436 Fieldstone Court',\n    },\n    {\n      name: 'Colton Chamberlain',\n      address: '342 Foster Court',\n    },\n    {\n      name: 'Alva Clifford',\n      address: '657 West Rockville Street',\n    },\n    {\n      name: 'Tonja Sanderson',\n      address: '7004 Third Street',\n    },\n    {\n      name: 'Paulene Baum',\n      address: '9309 Mammoth Street',\n    },\n    {\n      name: 'Jessy Witherspoon',\n      address: '43 Canal Street',\n    },\n    {\n      name: 'Solomon Hurley',\n      address: '667 Wakehurst Circle',\n    },\n    {\n      name: 'Calandra Geer',\n      address: '164 Applegate Drive',\n    },\n    {\n      name: 'Latrice Ashmore',\n      address: '7965 Lake Road',\n    },\n    {\n      name: 'Rod Tomlinson',\n      address: '9664 Newport Drive',\n    },\n    {\n      name: 'Cristen Sizemore',\n      address: '17 Edgefield Street',\n    },\n    {\n      name: 'Kristeen Lunsford',\n      address: '245 Green Lake Street',\n    },\n    {\n      name: 'Jack Lovett',\n      address: '73 Academy Street',\n    },\n    {\n      name: 'Elwood Farris',\n      address: '90 Smoky Hollow Court',\n    },\n    {\n      name: 'Ilene Woo',\n      address: '71 Pumpkin Hill Street',\n    },\n    {\n      name: 'Kanesha Hutto',\n      address: '107 East Cooper Street',\n    },\n    {\n      name: 'Nick Bourne',\n      address: '62 Evergreen Street',\n    },\n    {\n      name: 'Ed Sipes',\n      address: '8824 Hill Street',\n    },\n    {\n      name: 'Wonda Lumpkin',\n      address: '134 North Warren Street',\n    },\n    {\n      name: 'Cheyenne Lightfoot',\n      address: '184 Pierce Avenue',\n    },\n    {\n      name: 'Darcel Lenz',\n      address: '9408 Beechwood Street',\n    },\n    {\n      name: 'Martine Rocha',\n      address: '871 Shadow Brook Street',\n    },\n    {\n      name: 'Cherelle Connell',\n      address: '649 Glenwood Street',\n    },\n    {\n      name: 'Molly Seymour',\n      address: '386 E. George Street',\n    },\n    {\n      name: 'Clarice Overton',\n      address: '16 Manchester Street',\n    },\n    {\n      name: 'Eliza Vanhorn',\n      address: '8232 S. Augusta Street',\n    },\n  ];\n\n  public ngOnInit(): void {\n    this.addData(0, 5);\n  }\n\n  public onScrollEnd(): void {\n    this.addData(this.personList.length, 5);\n  }\n\n  private addData(start: number, rowSize: number): void {\n    if (this.hasMore) {\n      this.mockRemote(start, rowSize).then(\n        (result: { data: Person[]; hasMore: boolean }) => {\n          this.personList = this.personList.concat(result.data);\n          this.hasMore = result.hasMore;\n        }\n      );\n    }\n  }\n\n  /**\n   * Simulate a remote request.\n   */\n  private mockRemote(\n    start: number,\n    rowSize: number\n  ): Promise<{ data: Person[]; hasMore: boolean }> {\n    const data: Person[] = [];\n\n    for (let i = 0; i < rowSize; i++) {\n      if (this.personDataSet[start + i]) {\n        data.push(this.personDataSet[start + i]);\n      }\n    }\n\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        resolve({\n          data,\n          hasMore: this.personList.length < this.personDataSet.length,\n        });\n      }, 1000);\n    });\n  }\n}\n"
+      "fileName": "text-expand-repeater-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand-repeater/text-expand-repeater-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-repeater-demo',\n  templateUrl: './text-expand-repeater-demo.component.html',\n})\nexport class TextExpandRepeaterDemoComponent {\n  public repeaterData: string[] = [\n    'Repeater item 1',\n    'Repeater item 2',\n    'Repeater item 3',\n    'Repeater item 4',\n    'Repeater item 5',\n  ];\n}\n"
     },
     {
-      "fileName": "back-to-top-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/back-to-top-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyBackToTopModule } from '@skyux/layout';\nimport { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { BackToTopDemoComponent } from './back-to-top-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyBackToTopModule,\n    SkyInfiniteScrollModule,\n    SkyRepeaterModule,\n    SkyTabsModule,\n  ],\n  declarations: [BackToTopDemoComponent],\n  exports: [BackToTopDemoComponent],\n})\nexport class BackToTopDemoModule {}\n"
+      "fileName": "text-expand-repeater-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand-repeater/text-expand-repeater-demo.component.html",
+      "rawContents": "<sky-text-expand-repeater [data]=\"repeaterData\" [maxItems]=\"2\">\n</sky-text-expand-repeater>\n"
     },
     {
-      "fileName": "person.ts",
-      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/person.ts",
-      "rawContents": "export interface Person {\n  name: string;\n  address: string;\n}\n"
+      "fileName": "text-expand-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/newline/text-expand-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandModule } from '@skyux/layout';\n\nimport { TextExpandDemoComponent } from './text-expand-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandModule],\n  declarations: [TextExpandDemoComponent],\n  exports: [TextExpandDemoComponent],\n})\nexport class TextExpandDemoModule {}\n"
     },
     {
-      "fileName": "back-to-top-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/back-to-top/repeater/back-to-top-demo.component.html",
-      "rawContents": "<sky-repeater skyBackToTop>\n  <sky-repeater-item *ngFor=\"let person of personList\">\n    <sky-repeater-item-title>\n      {{ person.name }}\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      {{ person.address }}\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n"
+      "fileName": "text-expand-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/newline/text-expand-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-demo',\n  templateUrl: './text-expand-demo.component.html',\n})\nexport class TextExpandDemoComponent {\n  public newlinesText =\n    'The text expand component truncates long blocks of text with an ellipsis and a link to expand the text.\\nUsers select the link to expand the full text inline unless it exceeds limits on text characters or newline characters.\\nIf the text exceeds those limits, then it expands in a modal view instead.\\nThe component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.';\n}\n"
     },
     {
-      "fileName": "back-to-top-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/back-to-top/repeater/back-to-top-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-back-to-top-demo',\n  templateUrl: './back-to-top-demo.component.html',\n})\nexport class BackToTopDemoComponent {\n  public personList = [\n    {\n      name: 'Barbara Durr',\n      address: '7436 Fieldstone Court',\n    },\n    {\n      name: 'Colton Chamberlain',\n      address: '342 Foster Court',\n    },\n    {\n      name: 'Alva Clifford',\n      address: '657 West Rockville Street',\n    },\n    {\n      name: 'Tonja Sanderson',\n      address: '7004 Third Street',\n    },\n    {\n      name: 'Paulene Baum',\n      address: '9309 Mammoth Street',\n    },\n    {\n      name: 'Jessy Witherspoon',\n      address: '43 Canal Street',\n    },\n    {\n      name: 'Solomon Hurley',\n      address: '667 Wakehurst Circle',\n    },\n    {\n      name: 'Calandra Geer',\n      address: '164 Applegate Drive',\n    },\n    {\n      name: 'Latrice Ashmore',\n      address: '7965 Lake Road',\n    },\n    {\n      name: 'Rod Tomlinson',\n      address: '9664 Newport Drive',\n    },\n    {\n      name: 'Cristen Sizemore',\n      address: '17 Edgefield Street',\n    },\n    {\n      name: 'Kristeen Lunsford',\n      address: '245 Green Lake Street',\n    },\n    {\n      name: 'Jack Lovett',\n      address: '73 Academy Street',\n    },\n    {\n      name: 'Elwood Farris',\n      address: '90 Smoky Hollow Court',\n    },\n    {\n      name: 'Ilene Woo',\n      address: '71 Pumpkin Hill Street',\n    },\n    {\n      name: 'Kanesha Hutto',\n      address: '107 East Cooper Street',\n    },\n    {\n      name: 'Nick Bourne',\n      address: '62 Evergreen Street',\n    },\n    {\n      name: 'Ed Sipes',\n      address: '8824 Hill Street',\n    },\n    {\n      name: 'Wonda Lumpkin',\n      address: '134 North Warren Street',\n    },\n    {\n      name: 'Cheyenne Lightfoot',\n      address: '184 Pierce Avenue',\n    },\n    {\n      name: 'Darcel Lenz',\n      address: '9408 Beechwood Street',\n    },\n    {\n      name: 'Martine Rocha',\n      address: '871 Shadow Brook Street',\n    },\n    {\n      name: 'Cherelle Connell',\n      address: '649 Glenwood Street',\n    },\n    {\n      name: 'Molly Seymour',\n      address: '386 E. George Street',\n    },\n    {\n      name: 'Clarice Overton',\n      address: '16 Manchester Street',\n    },\n    {\n      name: 'Eliza Vanhorn',\n      address: '8232 S. Augusta Street',\n    },\n  ];\n}\n"
+      "fileName": "text-expand-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/newline/text-expand-demo.component.html",
+      "rawContents": "<sky-text-expand [text]=\"newlinesText\" [truncateNewlines]=\"false\">\n</sky-text-expand>\n"
     },
     {
-      "fileName": "back-to-top-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/back-to-top/repeater/back-to-top-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyBackToTopModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { BackToTopDemoComponent } from './back-to-top-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyBackToTopModule, SkyRepeaterModule, SkyTabsModule],\n  declarations: [BackToTopDemoComponent],\n  exports: [BackToTopDemoComponent],\n})\nexport class BackToTopDemoModule {}\n"
+      "fileName": "text-expand-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/modal/text-expand-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandModule } from '@skyux/layout';\n\nimport { TextExpandDemoComponent } from './text-expand-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandModule],\n  declarations: [TextExpandDemoComponent],\n  exports: [TextExpandDemoComponent],\n})\nexport class TextExpandDemoModule {}\n"
     },
     {
-      "fileName": "box-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.component.html",
-      "rawContents": "<sky-box data-sky-id=\"box-demo\" [ariaLabel]=\"'boxDemo'\">\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">Box header</h2>\n  </sky-box-header>\n  <sky-box-controls>\n    <sky-dropdown buttonType=\"context-menu\" label=\"Box demo context menu\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 1</button>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 2</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-box-controls>\n  <sky-box-content>\n    <p>Box content</p>\n  </sky-box-content>\n</sky-box>\n"
+      "fileName": "text-expand-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/modal/text-expand-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-demo',\n  templateUrl: './text-expand-demo.component.html',\n})\nexport class TextExpandDemoComponent {\n  public longText =\n    'The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.';\n}\n"
     },
     {
-      "fileName": "box-demo.component.spec.ts",
-      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyBoxHarness } from '@skyux/layout/testing';\n\nimport { BoxDemoComponent } from './box-demo.component';\nimport { BoxDemoModule } from './box-demo.module';\n\ndescribe('Basic box', async () => {\n  async function setupTest(): Promise<{\n    boxHarness: SkyBoxHarness;\n    fixture: ComponentFixture<BoxDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(BoxDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n    const boxHarness = await loader.getHarness(\n      SkyBoxHarness.with({\n        dataSkyId: 'box-demo',\n      })\n    );\n\n    return { boxHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [BoxDemoModule],\n    });\n  });\n\n  it('should display the correct box', async () => {\n    const { boxHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(boxHarness.getAriaLabel()).toBeResolvedTo('boxDemo');\n  });\n});\n"
+      "fileName": "text-expand-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/modal/text-expand-demo.component.html",
+      "rawContents": "<sky-text-expand [text]=\"longText\" [maxExpandedLength]=\"100\"> </sky-text-expand>\n"
     },
     {
-      "fileName": "box-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-box-demo',\n  templateUrl: './box-demo.component.html',\n})\nexport class BoxDemoComponent {}\n"
+      "fileName": "text-expand-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/inline/text-expand-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandModule } from '@skyux/layout';\n\nimport { TextExpandDemoComponent } from './text-expand-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandModule],\n  declarations: [TextExpandDemoComponent],\n  exports: [TextExpandDemoComponent],\n})\nexport class TextExpandDemoModule {}\n"
     },
     {
-      "fileName": "box-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyBoxModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { BoxDemoComponent } from './box-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyBoxModule, SkyDropdownModule],\n  declarations: [BoxDemoComponent],\n  exports: [BoxDemoComponent],\n})\nexport class BoxDemoModule {}\n"
+      "fileName": "text-expand-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/inline/text-expand-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-demo',\n  templateUrl: './text-expand-demo.component.html',\n})\nexport class TextExpandDemoComponent {\n  public longText =\n    'The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.';\n}\n"
     },
     {
-      "fileName": "box-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.component.html",
-      "rawContents": "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">Box header</h2>\n    <sky-help-inline\n      class=\"sky-control-help\"\n      (actionClick)=\"onActionClick()\"\n    ></sky-help-inline>\n  </sky-box-header>\n  <sky-box-controls>\n    <sky-dropdown buttonType=\"context-menu\" label=\"Box demo context menu\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 1</button>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 2</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-box-controls>\n  <sky-box-content>\n    <p>Box content</p>\n  </sky-box-content>\n</sky-box>\n"
+      "fileName": "text-expand-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/text-expand/inline/text-expand-demo.component.html",
+      "rawContents": "<sky-text-expand [text]=\"longText\"> </sky-text-expand>\n"
     },
     {
-      "fileName": "box-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-box-demo',\n  templateUrl: './box-demo.component.html',\n})\nexport class BoxDemoComponent {\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
+      "fileName": "page-summary-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/page-summary/basic/page-summary-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyAvatarModule } from '@skyux/avatar';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport {\n  SkyAlertModule,\n  SkyKeyInfoModule,\n  SkyLabelModule,\n} from '@skyux/indicators';\nimport { SkyPageSummaryModule } from '@skyux/layout';\n\nimport { PageSummaryDemoComponent } from './page-summary-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyPageSummaryModule,\n    SkyAlertModule,\n    SkyAvatarModule,\n    SkyCheckboxModule,\n    SkyLabelModule,\n    SkyKeyInfoModule,\n  ],\n  declarations: [PageSummaryDemoComponent],\n  exports: [PageSummaryDemoComponent],\n})\nexport class PageSummaryDemoModule {}\n"
     },
     {
-      "fileName": "box-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyBoxModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { BoxDemoComponent } from './box-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyBoxModule, SkyDropdownModule, SkyHelpInlineModule],\n  declarations: [BoxDemoComponent],\n  exports: [BoxDemoComponent],\n})\nexport class BoxDemoModule {}\n"
+      "fileName": "page-summary-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/page-summary/basic/page-summary-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-page-summary-demo',\n  templateUrl: './page-summary-demo.component.html',\n})\nexport class PageSummaryDemoComponent {\n  public name = 'Robert C. Hernandez';\n\n  public showAlert = true;\n\n  public showContent = true;\n\n  public showImage = true;\n\n  public showKeyInfo = true;\n\n  public showStatus = true;\n\n  public showSubtitle = true;\n\n  public showTitle = true;\n}\n"
     },
     {
-      "fileName": "card-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/card/basic/card-demo.component.html",
-      "rawContents": "<sky-card [selectable]=\"showCheckbox\">\n  <sky-card-title *ngIf=\"showTitle\"> Large card </sky-card-title>\n  <sky-card-content *ngIf=\"showContent\">\n    This card demonstrates the amount of space that is available for a card that\n    uses the default large size. If the content does not require this much\n    space, you can set the card size to small. The type of content to display in\n    the body of a card varies based on what the card represents and whether it\n    prompts users to action.\n  </sky-card-content>\n  <sky-card-actions *ngIf=\"showAction\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"triggerAlert()\"\n    >\n      Action\n    </button>\n  </sky-card-actions>\n</sky-card>\n<sky-card size=\"small\" [selectable]=\"showCheckbox\">\n  <sky-card-title *ngIf=\"showTitle\"> Small card </sky-card-title>\n  <sky-card-content *ngIf=\"showContent\">\n    This card demonstrates the reduced amount of space that is available when\n    you set the card size to small.\n  </sky-card-content>\n  <sky-card-actions *ngIf=\"showAction\">\n    <sky-dropdown buttonType=\"context-menu\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <button type=\"button\" (click)=\"triggerAlert()\">Action</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-card-actions>\n</sky-card>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox [(ngModel)]=\"showTitle\">\n      <sky-checkbox-label>Show title</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showContent\">\n      <sky-checkbox-label>Show content</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showAction\">\n      <sky-checkbox-label>Show action</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showCheckbox\">\n      <sky-checkbox-label>Show checkbox</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n</ul>\n"
+      "fileName": "page-summary-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/page-summary/basic/page-summary-demo.component.html",
+      "rawContents": "<sky-page-summary>\n  <sky-page-summary-alert *ngIf=\"showAlert\">\n    <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n  </sky-page-summary-alert>\n  <sky-page-summary-image *ngIf=\"showImage\">\n    <sky-avatar [name]=\"name\" [canChange]=\"true\"></sky-avatar>\n  </sky-page-summary-image>\n  <sky-page-summary-title *ngIf=\"showTitle\">\n    {{ name }}\n  </sky-page-summary-title>\n  <sky-page-summary-subtitle *ngIf=\"showSubtitle\">\n    Board member\n  </sky-page-summary-subtitle>\n  <sky-page-summary-status *ngIf=\"showStatus\">\n    <sky-label labelType=\"success\"> Fundraiser </sky-label>\n    <sky-label> Inactive </sky-label>\n  </sky-page-summary-status>\n  <sky-page-summary-content *ngIf=\"showContent\">\n    This is the arbitrary content section. You can display any kind of content\n    to complement the content on a page. We recommend that you display content\n    to support the key tasks of users of users who visit the page. We also\n    recommend that you keep in mind the context of how users will use the\n    content and limit the amount of content to avoid overloading the summary.\n  </sky-page-summary-content>\n  <sky-page-summary-key-info *ngIf=\"showKeyInfo\">\n    <sky-key-info>\n      <sky-key-info-value> $1,500 </sky-key-info-value>\n      <sky-key-info-label> Largest gift </sky-key-info-label>\n    </sky-key-info>\n    <sky-key-info>\n      <sky-key-info-value> 37 </sky-key-info-value>\n      <sky-key-info-label> Total gifts </sky-key-info-label>\n    </sky-key-info>\n  </sky-page-summary-key-info>\n</sky-page-summary>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox [(ngModel)]=\"showTitle\">\n      <sky-checkbox-label>Show title</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showSubtitle\">\n      <sky-checkbox-label> Show subtitle </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showImage\">\n      <sky-checkbox-label> Show image </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showStatus\">\n      <sky-checkbox-label> Show record status </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showKeyInfo\">\n      <sky-checkbox-label> Show key information </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showContent\">\n      <sky-checkbox-label> Show arbitrary content </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showAlert\">\n      <sky-checkbox-label> Show alert </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n</ul>\n"
     },
     {
-      "fileName": "card-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/card/basic/card-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-card-demo',\n  templateUrl: './card-demo.component.html',\n})\nexport class CardDemoComponent {\n  public showAction = true;\n\n  public showCheckbox = true;\n\n  public showContent = true;\n\n  public showTitle = true;\n\n  public triggerAlert(): void {\n    alert('Action clicked!');\n  }\n}\n"
+      "fileName": "page-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFluidGridModule, SkyPageModule } from '@skyux/layout';\n\nimport { PageDemoComponent } from './page-demo.component';\n\n@NgModule({\n  declarations: [PageDemoComponent],\n  imports: [CommonModule, SkyFluidGridModule, SkyPageModule],\n  exports: [PageDemoComponent],\n})\nexport class PageDemoModule {}\n"
     },
     {
-      "fileName": "card-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/card/basic/card-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyCardModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { CardDemoComponent } from './card-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyCardModule,\n    SkyCheckboxModule,\n    SkyDropdownModule,\n  ],\n  declarations: [CardDemoComponent],\n  exports: [CardDemoComponent],\n})\nexport class CardDemoModule {}\n"
+      "fileName": "page-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-page-demo',\n  templateUrl: './page-demo.component.html',\n  styleUrls: ['./page-demo.component.scss'],\n})\nexport class PageDemoComponent {}\n"
     },
     {
-      "fileName": "definition-list-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/definition-list/basic/definition-list-demo.component.html",
-      "rawContents": "<sky-definition-list>\n  <sky-definition-list-heading>\n    Definition list heading\n  </sky-definition-list-heading>\n  <sky-definition-list-content *ngFor=\"let item of items\">\n    <sky-definition-list-label>\n      {{ item.label }}\n    </sky-definition-list-label>\n    <sky-definition-list-value>\n      {{ item.value }}\n    </sky-definition-list-value>\n  </sky-definition-list-content>\n</sky-definition-list>\n"
+      "fileName": "page-demo.component.scss",
+      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.component.scss",
+      "rawContents": ".layout-fit-demo {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  &-header {\n    flex-grow: 0;\n  }\n\n  &-content {\n    background-color: var(--sky-background-color-info-light);\n    flex-grow: 1;\n    position: relative;\n  }\n}\n\n.anchored-item {\n  position: absolute;\n  padding: var(--sky-padding-even-md);\n\n  &-left {\n    left: 0;\n    top: 50%;\n  }\n\n  &-top {\n    top: 0;\n    left: 50%;\n  }\n\n  &-right {\n    top: 50%;\n    right: 0;\n  }\n\n  &-bottom {\n    bottom: 0;\n    left: 50%;\n  }\n\n  &-center {\n    top: 50%;\n    left: 50%;\n  }\n}\n"
     },
     {
-      "fileName": "definition-list-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/definition-list/basic/definition-list-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-definition-list-demo',\n  templateUrl: './definition-list-demo.component.html',\n})\nexport class DefinitionListDemoComponent {\n  public items: { label: string; value?: string }[] = [\n    {\n      label: 'Field 1',\n      value: 'Field 1 value',\n    },\n    {\n      label: 'Field 2',\n      value: 'Field 2 value',\n    },\n    {\n      label: 'Field 3',\n      value: undefined,\n    },\n    {\n      label: 'Field 4',\n      value: 'Field 4 value',\n    },\n  ];\n}\n"
+      "fileName": "page-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.component.html",
+      "rawContents": "<sky-page layout=\"fit\">\n  <div class=\"layout-fit-demo\">\n    <div class=\"layout-fit-demo-header\">\n      <sky-fluid-grid>\n        <sky-row>\n          <sky-column>\n            <h1>Fit layout demo</h1>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column>\n            <p class=\"sky-margin-stacked-xl\">\n              Elements in a page with a layout of \"fit\" can be absolutely\n              positioned inside it. This is especially powerful when combined\n              with content that uses\n              <a href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox\"\n                >CSS flexbox</a\n              >. This example uses flexbox to display a header with a variable\n              height and content that fills the rest of the available viewport.\n            </p>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </div>\n    <div class=\"layout-fit-demo-content\">\n      <div class=\"anchored-item anchored-item-left\">Left</div>\n      <div class=\"anchored-item anchored-item-top\">Top</div>\n      <div class=\"anchored-item anchored-item-right\">Right</div>\n      <div class=\"anchored-item anchored-item-bottom\">Bottom</div>\n      <div class=\"anchored-item anchored-item-center\">Center</div>\n    </div>\n  </div>\n</sky-page>\n"
     },
     {
-      "fileName": "definition-list-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/definition-list/basic/definition-list-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDefinitionListModule } from '@skyux/layout';\n\nimport { DefinitionListDemoComponent } from './definition-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDefinitionListModule],\n  declarations: [DefinitionListDemoComponent],\n  exports: [DefinitionListDemoComponent],\n})\nexport class DefinitionListDemoModule {}\n"
+      "fileName": "inline-delete-repeater-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/inline-delete/repeater/inline-delete-repeater-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyInlineDeleteModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { InlineDeleteRepeaterDemoComponent } from './inline-delete-repeater-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyDropdownModule,\n    SkyInlineDeleteModule,\n    SkyRepeaterModule,\n  ],\n  declarations: [InlineDeleteRepeaterDemoComponent],\n  exports: [InlineDeleteRepeaterDemoComponent],\n})\nexport class InlineDeleteRepeaterDemoModule {}\n"
     },
     {
-      "fileName": "description-list-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.component.html",
-      "rawContents": "<sky-description-list mode=\"horizontal\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n      <sky-help-inline\n        *ngIf=\"item.showHelp\"\n        class=\"sky-control-help\"\n        (actionClick)=\"onActionClick()\"\n      ></sky-help-inline>\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
+      "fileName": "inline-delete-repeater-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/inline-delete/repeater/inline-delete-repeater-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\ninterface InlineRepeaterDemoItem {\n  title: string;\n  cost: string;\n  description: string;\n}\n\n@Component({\n  selector: 'app-inline-delete-repeater-demo',\n  templateUrl: './inline-delete-repeater-demo.component.html',\n})\nexport class InlineDeleteRepeaterDemoComponent {\n  public originalRepeaterDemoItems: InlineRepeaterDemoItem[] = [\n    {\n      title: 'Individual',\n      cost: '$75.00',\n      description: '1 ticket',\n    },\n    {\n      title: 'Foursome',\n      cost: '$250.00',\n      description: '4 tickets',\n    },\n    {\n      title: 'Hole sponsor',\n      cost: '$1,000.00',\n      description: '8 tickets',\n    },\n  ];\n\n  public repeaterDemoItems: InlineRepeaterDemoItem[] =\n    this.originalRepeaterDemoItems;\n\n  public repeaterDemoShownInlineDeletes: string[] = [];\n\n  public showInlineDelete(title: string): void {\n    this.repeaterDemoShownInlineDeletes.push(title);\n  }\n\n  public deleteItem(title: string): void {\n    this.repeaterDemoItems = this.repeaterDemoItems.filter(\n      (demoItem: InlineRepeaterDemoItem) => demoItem.title !== title\n    );\n    this.repeaterDemoShownInlineDeletes =\n      this.repeaterDemoShownInlineDeletes.filter(\n        (demoItem: string) => demoItem !== title\n      );\n  }\n\n  public cancelDeletion(title: string): void {\n    this.repeaterDemoShownInlineDeletes =\n      this.repeaterDemoShownInlineDeletes.filter(\n        (demoItem: string) => demoItem !== title\n      );\n  }\n\n  public onResetClick(): void {\n    this.repeaterDemoItems = this.originalRepeaterDemoItems;\n    this.repeaterDemoShownInlineDeletes = [];\n  }\n}\n"
     },
     {
-      "fileName": "description-list-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string; showHelp?: boolean }[] = [\n    {\n      term: 'College',\n      description: 'Humanities and Social Sciences',\n    },\n    {\n      term: 'Department',\n      description: 'Anthropology',\n    },\n    {\n      term: 'Advisor',\n      description: 'Cathy Green',\n      showHelp: true,\n    },\n    {\n      term: 'Class year',\n      description: '2024',\n    },\n  ];\n\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
+      "fileName": "inline-delete-repeater-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/inline-delete/repeater/inline-delete-repeater-demo.component.html",
+      "rawContents": "<sky-repeater style=\"width: 100%\">\n  <sky-repeater-item *ngFor=\"let item of repeaterDemoItems\">\n    <sky-repeater-item-context-menu>\n      <sky-dropdown buttonType=\"context-menu\">\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\n              Delete\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-repeater-item-context-menu>\n    <sky-repeater-item-title class=\"sky-demo-inline-delete-flex\">\n      <div>\n        {{ item.title }}\n      </div>\n      <div>\n        {{ item.cost }}\n      </div>\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      {{ item.description }}\n    </sky-repeater-item-content>\n    <sky-inline-delete\n      *ngIf=\"repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0\"\n      (cancelTriggered)=\"cancelDeletion(item.title)\"\n      (deleteTriggered)=\"deleteItem(item.title)\"\n    ></sky-inline-delete>\n  </sky-repeater-item>\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\n"
     },
     {
-      "fileName": "description-list-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule, SkyHelpInlineModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
+      "fileName": "inline-delete-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineDeleteModule } from '@skyux/layout';\n\nimport { InlineDeleteDemoComponent } from './inline-delete-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyIconModule, SkyInlineDeleteModule],\n  declarations: [InlineDeleteDemoComponent],\n  exports: [InlineDeleteDemoComponent],\n})\nexport class InlineDeleteDemoModule {}\n"
     },
     {
-      "fileName": "description-list-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.component.html",
-      "rawContents": "<sky-description-list mode=\"horizontal\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n      <sky-help-inline\n        class=\"sky-control-help\"\n        (actionClick)=\"onActionClick()\"\n      ></sky-help-inline>\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
+      "fileName": "inline-delete-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-inline-delete-demo',\n  templateUrl: './inline-delete-demo.component.html',\n  styleUrls: ['./inline-delete-demo.component.scss'],\n})\nexport class InlineDeleteDemoComponent {\n  public deleting = false;\n\n  public pending = false;\n\n  public deleteItem(): void {\n    this.deleting = true;\n  }\n\n  public onCancelTriggered(): void {\n    this.deleting = false;\n  }\n\n  public onDeleteTriggered(): void {\n    setTimeout(() => {\n      this.pending = false;\n      this.deleting = false;\n\n      alert(\n        'Custom element deletion was triggered. In a real scenario the item would be removed. Item was not removed just for demo purposes.'\n      );\n    }, 3000);\n\n    this.pending = true;\n  }\n}\n"
     },
     {
-      "fileName": "description-list-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string }[] = [\n    {\n      term: 'College',\n      description: 'Humanities and Social Sciences',\n    },\n    {\n      term: 'Department',\n      description: 'Anthropology',\n    },\n    {\n      term: 'Advisor',\n      description: 'Cathy Green',\n    },\n    {\n      term: 'Class year',\n      description: '2024',\n    },\n  ];\n\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
+      "fileName": "inline-delete-demo.component.scss",
+      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.component.scss",
+      "rawContents": "#inline-delete-container {\n  padding: 15px;\n  background-color: white;\n  border: black solid 1px;\n  height: 400px;\n  width: 400px;\n  position: relative;\n}\n\n#inline-delete-trigger {\n  position: absolute;\n  bottom: 10px;\n  left: 0;\n  width: 100%;\n}\n"
     },
     {
-      "fileName": "description-list-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule, SkyHelpInlineModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
+      "fileName": "inline-delete-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.component.html",
+      "rawContents": "<div id=\"inline-delete-container\">\n  <strong>Custom content</strong>\n  <div>\n    <button\n      class=\"sky-btn sky-btn-danger\"\n      id=\"inline-delete-trigger\"\n      type=\"button\"\n      (click)=\"deleteItem()\"\n    >\n      <sky-icon icon=\"trash\"></sky-icon>\n    </button>\n  </div>\n  <sky-inline-delete\n    *ngIf=\"deleting\"\n    [pending]=\"pending\"\n    (cancelTriggered)=\"onCancelTriggered()\"\n    (deleteTriggered)=\"onDeleteTriggered()\"\n  ></sky-inline-delete>\n</div>\n"
     },
     {
-      "fileName": "description-list-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/long-description/description-list-demo.component.html",
-      "rawContents": "<sky-description-list mode=\"longDescription\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
+      "fileName": "format-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFormatModule } from '@skyux/layout';\n\nimport { FormatDemoComponent } from './format-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyFormatModule],\n  declarations: [FormatDemoComponent],\n  exports: [FormatDemoComponent],\n})\nexport class FormatDemoModule {}\n"
     },
     {
-      "fileName": "description-list-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/long-description/description-list-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string }[] = [\n    {\n      term: 'Good Health and Well-being',\n      description:\n        'Ensure healthy lives and promote well-being for all at all ages.',\n    },\n    {\n      term: 'Quality Education',\n      description:\n        'Ensure inclusive and equitable quality education and promote lifelong learning opportunities for all.',\n    },\n    {\n      term: 'Gender Equity',\n      description: 'Achieve gender equality and empower all women and girls.',\n    },\n  ];\n}\n"
+      "fileName": "format-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-format-demo',\n  templateUrl: './format-demo.component.html',\n  styleUrls: ['./format-demo.component.scss'],\n})\nexport class FormatDemoComponent {}\n"
     },
     {
-      "fileName": "description-list-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/long-description/description-list-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
+      "fileName": "format-demo.component.scss",
+      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.component.scss",
+      "rawContents": ".number-large {\n  font-size: 18px;\n}\n\n.number-medium {\n  font-size: 16px;\n}\n"
     },
     {
-      "fileName": "description-list-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/vertical/description-list-demo.component.html",
-      "rawContents": "<sky-description-list mode=\"vertical\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
+      "fileName": "format-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.component.html",
+      "rawContents": "<sky-format\n  text=\"{0} is an important number. {1} is important, too, but not as important as {0}.\"\n  [args]=\"[value1, value2]\"\n></sky-format>\n\n<ng-template #value1>\n  <strong class=\"number-large\">39,210</strong>\n</ng-template>\n\n<ng-template #value2>\n  <strong class=\"number-medium\">78</strong>\n</ng-template>\n"
     },
     {
-      "fileName": "description-list-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/vertical/description-list-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string }[] = [\n    {\n      term: 'College',\n      description: 'Humanities and Social Sciences',\n    },\n    {\n      term: 'Department',\n      description: 'Anthropology',\n    },\n    {\n      term: 'Advisor',\n      description: 'Cathy Green',\n    },\n    {\n      term: 'Class year',\n      description: '2024',\n    },\n  ];\n}\n"
+      "fileName": "fluid-grid-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/fluid-grid/fluid-grid-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFluidGridModule } from '@skyux/layout';\n\nimport { FluidGridDemoComponent } from './fluid-grid-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyFluidGridModule],\n  declarations: [FluidGridDemoComponent],\n  exports: [FluidGridDemoComponent],\n})\nexport class FluidGridDemoModule {}\n"
     },
     {
-      "fileName": "description-list-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/description-list/vertical/description-list-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
+      "fileName": "fluid-grid-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/fluid-grid/fluid-grid-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-fluid-grid-demo',\n  templateUrl: './fluid-grid-demo.component.html',\n  styles: [\n    `\n      .highlight-columns .sky-column {\n        background-color: #97eced;\n        border: 1px solid #56e0e1;\n        overflow-wrap: break-word;\n      }\n    `,\n  ],\n})\nexport class FluidGridDemoComponent {}\n"
     },
     {
       "fileName": "fluid-grid-demo.component.html",
@@ -9932,194 +9932,194 @@
       "rawContents": "<div class=\"highlight-columns\">\n  <sky-fluid-grid>\n    <sky-row>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n      <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n      <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n      <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n      <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n      <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n      <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n      <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n      <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n      <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n      <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"5\"> [screenSmall]=\"5\" </sky-column>\n      <sky-column [screenSmall]=\"7\"> [screenSmall]=\"7\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n      <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"8\"> [screenSmall]=\"8\" </sky-column>\n      <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"9\"> [screenSmall]=\"9\" </sky-column>\n      <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"10\"> [screenSmall]=\"10\" </sky-column>\n      <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column [screenSmall]=\"11\"> [screenSmall]=\"11\" </sky-column>\n      <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n    </sky-row>\n\n    <sky-row>\n      <sky-column\n        [screenXSmall]=\"6\"\n        [screenSmall]=\"8\"\n        [screenMedium]=\"9\"\n        [screenLarge]=\"10\"\n      >\n        [screenXSmall]=\"6\" [screenSmall]=\"8\" [screenMedium]=\"9\"\n        [screenLarge]=\"10\"\n      </sky-column>\n      <sky-column\n        [screenXSmall]=\"6\"\n        [screenSmall]=\"4\"\n        [screenMedium]=\"3\"\n        [screenLarge]=\"2\"\n      >\n        [screenXSmall]=\"6\" [screenSmall]=\"4\" [screenMedium]=\"3\"\n        [screenLarge]=\"2\"\n      </sky-column>\n    </sky-row>\n\n    <sky-row [reverseColumnOrder]=\"true\">\n      <sky-column [screenSmall]=\"4\"> First column </sky-column>\n      <sky-column [screenSmall]=\"4\"> Second column </sky-column>\n      <sky-column [screenSmall]=\"4\"> Third column </sky-column>\n    </sky-row>\n  </sky-fluid-grid>\n</div>\n"
     },
     {
-      "fileName": "fluid-grid-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/fluid-grid/fluid-grid-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-fluid-grid-demo',\n  templateUrl: './fluid-grid-demo.component.html',\n  styles: [\n    `\n      .highlight-columns .sky-column {\n        background-color: #97eced;\n        border: 1px solid #56e0e1;\n        overflow-wrap: break-word;\n      }\n    `,\n  ],\n})\nexport class FluidGridDemoComponent {}\n"
+      "fileName": "description-list-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/vertical/description-list-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
     },
     {
-      "fileName": "fluid-grid-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/fluid-grid/fluid-grid-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFluidGridModule } from '@skyux/layout';\n\nimport { FluidGridDemoComponent } from './fluid-grid-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyFluidGridModule],\n  declarations: [FluidGridDemoComponent],\n  exports: [FluidGridDemoComponent],\n})\nexport class FluidGridDemoModule {}\n"
+      "fileName": "description-list-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/vertical/description-list-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string }[] = [\n    {\n      term: 'College',\n      description: 'Humanities and Social Sciences',\n    },\n    {\n      term: 'Department',\n      description: 'Anthropology',\n    },\n    {\n      term: 'Advisor',\n      description: 'Cathy Green',\n    },\n    {\n      term: 'Class year',\n      description: '2024',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "format-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.component.html",
-      "rawContents": "<sky-format\n  text=\"{0} is an important number. {1} is important, too, but not as important as {0}.\"\n  [args]=\"[value1, value2]\"\n></sky-format>\n\n<ng-template #value1>\n  <strong class=\"number-large\">39,210</strong>\n</ng-template>\n\n<ng-template #value2>\n  <strong class=\"number-medium\">78</strong>\n</ng-template>\n"
+      "fileName": "description-list-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/vertical/description-list-demo.component.html",
+      "rawContents": "<sky-description-list mode=\"vertical\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
     },
     {
-      "fileName": "format-demo.component.scss",
-      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.component.scss",
-      "rawContents": ".number-large {\n  font-size: 18px;\n}\n\n.number-medium {\n  font-size: 16px;\n}\n"
+      "fileName": "description-list-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/long-description/description-list-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
     },
     {
-      "fileName": "format-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-format-demo',\n  templateUrl: './format-demo.component.html',\n  styleUrls: ['./format-demo.component.scss'],\n})\nexport class FormatDemoComponent {}\n"
+      "fileName": "description-list-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/long-description/description-list-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string }[] = [\n    {\n      term: 'Good Health and Well-being',\n      description:\n        'Ensure healthy lives and promote well-being for all at all ages.',\n    },\n    {\n      term: 'Quality Education',\n      description:\n        'Ensure inclusive and equitable quality education and promote lifelong learning opportunities for all.',\n    },\n    {\n      term: 'Gender Equity',\n      description: 'Achieve gender equality and empower all women and girls.',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "format-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/format/format-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFormatModule } from '@skyux/layout';\n\nimport { FormatDemoComponent } from './format-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyFormatModule],\n  declarations: [FormatDemoComponent],\n  exports: [FormatDemoComponent],\n})\nexport class FormatDemoModule {}\n"
+      "fileName": "description-list-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/long-description/description-list-demo.component.html",
+      "rawContents": "<sky-description-list mode=\"longDescription\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
     },
     {
-      "fileName": "inline-delete-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.component.html",
-      "rawContents": "<div id=\"inline-delete-container\">\n  <strong>Custom content</strong>\n  <div>\n    <button\n      class=\"sky-btn sky-btn-danger\"\n      id=\"inline-delete-trigger\"\n      type=\"button\"\n      (click)=\"deleteItem()\"\n    >\n      <sky-icon icon=\"trash\"></sky-icon>\n    </button>\n  </div>\n  <sky-inline-delete\n    *ngIf=\"deleting\"\n    [pending]=\"pending\"\n    (cancelTriggered)=\"onCancelTriggered()\"\n    (deleteTriggered)=\"onDeleteTriggered()\"\n  ></sky-inline-delete>\n</div>\n"
+      "fileName": "description-list-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule, SkyHelpInlineModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
     },
     {
-      "fileName": "inline-delete-demo.component.scss",
-      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.component.scss",
-      "rawContents": "#inline-delete-container {\n  padding: 15px;\n  background-color: white;\n  border: black solid 1px;\n  height: 400px;\n  width: 400px;\n  position: relative;\n}\n\n#inline-delete-trigger {\n  position: absolute;\n  bottom: 10px;\n  left: 0;\n  width: 100%;\n}\n"
+      "fileName": "description-list-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string }[] = [\n    {\n      term: 'College',\n      description: 'Humanities and Social Sciences',\n    },\n    {\n      term: 'Department',\n      description: 'Anthropology',\n    },\n    {\n      term: 'Advisor',\n      description: 'Cathy Green',\n    },\n    {\n      term: 'Class year',\n      description: '2024',\n    },\n  ];\n\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
     },
     {
-      "fileName": "inline-delete-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-inline-delete-demo',\n  templateUrl: './inline-delete-demo.component.html',\n  styleUrls: ['./inline-delete-demo.component.scss'],\n})\nexport class InlineDeleteDemoComponent {\n  public deleting = false;\n\n  public pending = false;\n\n  public deleteItem(): void {\n    this.deleting = true;\n  }\n\n  public onCancelTriggered(): void {\n    this.deleting = false;\n  }\n\n  public onDeleteTriggered(): void {\n    setTimeout(() => {\n      this.pending = false;\n      this.deleting = false;\n\n      alert(\n        'Custom element deletion was triggered. In a real scenario the item would be removed. Item was not removed just for demo purposes.'\n      );\n    }, 3000);\n\n    this.pending = true;\n  }\n}\n"
+      "fileName": "description-list-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.component.html",
+      "rawContents": "<sky-description-list mode=\"horizontal\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n      <sky-help-inline\n        class=\"sky-control-help\"\n        (actionClick)=\"onActionClick()\"\n      ></sky-help-inline>\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
     },
     {
-      "fileName": "inline-delete-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/inline-delete/custom/inline-delete-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineDeleteModule } from '@skyux/layout';\n\nimport { InlineDeleteDemoComponent } from './inline-delete-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyIconModule, SkyInlineDeleteModule],\n  declarations: [InlineDeleteDemoComponent],\n  exports: [InlineDeleteDemoComponent],\n})\nexport class InlineDeleteDemoModule {}\n"
+      "fileName": "description-list-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDescriptionListModule, SkyHelpInlineModule],\n  declarations: [DescriptionListDemoComponent],\n  exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
     },
     {
-      "fileName": "inline-delete-repeater-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/inline-delete/repeater/inline-delete-repeater-demo.component.html",
-      "rawContents": "<sky-repeater style=\"width: 100%\">\n  <sky-repeater-item *ngFor=\"let item of repeaterDemoItems\">\n    <sky-repeater-item-context-menu>\n      <sky-dropdown buttonType=\"context-menu\">\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\n              Delete\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-repeater-item-context-menu>\n    <sky-repeater-item-title class=\"sky-demo-inline-delete-flex\">\n      <div>\n        {{ item.title }}\n      </div>\n      <div>\n        {{ item.cost }}\n      </div>\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      {{ item.description }}\n    </sky-repeater-item-content>\n    <sky-inline-delete\n      *ngIf=\"repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0\"\n      (cancelTriggered)=\"cancelDeletion(item.title)\"\n      (deleteTriggered)=\"deleteItem(item.title)\"\n    ></sky-inline-delete>\n  </sky-repeater-item>\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\n"
+      "fileName": "description-list-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-description-list-demo',\n  templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n  public items: { term: string; description: string; showHelp?: boolean }[] = [\n    {\n      term: 'College',\n      description: 'Humanities and Social Sciences',\n    },\n    {\n      term: 'Department',\n      description: 'Anthropology',\n    },\n    {\n      term: 'Advisor',\n      description: 'Cathy Green',\n      showHelp: true,\n    },\n    {\n      term: 'Class year',\n      description: '2024',\n    },\n  ];\n\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
     },
     {
-      "fileName": "inline-delete-repeater-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/inline-delete/repeater/inline-delete-repeater-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\ninterface InlineRepeaterDemoItem {\n  title: string;\n  cost: string;\n  description: string;\n}\n\n@Component({\n  selector: 'app-inline-delete-repeater-demo',\n  templateUrl: './inline-delete-repeater-demo.component.html',\n})\nexport class InlineDeleteRepeaterDemoComponent {\n  public originalRepeaterDemoItems: InlineRepeaterDemoItem[] = [\n    {\n      title: 'Individual',\n      cost: '$75.00',\n      description: '1 ticket',\n    },\n    {\n      title: 'Foursome',\n      cost: '$250.00',\n      description: '4 tickets',\n    },\n    {\n      title: 'Hole sponsor',\n      cost: '$1,000.00',\n      description: '8 tickets',\n    },\n  ];\n\n  public repeaterDemoItems: InlineRepeaterDemoItem[] =\n    this.originalRepeaterDemoItems;\n\n  public repeaterDemoShownInlineDeletes: string[] = [];\n\n  public showInlineDelete(title: string): void {\n    this.repeaterDemoShownInlineDeletes.push(title);\n  }\n\n  public deleteItem(title: string): void {\n    this.repeaterDemoItems = this.repeaterDemoItems.filter(\n      (demoItem: InlineRepeaterDemoItem) => demoItem.title !== title\n    );\n    this.repeaterDemoShownInlineDeletes =\n      this.repeaterDemoShownInlineDeletes.filter(\n        (demoItem: string) => demoItem !== title\n      );\n  }\n\n  public cancelDeletion(title: string): void {\n    this.repeaterDemoShownInlineDeletes =\n      this.repeaterDemoShownInlineDeletes.filter(\n        (demoItem: string) => demoItem !== title\n      );\n  }\n\n  public onResetClick(): void {\n    this.repeaterDemoItems = this.originalRepeaterDemoItems;\n    this.repeaterDemoShownInlineDeletes = [];\n  }\n}\n"
+      "fileName": "description-list-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.component.html",
+      "rawContents": "<sky-description-list mode=\"horizontal\">\n  <sky-description-list-content *ngFor=\"let item of items\">\n    <sky-description-list-term>\n      {{ item.term }}\n      <sky-help-inline\n        *ngIf=\"item.showHelp\"\n        class=\"sky-control-help\"\n        (actionClick)=\"onActionClick()\"\n      ></sky-help-inline>\n    </sky-description-list-term>\n    <sky-description-list-description>\n      {{ item.description }}\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n"
     },
     {
-      "fileName": "inline-delete-repeater-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/inline-delete/repeater/inline-delete-repeater-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyInlineDeleteModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { InlineDeleteRepeaterDemoComponent } from './inline-delete-repeater-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyDropdownModule,\n    SkyInlineDeleteModule,\n    SkyRepeaterModule,\n  ],\n  declarations: [InlineDeleteRepeaterDemoComponent],\n  exports: [InlineDeleteRepeaterDemoComponent],\n})\nexport class InlineDeleteRepeaterDemoModule {}\n"
+      "fileName": "definition-list-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/definition-list/basic/definition-list-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDefinitionListModule } from '@skyux/layout';\n\nimport { DefinitionListDemoComponent } from './definition-list-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDefinitionListModule],\n  declarations: [DefinitionListDemoComponent],\n  exports: [DefinitionListDemoComponent],\n})\nexport class DefinitionListDemoModule {}\n"
     },
     {
-      "fileName": "page-summary-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/page-summary/basic/page-summary-demo.component.html",
-      "rawContents": "<sky-page-summary>\n  <sky-page-summary-alert *ngIf=\"showAlert\">\n    <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n  </sky-page-summary-alert>\n  <sky-page-summary-image *ngIf=\"showImage\">\n    <sky-avatar [name]=\"name\" [canChange]=\"true\"></sky-avatar>\n  </sky-page-summary-image>\n  <sky-page-summary-title *ngIf=\"showTitle\">\n    {{ name }}\n  </sky-page-summary-title>\n  <sky-page-summary-subtitle *ngIf=\"showSubtitle\">\n    Board member\n  </sky-page-summary-subtitle>\n  <sky-page-summary-status *ngIf=\"showStatus\">\n    <sky-label labelType=\"success\"> Fundraiser </sky-label>\n    <sky-label> Inactive </sky-label>\n  </sky-page-summary-status>\n  <sky-page-summary-content *ngIf=\"showContent\">\n    This is the arbitrary content section. You can display any kind of content\n    to complement the content on a page. We recommend that you display content\n    to support the key tasks of users of users who visit the page. We also\n    recommend that you keep in mind the context of how users will use the\n    content and limit the amount of content to avoid overloading the summary.\n  </sky-page-summary-content>\n  <sky-page-summary-key-info *ngIf=\"showKeyInfo\">\n    <sky-key-info>\n      <sky-key-info-value> $1,500 </sky-key-info-value>\n      <sky-key-info-label> Largest gift </sky-key-info-label>\n    </sky-key-info>\n    <sky-key-info>\n      <sky-key-info-value> 37 </sky-key-info-value>\n      <sky-key-info-label> Total gifts </sky-key-info-label>\n    </sky-key-info>\n  </sky-page-summary-key-info>\n</sky-page-summary>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox [(ngModel)]=\"showTitle\">\n      <sky-checkbox-label>Show title</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showSubtitle\">\n      <sky-checkbox-label> Show subtitle </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showImage\">\n      <sky-checkbox-label> Show image </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showStatus\">\n      <sky-checkbox-label> Show record status </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showKeyInfo\">\n      <sky-checkbox-label> Show key information </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showContent\">\n      <sky-checkbox-label> Show arbitrary content </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showAlert\">\n      <sky-checkbox-label> Show alert </sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n</ul>\n"
+      "fileName": "definition-list-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/definition-list/basic/definition-list-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-definition-list-demo',\n  templateUrl: './definition-list-demo.component.html',\n})\nexport class DefinitionListDemoComponent {\n  public items: { label: string; value?: string }[] = [\n    {\n      label: 'Field 1',\n      value: 'Field 1 value',\n    },\n    {\n      label: 'Field 2',\n      value: 'Field 2 value',\n    },\n    {\n      label: 'Field 3',\n      value: undefined,\n    },\n    {\n      label: 'Field 4',\n      value: 'Field 4 value',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "page-summary-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/page-summary/basic/page-summary-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-page-summary-demo',\n  templateUrl: './page-summary-demo.component.html',\n})\nexport class PageSummaryDemoComponent {\n  public name = 'Robert C. Hernandez';\n\n  public showAlert = true;\n\n  public showContent = true;\n\n  public showImage = true;\n\n  public showKeyInfo = true;\n\n  public showStatus = true;\n\n  public showSubtitle = true;\n\n  public showTitle = true;\n}\n"
+      "fileName": "definition-list-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/definition-list/basic/definition-list-demo.component.html",
+      "rawContents": "<sky-definition-list>\n  <sky-definition-list-heading>\n    Definition list heading\n  </sky-definition-list-heading>\n  <sky-definition-list-content *ngFor=\"let item of items\">\n    <sky-definition-list-label>\n      {{ item.label }}\n    </sky-definition-list-label>\n    <sky-definition-list-value>\n      {{ item.value }}\n    </sky-definition-list-value>\n  </sky-definition-list-content>\n</sky-definition-list>\n"
     },
     {
-      "fileName": "page-summary-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/page-summary/basic/page-summary-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyAvatarModule } from '@skyux/avatar';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport {\n  SkyAlertModule,\n  SkyKeyInfoModule,\n  SkyLabelModule,\n} from '@skyux/indicators';\nimport { SkyPageSummaryModule } from '@skyux/layout';\n\nimport { PageSummaryDemoComponent } from './page-summary-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyPageSummaryModule,\n    SkyAlertModule,\n    SkyAvatarModule,\n    SkyCheckboxModule,\n    SkyLabelModule,\n    SkyKeyInfoModule,\n  ],\n  declarations: [PageSummaryDemoComponent],\n  exports: [PageSummaryDemoComponent],\n})\nexport class PageSummaryDemoModule {}\n"
+      "fileName": "card-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/card/basic/card-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyCardModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { CardDemoComponent } from './card-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyCardModule,\n    SkyCheckboxModule,\n    SkyDropdownModule,\n  ],\n  declarations: [CardDemoComponent],\n  exports: [CardDemoComponent],\n})\nexport class CardDemoModule {}\n"
     },
     {
-      "fileName": "page-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.component.html",
-      "rawContents": "<sky-page layout=\"fit\">\n  <div class=\"layout-fit-demo\">\n    <div class=\"layout-fit-demo-header\">\n      <sky-fluid-grid>\n        <sky-row>\n          <sky-column>\n            <h1>Fit layout demo</h1>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column>\n            <p class=\"sky-margin-stacked-xl\">\n              Elements in a page with a layout of \"fit\" can be absolutely\n              positioned inside it. This is especially powerful when combined\n              with content that uses\n              <a href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox\"\n                >CSS flexbox</a\n              >. This example uses flexbox to display a header with a variable\n              height and content that fills the rest of the available viewport.\n            </p>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </div>\n    <div class=\"layout-fit-demo-content\">\n      <div class=\"anchored-item anchored-item-left\">Left</div>\n      <div class=\"anchored-item anchored-item-top\">Top</div>\n      <div class=\"anchored-item anchored-item-right\">Right</div>\n      <div class=\"anchored-item anchored-item-bottom\">Bottom</div>\n      <div class=\"anchored-item anchored-item-center\">Center</div>\n    </div>\n  </div>\n</sky-page>\n"
+      "fileName": "card-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/card/basic/card-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-card-demo',\n  templateUrl: './card-demo.component.html',\n})\nexport class CardDemoComponent {\n  public showAction = true;\n\n  public showCheckbox = true;\n\n  public showContent = true;\n\n  public showTitle = true;\n\n  public triggerAlert(): void {\n    alert('Action clicked!');\n  }\n}\n"
     },
     {
-      "fileName": "page-demo.component.scss",
-      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.component.scss",
-      "rawContents": ".layout-fit-demo {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  &-header {\n    flex-grow: 0;\n  }\n\n  &-content {\n    background-color: var(--sky-background-color-info-light);\n    flex-grow: 1;\n    position: relative;\n  }\n}\n\n.anchored-item {\n  position: absolute;\n  padding: var(--sky-padding-even-md);\n\n  &-left {\n    left: 0;\n    top: 50%;\n  }\n\n  &-top {\n    top: 0;\n    left: 50%;\n  }\n\n  &-right {\n    top: 50%;\n    right: 0;\n  }\n\n  &-bottom {\n    bottom: 0;\n    left: 50%;\n  }\n\n  &-center {\n    top: 50%;\n    left: 50%;\n  }\n}\n"
+      "fileName": "card-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/card/basic/card-demo.component.html",
+      "rawContents": "<sky-card [selectable]=\"showCheckbox\">\n  <sky-card-title *ngIf=\"showTitle\"> Large card </sky-card-title>\n  <sky-card-content *ngIf=\"showContent\">\n    This card demonstrates the amount of space that is available for a card that\n    uses the default large size. If the content does not require this much\n    space, you can set the card size to small. The type of content to display in\n    the body of a card varies based on what the card represents and whether it\n    prompts users to action.\n  </sky-card-content>\n  <sky-card-actions *ngIf=\"showAction\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"triggerAlert()\"\n    >\n      Action\n    </button>\n  </sky-card-actions>\n</sky-card>\n<sky-card size=\"small\" [selectable]=\"showCheckbox\">\n  <sky-card-title *ngIf=\"showTitle\"> Small card </sky-card-title>\n  <sky-card-content *ngIf=\"showContent\">\n    This card demonstrates the reduced amount of space that is available when\n    you set the card size to small.\n  </sky-card-content>\n  <sky-card-actions *ngIf=\"showAction\">\n    <sky-dropdown buttonType=\"context-menu\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <button type=\"button\" (click)=\"triggerAlert()\">Action</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-card-actions>\n</sky-card>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox [(ngModel)]=\"showTitle\">\n      <sky-checkbox-label>Show title</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showContent\">\n      <sky-checkbox-label>Show content</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showAction\">\n      <sky-checkbox-label>Show action</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n  <li>\n    <sky-checkbox [(ngModel)]=\"showCheckbox\">\n      <sky-checkbox-label>Show checkbox</sky-checkbox-label>\n    </sky-checkbox>\n  </li>\n</ul>\n"
     },
     {
-      "fileName": "page-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-page-demo',\n  templateUrl: './page-demo.component.html',\n  styleUrls: ['./page-demo.component.scss'],\n})\nexport class PageDemoComponent {}\n"
+      "fileName": "box-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyBoxModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { BoxDemoComponent } from './box-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyBoxModule, SkyDropdownModule, SkyHelpInlineModule],\n  declarations: [BoxDemoComponent],\n  exports: [BoxDemoComponent],\n})\nexport class BoxDemoModule {}\n"
     },
     {
-      "fileName": "page-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/page/layout-fit/page-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFluidGridModule, SkyPageModule } from '@skyux/layout';\n\nimport { PageDemoComponent } from './page-demo.component';\n\n@NgModule({\n  declarations: [PageDemoComponent],\n  imports: [CommonModule, SkyFluidGridModule, SkyPageModule],\n  exports: [PageDemoComponent],\n})\nexport class PageDemoModule {}\n"
+      "fileName": "box-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-box-demo',\n  templateUrl: './box-demo.component.html',\n})\nexport class BoxDemoComponent {\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
     },
     {
-      "fileName": "text-expand-repeater-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand-repeater/text-expand-repeater-demo.component.html",
-      "rawContents": "<sky-text-expand-repeater [data]=\"repeaterData\" [maxItems]=\"2\">\n</sky-text-expand-repeater>\n"
+      "fileName": "box-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.component.html",
+      "rawContents": "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">Box header</h2>\n    <sky-help-inline\n      class=\"sky-control-help\"\n      (actionClick)=\"onActionClick()\"\n    ></sky-help-inline>\n  </sky-box-header>\n  <sky-box-controls>\n    <sky-dropdown buttonType=\"context-menu\" label=\"Box demo context menu\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 1</button>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 2</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-box-controls>\n  <sky-box-content>\n    <p>Box content</p>\n  </sky-box-content>\n</sky-box>\n"
     },
     {
-      "fileName": "text-expand-repeater-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand-repeater/text-expand-repeater-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-repeater-demo',\n  templateUrl: './text-expand-repeater-demo.component.html',\n})\nexport class TextExpandRepeaterDemoComponent {\n  public repeaterData: string[] = [\n    'Repeater item 1',\n    'Repeater item 2',\n    'Repeater item 3',\n    'Repeater item 4',\n    'Repeater item 5',\n  ];\n}\n"
+      "fileName": "box-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyBoxModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { BoxDemoComponent } from './box-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyBoxModule, SkyDropdownModule],\n  declarations: [BoxDemoComponent],\n  exports: [BoxDemoComponent],\n})\nexport class BoxDemoModule {}\n"
     },
     {
-      "fileName": "text-expand-repeater-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand-repeater/text-expand-repeater-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandRepeaterModule } from '@skyux/layout';\n\nimport { TextExpandRepeaterDemoComponent } from './text-expand-repeater-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandRepeaterModule],\n  declarations: [TextExpandRepeaterDemoComponent],\n  exports: [TextExpandRepeaterDemoComponent],\n})\nexport class TextExpandRepeaterDemoModule {}\n"
+      "fileName": "box-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-box-demo',\n  templateUrl: './box-demo.component.html',\n})\nexport class BoxDemoComponent {}\n"
     },
     {
-      "fileName": "text-expand-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/inline/text-expand-demo.component.html",
-      "rawContents": "<sky-text-expand [text]=\"longText\"> </sky-text-expand>\n"
+      "fileName": "box-demo.component.spec.ts",
+      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyBoxHarness } from '@skyux/layout/testing';\n\nimport { BoxDemoComponent } from './box-demo.component';\nimport { BoxDemoModule } from './box-demo.module';\n\ndescribe('Basic box', async () => {\n  async function setupTest(): Promise<{\n    boxHarness: SkyBoxHarness;\n    fixture: ComponentFixture<BoxDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(BoxDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n    const boxHarness = await loader.getHarness(\n      SkyBoxHarness.with({\n        dataSkyId: 'box-demo',\n      })\n    );\n\n    return { boxHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [BoxDemoModule],\n    });\n  });\n\n  it('should display the correct box', async () => {\n    const { boxHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(boxHarness.getAriaLabel()).toBeResolvedTo('boxDemo');\n  });\n});\n"
     },
     {
-      "fileName": "text-expand-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/inline/text-expand-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-demo',\n  templateUrl: './text-expand-demo.component.html',\n})\nexport class TextExpandDemoComponent {\n  public longText =\n    'The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.';\n}\n"
+      "fileName": "box-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/box/basic/box-demo.component.html",
+      "rawContents": "<sky-box data-sky-id=\"box-demo\" [ariaLabel]=\"'boxDemo'\">\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">Box header</h2>\n  </sky-box-header>\n  <sky-box-controls>\n    <sky-dropdown buttonType=\"context-menu\" label=\"Box demo context menu\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 1</button>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <button type=\"button\">Action 2</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-box-controls>\n  <sky-box-content>\n    <p>Box content</p>\n  </sky-box-content>\n</sky-box>\n"
     },
     {
-      "fileName": "text-expand-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/inline/text-expand-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandModule } from '@skyux/layout';\n\nimport { TextExpandDemoComponent } from './text-expand-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandModule],\n  declarations: [TextExpandDemoComponent],\n  exports: [TextExpandDemoComponent],\n})\nexport class TextExpandDemoModule {}\n"
+      "fileName": "back-to-top-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/back-to-top/repeater/back-to-top-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyBackToTopModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { BackToTopDemoComponent } from './back-to-top-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyBackToTopModule, SkyRepeaterModule, SkyTabsModule],\n  declarations: [BackToTopDemoComponent],\n  exports: [BackToTopDemoComponent],\n})\nexport class BackToTopDemoModule {}\n"
     },
     {
-      "fileName": "text-expand-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/modal/text-expand-demo.component.html",
-      "rawContents": "<sky-text-expand [text]=\"longText\" [maxExpandedLength]=\"100\"> </sky-text-expand>\n"
+      "fileName": "back-to-top-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/back-to-top/repeater/back-to-top-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-back-to-top-demo',\n  templateUrl: './back-to-top-demo.component.html',\n})\nexport class BackToTopDemoComponent {\n  public personList = [\n    {\n      name: 'Barbara Durr',\n      address: '7436 Fieldstone Court',\n    },\n    {\n      name: 'Colton Chamberlain',\n      address: '342 Foster Court',\n    },\n    {\n      name: 'Alva Clifford',\n      address: '657 West Rockville Street',\n    },\n    {\n      name: 'Tonja Sanderson',\n      address: '7004 Third Street',\n    },\n    {\n      name: 'Paulene Baum',\n      address: '9309 Mammoth Street',\n    },\n    {\n      name: 'Jessy Witherspoon',\n      address: '43 Canal Street',\n    },\n    {\n      name: 'Solomon Hurley',\n      address: '667 Wakehurst Circle',\n    },\n    {\n      name: 'Calandra Geer',\n      address: '164 Applegate Drive',\n    },\n    {\n      name: 'Latrice Ashmore',\n      address: '7965 Lake Road',\n    },\n    {\n      name: 'Rod Tomlinson',\n      address: '9664 Newport Drive',\n    },\n    {\n      name: 'Cristen Sizemore',\n      address: '17 Edgefield Street',\n    },\n    {\n      name: 'Kristeen Lunsford',\n      address: '245 Green Lake Street',\n    },\n    {\n      name: 'Jack Lovett',\n      address: '73 Academy Street',\n    },\n    {\n      name: 'Elwood Farris',\n      address: '90 Smoky Hollow Court',\n    },\n    {\n      name: 'Ilene Woo',\n      address: '71 Pumpkin Hill Street',\n    },\n    {\n      name: 'Kanesha Hutto',\n      address: '107 East Cooper Street',\n    },\n    {\n      name: 'Nick Bourne',\n      address: '62 Evergreen Street',\n    },\n    {\n      name: 'Ed Sipes',\n      address: '8824 Hill Street',\n    },\n    {\n      name: 'Wonda Lumpkin',\n      address: '134 North Warren Street',\n    },\n    {\n      name: 'Cheyenne Lightfoot',\n      address: '184 Pierce Avenue',\n    },\n    {\n      name: 'Darcel Lenz',\n      address: '9408 Beechwood Street',\n    },\n    {\n      name: 'Martine Rocha',\n      address: '871 Shadow Brook Street',\n    },\n    {\n      name: 'Cherelle Connell',\n      address: '649 Glenwood Street',\n    },\n    {\n      name: 'Molly Seymour',\n      address: '386 E. George Street',\n    },\n    {\n      name: 'Clarice Overton',\n      address: '16 Manchester Street',\n    },\n    {\n      name: 'Eliza Vanhorn',\n      address: '8232 S. Augusta Street',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "text-expand-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/modal/text-expand-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-demo',\n  templateUrl: './text-expand-demo.component.html',\n})\nexport class TextExpandDemoComponent {\n  public longText =\n    'The text expand component truncates long blocks of text with an ellipsis and a link to expand the text. Users select the link to expand the full text inline unless it exceeds limits on text characters or newline characters. If the text exceeds those limits, then it expands in a modal view instead. The component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.';\n}\n"
+      "fileName": "back-to-top-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/back-to-top/repeater/back-to-top-demo.component.html",
+      "rawContents": "<sky-repeater skyBackToTop>\n  <sky-repeater-item *ngFor=\"let person of personList\">\n    <sky-repeater-item-title>\n      {{ person.name }}\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      {{ person.address }}\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n"
     },
     {
-      "fileName": "text-expand-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/modal/text-expand-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandModule } from '@skyux/layout';\n\nimport { TextExpandDemoComponent } from './text-expand-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandModule],\n  declarations: [TextExpandDemoComponent],\n  exports: [TextExpandDemoComponent],\n})\nexport class TextExpandDemoModule {}\n"
+      "fileName": "person.ts",
+      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/person.ts",
+      "rawContents": "export interface Person {\n  name: string;\n  address: string;\n}\n"
     },
     {
-      "fileName": "text-expand-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/newline/text-expand-demo.component.html",
-      "rawContents": "<sky-text-expand [text]=\"newlinesText\" [truncateNewlines]=\"false\">\n</sky-text-expand>\n"
+      "fileName": "back-to-top-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/back-to-top-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyBackToTopModule } from '@skyux/layout';\nimport { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { BackToTopDemoComponent } from './back-to-top-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyBackToTopModule,\n    SkyInfiniteScrollModule,\n    SkyRepeaterModule,\n    SkyTabsModule,\n  ],\n  declarations: [BackToTopDemoComponent],\n  exports: [BackToTopDemoComponent],\n})\nexport class BackToTopDemoModule {}\n"
     },
     {
-      "fileName": "text-expand-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/newline/text-expand-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-expand-demo',\n  templateUrl: './text-expand-demo.component.html',\n})\nexport class TextExpandDemoComponent {\n  public newlinesText =\n    'The text expand component truncates long blocks of text with an ellipsis and a link to expand the text.\\nUsers select the link to expand the full text inline unless it exceeds limits on text characters or newline characters.\\nIf the text exceeds those limits, then it expands in a modal view instead.\\nThe component does not truncate text that is shorter than a specified threshold, and by default, it removes newline characters from truncated text.';\n}\n"
+      "fileName": "back-to-top-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/back-to-top-demo.component.ts",
+      "rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { Person } from './person';\n\n@Component({\n  selector: 'app-back-to-top-demo',\n  templateUrl: './back-to-top-demo.component.html',\n})\nexport class BackToTopDemoComponent implements OnInit {\n  public hasMore = true;\n\n  public personList: Person[] = [];\n\n  public personDataSet = [\n    {\n      name: 'Barbara Durr',\n      address: '7436 Fieldstone Court',\n    },\n    {\n      name: 'Colton Chamberlain',\n      address: '342 Foster Court',\n    },\n    {\n      name: 'Alva Clifford',\n      address: '657 West Rockville Street',\n    },\n    {\n      name: 'Tonja Sanderson',\n      address: '7004 Third Street',\n    },\n    {\n      name: 'Paulene Baum',\n      address: '9309 Mammoth Street',\n    },\n    {\n      name: 'Jessy Witherspoon',\n      address: '43 Canal Street',\n    },\n    {\n      name: 'Solomon Hurley',\n      address: '667 Wakehurst Circle',\n    },\n    {\n      name: 'Calandra Geer',\n      address: '164 Applegate Drive',\n    },\n    {\n      name: 'Latrice Ashmore',\n      address: '7965 Lake Road',\n    },\n    {\n      name: 'Rod Tomlinson',\n      address: '9664 Newport Drive',\n    },\n    {\n      name: 'Cristen Sizemore',\n      address: '17 Edgefield Street',\n    },\n    {\n      name: 'Kristeen Lunsford',\n      address: '245 Green Lake Street',\n    },\n    {\n      name: 'Jack Lovett',\n      address: '73 Academy Street',\n    },\n    {\n      name: 'Elwood Farris',\n      address: '90 Smoky Hollow Court',\n    },\n    {\n      name: 'Ilene Woo',\n      address: '71 Pumpkin Hill Street',\n    },\n    {\n      name: 'Kanesha Hutto',\n      address: '107 East Cooper Street',\n    },\n    {\n      name: 'Nick Bourne',\n      address: '62 Evergreen Street',\n    },\n    {\n      name: 'Ed Sipes',\n      address: '8824 Hill Street',\n    },\n    {\n      name: 'Wonda Lumpkin',\n      address: '134 North Warren Street',\n    },\n    {\n      name: 'Cheyenne Lightfoot',\n      address: '184 Pierce Avenue',\n    },\n    {\n      name: 'Darcel Lenz',\n      address: '9408 Beechwood Street',\n    },\n    {\n      name: 'Martine Rocha',\n      address: '871 Shadow Brook Street',\n    },\n    {\n      name: 'Cherelle Connell',\n      address: '649 Glenwood Street',\n    },\n    {\n      name: 'Molly Seymour',\n      address: '386 E. George Street',\n    },\n    {\n      name: 'Clarice Overton',\n      address: '16 Manchester Street',\n    },\n    {\n      name: 'Eliza Vanhorn',\n      address: '8232 S. Augusta Street',\n    },\n  ];\n\n  public ngOnInit(): void {\n    this.addData(0, 5);\n  }\n\n  public onScrollEnd(): void {\n    this.addData(this.personList.length, 5);\n  }\n\n  private addData(start: number, rowSize: number): void {\n    if (this.hasMore) {\n      this.mockRemote(start, rowSize).then(\n        (result: { data: Person[]; hasMore: boolean }) => {\n          this.personList = this.personList.concat(result.data);\n          this.hasMore = result.hasMore;\n        }\n      );\n    }\n  }\n\n  /**\n   * Simulate a remote request.\n   */\n  private mockRemote(\n    start: number,\n    rowSize: number\n  ): Promise<{ data: Person[]; hasMore: boolean }> {\n    const data: Person[] = [];\n\n    for (let i = 0; i < rowSize; i++) {\n      if (this.personDataSet[start + i]) {\n        data.push(this.personDataSet[start + i]);\n      }\n    }\n\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        resolve({\n          data,\n          hasMore: this.personList.length < this.personDataSet.length,\n        });\n      }, 1000);\n    });\n  }\n}\n"
     },
     {
-      "fileName": "text-expand-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/text-expand/newline/text-expand-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTextExpandModule } from '@skyux/layout';\n\nimport { TextExpandDemoComponent } from './text-expand-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTextExpandModule],\n  declarations: [TextExpandDemoComponent],\n  exports: [TextExpandDemoComponent],\n})\nexport class TextExpandDemoModule {}\n"
+      "fileName": "back-to-top-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/back-to-top/infinite-scroll/back-to-top-demo.component.html",
+      "rawContents": "<sky-repeater skyBackToTop>\n  <sky-repeater-item *ngFor=\"let person of personList\">\n    <sky-repeater-item-title>\n      {{ person.name }}\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      {{ person.address }}\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\">\n</sky-infinite-scroll>\n"
     },
     {
-      "fileName": "toolbar-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/toolbar/basic/toolbar-demo.component.html",
-      "rawContents": "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 1')\"\n    >\n      Button 1\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 2')\"\n    >\n      Button 2\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-view-actions>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort descending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Expand')\"\n    >\n      <sky-icon icon=\"angle-double-down\"></sky-icon>\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort ascending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Collapse')\"\n    >\n      <sky-icon icon=\"angle-double-up\"></sky-icon>\n    </button>\n  </sky-toolbar-view-actions>\n</sky-toolbar>\n"
+      "fileName": "action-button-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/action-button/permalink/action-button-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyActionButtonModule } from '@skyux/layout';\n\nimport { ActionButtonDemoComponent } from './action-button-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyActionButtonModule],\n  declarations: [ActionButtonDemoComponent],\n  exports: [ActionButtonDemoComponent],\n})\nexport class ActionButtonDemoModule {}\n"
     },
     {
-      "fileName": "toolbar-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/toolbar/basic/toolbar-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-toolbar-demo',\n  templateUrl: './toolbar-demo.component.html',\n})\nexport class ToolbarDemoComponent {\n  public onButtonClicked(buttonText: string): void {\n    alert(buttonText + ' clicked!');\n  }\n}\n"
+      "fileName": "action-button-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/action-button/permalink/action-button-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyActionButtonPermalink } from '@skyux/layout';\n\n@Component({\n  selector: 'app-action-button-demo',\n  templateUrl: './action-button-demo.component.html',\n})\nexport class ActionButtonDemoComponent {\n  public routerlink: SkyActionButtonPermalink = {\n    route: {\n      commands: [],\n      extras: {\n        queryParams: {\n          component: 'MyComponent',\n        },\n      },\n    },\n  };\n\n  public url: SkyActionButtonPermalink = {\n    url: 'https://www.stackblitz.com',\n  };\n}\n"
     },
     {
-      "fileName": "toolbar-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/toolbar/basic/toolbar-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyToolbarModule } from '@skyux/layout';\n\nimport { ToolbarDemoComponent } from './toolbar-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyIconModule, SkyToolbarModule],\n  exports: [ToolbarDemoComponent],\n  declarations: [ToolbarDemoComponent],\n})\nexport class ToolbarDemoModule {}\n"
+      "fileName": "action-button-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/action-button/permalink/action-button-demo.component.html",
+      "rawContents": "<sky-action-button-container>\n  <sky-action-button [permalink]=\"url\">\n    <sky-action-button-icon iconType=\"link\"> </sky-action-button-icon>\n    <sky-action-button-header> Open a link </sky-action-button-header>\n    <sky-action-button-details> Open a link. </sky-action-button-details>\n  </sky-action-button>\n\n  <sky-action-button [permalink]=\"routerlink\">\n    <sky-action-button-icon iconType=\"link\"> </sky-action-button-icon>\n    <sky-action-button-header> Open a router link </sky-action-button-header>\n    <sky-action-button-details> Open a router link. </sky-action-button-details>\n  </sky-action-button>\n</sky-action-button-container>\n"
     },
     {
-      "fileName": "toolbar-demo.component.html",
-      "filePath": "/projects/layout/documentation/code-examples/toolbar/sectioned/toolbar-demo.component.html",
-      "rawContents": "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 1')\"\n      >\n        Button 1\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 2')\"\n      >\n        Button 2\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort descending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Expand')\"\n      >\n        <sky-icon icon=\"angle-double-down\"></sky-icon>\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort ascending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Collapse')\"\n      >\n        <sky-icon icon=\"angle-double-up\"></sky-icon>\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Sort')\"\n      >\n        <sky-icon icon=\"sort\"></sky-icon>\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Filter')\"\n      >\n        <sky-icon icon=\"filter\"></sky-icon>\n      </button>\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n"
+      "fileName": "action-button-demo.module.ts",
+      "filePath": "/projects/layout/documentation/code-examples/action-button/basic/action-button-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyActionButtonModule } from '@skyux/layout';\n\nimport { ActionButtonDemoComponent } from './action-button-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyActionButtonModule],\n  declarations: [ActionButtonDemoComponent],\n  exports: [ActionButtonDemoComponent],\n})\nexport class ActionButtonDemoModule {}\n"
     },
     {
-      "fileName": "toolbar-demo.component.ts",
-      "filePath": "/projects/layout/documentation/code-examples/toolbar/sectioned/toolbar-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-toolbar-demo',\n  templateUrl: './toolbar-demo.component.html',\n})\nexport class ToolbarDemoComponent {\n  public onButtonClicked(buttonText: string): void {\n    alert(buttonText + ' clicked!');\n  }\n}\n"
+      "fileName": "action-button-demo.component.ts",
+      "filePath": "/projects/layout/documentation/code-examples/action-button/basic/action-button-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-action-button-demo',\n  templateUrl: './action-button-demo.component.html',\n})\nexport class ActionButtonDemoComponent {\n  public filterActionClick(): void {\n    alert('Filter action clicked');\n  }\n\n  public openActionClick(): void {\n    alert('Open action clicked');\n  }\n}\n"
     },
     {
-      "fileName": "toolbar-demo.module.ts",
-      "filePath": "/projects/layout/documentation/code-examples/toolbar/sectioned/toolbar-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyToolbarModule } from '@skyux/layout';\n\nimport { ToolbarDemoComponent } from './toolbar-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyIconModule, SkyToolbarModule],\n  exports: [ToolbarDemoComponent],\n  declarations: [ToolbarDemoComponent],\n})\nexport class ToolbarDemoModule {}\n"
+      "fileName": "action-button-demo.component.html",
+      "filePath": "/projects/layout/documentation/code-examples/action-button/basic/action-button-demo.component.html",
+      "rawContents": "<sky-action-button-container>\n  <sky-action-button (actionClick)=\"filterActionClick()\">\n    <sky-action-button-icon iconType=\"filter\"> </sky-action-button-icon>\n    <sky-action-button-header> Build a new list </sky-action-button-header>\n    <sky-action-button-details>\n      Start from scratch and fine-tune with filters.\n    </sky-action-button-details>\n  </sky-action-button>\n\n  <sky-action-button (actionClick)=\"openActionClick()\">\n    <sky-action-button-icon iconType=\"folder-open-o\"> </sky-action-button-icon>\n    <sky-action-button-header> Open a saved list </sky-action-button-header>\n    <sky-action-button-details>\n      Open a list with filters saved in the web view.\n    </sky-action-button-details>\n  </sky-action-button>\n</sky-action-button-container>\n"
     }
   ]
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/layout",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.1",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -43,14 +43,14 @@
     "@angular/forms": "^16.1.7",
     "@angular/platform-browser": "^16.1.7",
     "@angular/router": "^16.1.7",
-    "@skyux-sdk/testing": "9.0.0-alpha.0",
-    "@skyux/core": "9.0.0-alpha.0",
-    "@skyux/forms": "9.0.0-alpha.0",
-    "@skyux/i18n": "9.0.0-alpha.0",
-    "@skyux/indicators": "9.0.0-alpha.0",
-    "@skyux/modals": "9.0.0-alpha.0",
-    "@skyux/router": "9.0.0-alpha.0",
-    "@skyux/theme": "9.0.0-alpha.0"
+    "@skyux-sdk/testing": "9.0.0-alpha.1",
+    "@skyux/core": "9.0.0-alpha.1",
+    "@skyux/forms": "9.0.0-alpha.1",
+    "@skyux/i18n": "9.0.0-alpha.1",
+    "@skyux/indicators": "9.0.0-alpha.1",
+    "@skyux/modals": "9.0.0-alpha.1",
+    "@skyux/router": "9.0.0-alpha.1",
+    "@skyux/theme": "9.0.0-alpha.1"
   },
   "dependencies": {
     "tslib": "^2.5.0"