npm - @covalent/components - Versions diffs - 0.0.0-COVALENT - Mend

@covalent/components 0.0.0-COVALENT

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 (264) hide show

package/.babelrc +10 -0
package/.eslintrc.json +18 -0
package/.storybook/main.js +34 -0
package/.storybook/manager-head.html +62 -0
package/.storybook/manager.js +1 -0
package/.storybook/preview-head.html +20 -0
package/.storybook/preview.js +20 -0
package/README.md +179 -0
package/component-config.json +313 -0
package/index.html +288 -0
package/jest.config.js +18 -0
package/package.json +315 -0
package/project.json +104 -0
package/public/index.scss +1 -0
package/public/reset.css +128 -0
package/src/action-ribbon/_action-ribbon.theme.scss +90 -0
package/src/action-ribbon/action-ribbon-base.ts +164 -0
package/src/action-ribbon/action-ribbon.scss +20 -0
package/src/action-ribbon/action-ribbon.spec.ts +11 -0
package/src/action-ribbon/action-ribbon.stories.js +78 -0
package/src/action-ribbon/action-ribbon.ts +26 -0
package/src/alert/_alert.theme.scss +116 -0
package/src/alert/alert-base.ts +175 -0
package/src/alert/alert.scss +55 -0
package/src/alert/alert.spec.ts +26 -0
package/src/alert/alert.stories.js +76 -0
package/src/alert/alert.ts +26 -0
package/src/app-shell/app-shell.scss +387 -0
package/src/app-shell/app-shell.stories.js +323 -0
package/src/app-shell/app-shell.ts +388 -0
package/src/badge/badge.scss +60 -0
package/src/badge/badge.spec.ts +40 -0
package/src/badge/badge.stories.js +88 -0
package/src/badge/badge.ts +122 -0
package/src/button/Overview.mdx +160 -0
package/src/button/button.scss +28 -0
package/src/button/button.spec.ts +11 -0
package/src/button/button.stories.js +102 -0
package/src/button/button.ts +17 -0
package/src/card/card-base.ts +69 -0
package/src/card/card.scss +45 -0
package/src/card/card.spec.ts +11 -0
package/src/card/card.ts +21 -0
package/src/card/cards.stories.js +40 -0
package/src/checkbox/checkbox.scss +8 -0
package/src/checkbox/checkbox.spec.ts +11 -0
package/src/checkbox/checkbox.stories.js +61 -0
package/src/checkbox/checkbox.ts +18 -0
package/src/chips/chip-base.ts +276 -0
package/src/chips/chip-set-base.ts +184 -0
package/src/chips/chip-set.scss +15 -0
package/src/chips/chip-set.spec.ts +11 -0
package/src/chips/chip-set.ts +27 -0
package/src/chips/chip.scss +40 -0
package/src/chips/chip.spec.ts +11 -0
package/src/chips/chip.ts +26 -0
package/src/chips/chips.stories.js +81 -0
package/src/circular-progress/circular-progress.spec.ts +11 -0
package/src/circular-progress/circular-progress.stories.js +40 -0
package/src/circular-progress/circular-progress.ts +16 -0
package/src/code-editor/code-editor.scss +20 -0
package/src/code-editor/code-editor.spec.ts +11 -0
package/src/code-editor/code-editor.stories.js +44 -0
package/src/code-editor/code-editor.theme.ts +199 -0
package/src/code-editor/code-editor.ts +231 -0
package/src/code-snippet/code-snippet.scss +126 -0
package/src/code-snippet/code-snippet.spec.ts +11 -0
package/src/code-snippet/code-snippet.stories.js +134 -0
package/src/code-snippet/code-snippet.ts +93 -0
package/src/data-table/_data-table.theme.scss +39 -0
package/src/data-table/data-table.stories.js +24 -0
package/src/data-table/data-table.stories.scss +11 -0
package/src/dialog/Overview.mdx +39 -0
package/src/dialog/dialog.scss +17 -0
package/src/dialog/dialog.spec.ts +11 -0
package/src/dialog/dialog.stories.js +89 -0
package/src/dialog/dialog.ts +44 -0
package/src/drawer/drawer.scss +4 -0
package/src/drawer/drawer.spec.ts +11 -0
package/src/drawer/drawer.ts +18 -0
package/src/empty-state/_empty-state.theme.scss +0 -0
package/src/empty-state/empty-state.scss +67 -0
package/src/empty-state/empty-state.spec.ts +11 -0
package/src/empty-state/empty-state.stories.js +117 -0
package/src/empty-state/empty-state.ts +61 -0
package/src/expansion-panel/Overview.mdx +108 -0
package/src/expansion-panel/expansion-panel-incorrect-example.png +0 -0
package/src/expansion-panel/expansion-panel-item.scss +243 -0
package/src/expansion-panel/expansion-panel-item.ts +95 -0
package/src/expansion-panel/expansion-panel.spec.ts +11 -0
package/src/expansion-panel/expansion-panel.stories.js +76 -0
package/src/expansion-panel/expansion-panel.ts +94 -0
package/src/focused-page/focused-page.scss +113 -0
package/src/focused-page/focused-page.spec.ts +11 -0
package/src/focused-page/focused-page.stories.js +167 -0
package/src/focused-page/focused-page.ts +201 -0
package/src/formfield/formfield.scss +8 -0
package/src/formfield/formfield.spec.ts +11 -0
package/src/formfield/formfield.ts +24 -0
package/src/full-screen-dialog/full-screen-dialog.scss +37 -0
package/src/full-screen-dialog/full-screen-dialog.spec.ts +11 -0
package/src/full-screen-dialog/full-screen-dialog.stories.js +172 -0
package/src/full-screen-dialog/full-screen-dialog.ts +84 -0
package/src/icon/_icon-list.ts +316 -0
package/src/icon/icon-demo.scss +25 -0
package/src/icon/icon-demo.ts +37 -0
package/src/icon/icon.spec.ts +11 -0
package/src/icon/icon.stories.js +55 -0
package/src/icon/icon.ts +16 -0
package/src/icon-button/_icon-button.theme.scss +9 -0
package/src/icon-button/icon-button.scss +12 -0
package/src/icon-button/icon-button.spec.ts +11 -0
package/src/icon-button/icon-button.stories.js +24 -0
package/src/icon-button/icon-button.ts +19 -0
package/src/icon-button-toggle/icon-button-toggle.scss +19 -0
package/src/icon-button-toggle/icon-button-toggle.spec.ts +11 -0
package/src/icon-button-toggle/icon-button-toggle.stories.js +32 -0
package/src/icon-button-toggle/icon-button-toggle.ts +50 -0
package/src/icon-checkbox/icon-check-toggle.ts +64 -0
package/src/icon-checkbox/icon-check.spec.ts +11 -0
package/src/icon-checkbox/icon-checkbox.scss +95 -0
package/src/icon-checkbox/icon-checkbox.stories.js +77 -0
package/src/icon-lockup/icon-lockup.scss +47 -0
package/src/icon-lockup/icon-lockup.spec.ts +11 -0
package/src/icon-lockup/icon-lockup.stories.js +93 -0
package/src/icon-lockup/icon-lockup.ts +125 -0
package/src/icon-radio/icon-radio-toggle.ts +43 -0
package/src/icon-radio/icon-radio.scss +63 -0
package/src/icon-radio/icon-radio.spec.ts +11 -0
package/src/icon-radio/icon-radio.stories.js +23 -0
package/src/index.scss +1 -0
package/src/index.ts +57 -0
package/src/linear-progress/linear-progress.scss +4 -0
package/src/linear-progress/linear-progress.spec.ts +11 -0
package/src/linear-progress/linear-progress.stories.js +43 -0
package/src/linear-progress/linear-progress.ts +18 -0
package/src/list/Overview.mdx +91 -0
package/src/list/_list.theme.scss +100 -0
package/src/list/check-list-item.spec.ts +11 -0
package/src/list/check-list-item.ts +25 -0
package/src/list/list-item.scss +56 -0
package/src/list/list-item.spec.ts +11 -0
package/src/list/list-item.ts +31 -0
package/src/list/list.scss +25 -0
package/src/list/list.stories.js +120 -0
package/src/list/list.ts +23 -0
package/src/list/nav-list-item.scss +159 -0
package/src/list/nav-list-item.ts +223 -0
package/src/list/radio-list-item.ts +25 -0
package/src/menu/menu.scss +3 -0
package/src/menu/menu.spec.ts +11 -0
package/src/menu/menu.stories.js +110 -0
package/src/menu/menu.ts +23 -0
package/src/notebook-cell/notebook-cell.scss +185 -0
package/src/notebook-cell/notebook-cell.spec.ts +11 -0
package/src/notebook-cell/notebook-cell.stories.js +87 -0
package/src/notebook-cell/notebook-cell.ts +300 -0
package/src/radio/radio.scss +3 -0
package/src/radio/radio.spec.ts +11 -0
package/src/radio/radio.stories.js +56 -0
package/src/radio/radio.ts +18 -0
package/src/select/select.scss +16 -0
package/src/select/select.spec.ts +11 -0
package/src/select/select.stories.js +57 -0
package/src/select/select.ts +18 -0
package/src/side-sheet/side-sheet.scss +49 -0
package/src/side-sheet/side-sheet.spec.ts +11 -0
package/src/side-sheet/side-sheet.stories.js +96 -0
package/src/side-sheet/side-sheet.ts +37 -0
package/src/skeleton/_skeleton.styles.scss +24 -0
package/src/skeleton/skeleton.stories.js +77 -0
package/src/slider/slider-range.ts +16 -0
package/src/slider/slider.spec.ts +11 -0
package/src/slider/slider.stories.js +54 -0
package/src/slider/slider.ts +16 -0
package/src/snackbar/snackbar.scss +8 -0
package/src/snackbar/snackbar.spec.ts +11 -0
package/src/snackbar/snackbar.stories.js +42 -0
package/src/snackbar/snackbar.ts +18 -0
package/src/status-dialog/status-dialog.scss +204 -0
package/src/status-dialog/status-dialog.spec.ts +48 -0
package/src/status-dialog/status-dialog.stories.js +136 -0
package/src/status-dialog/status-dialog.ts +188 -0
package/src/status-header/_status-header.theme.scss +79 -0
package/src/status-header/status-header-base.ts +42 -0
package/src/status-header/status-header-item.scss +17 -0
package/src/status-header/status-header-item.spec.ts +11 -0
package/src/status-header/status-header-item.ts +32 -0
package/src/status-header/status-header.scss +57 -0
package/src/status-header/status-header.spec.ts +11 -0
package/src/status-header/status-header.stories.js +114 -0
package/src/status-header/status-header.ts +26 -0
package/src/switch/switch.scss +17 -0
package/src/switch/switch.spec.ts +11 -0
package/src/switch/switch.stories.js +41 -0
package/src/switch/switch.ts +18 -0
package/src/tab/Overview.mdx +38 -0
package/src/tab/tab-bar.spec.ts +11 -0
package/src/tab/tab-bar.ts +16 -0
package/src/tab/tab.scss +10 -0
package/src/tab/tab.spec.ts +11 -0
package/src/tab/tab.stories.js +30 -0
package/src/tab/tab.ts +18 -0
package/src/text-lockup/text-lockup.scss +66 -0
package/src/text-lockup/text-lockup.spec.ts +11 -0
package/src/text-lockup/text-lockup.stories.js +67 -0
package/src/text-lockup/text-lockup.ts +55 -0
package/src/textarea/textarea.spec.ts +11 -0
package/src/textarea/textarea.stories.js +39 -0
package/src/textarea/textarea.ts +19 -0
package/src/textfield/textfield.scss +34 -0
package/src/textfield/textfield.spec.ts +11 -0
package/src/textfield/textfield.stories.js +60 -0
package/src/textfield/textfield.ts +25 -0
package/src/theme/_index.scss +46 -0
package/src/theme/prebuilt/dark-theme.scss +17 -0
package/src/theme/prebuilt/light-theme.scss +17 -0
package/src/toolbar/toolbar.scss +37 -0
package/src/toolbar/toolbar.spec.ts +11 -0
package/src/toolbar/toolbar.stories.js +66 -0
package/src/toolbar/toolbar.ts +27 -0
package/src/tooltip/tooltip.scss +16 -0
package/src/tooltip/tooltip.spec.ts +11 -0
package/src/tooltip/tooltip.stories.js +72 -0
package/src/tooltip/tooltip.ts +185 -0
package/src/top-app-bar/top-app-bar-fixed.ts +23 -0
package/src/top-app-bar/top-app-bar.scss +14 -0
package/src/top-app-bar/top-app-bar.spec.ts +11 -0
package/src/top-app-bar/top-app-bar.stories.js +41 -0
package/src/top-app-bar/top-app-bar.ts +23 -0
package/src/tree-list/tree-list-item.scss +96 -0
package/src/tree-list/tree-list-item.spec.ts +11 -0
package/src/tree-list/tree-list-item.ts +87 -0
package/src/tree-list/tree-list.scss +13 -0
package/src/tree-list/tree-list.spec.ts +11 -0
package/src/tree-list/tree-list.stories.js +151 -0
package/src/tree-list/tree-list.ts +53 -0
package/src/typography/typography.scss +45 -0
package/src/typography/typography.spec.ts +11 -0
package/src/typography/typography.stories.js +23 -0
package/src/typography/typography.ts +27 -0
package/stories/Introduction.mdx +47 -0
package/stories/color-use.mdx +509 -0
package/stories/demos/dialog.component.html +187 -0
package/stories/demos/dialog.component.js +57 -0
package/stories/demos/grid.content.html +99 -0
package/stories/demos/lorem-ipsum.content.html +338 -0
package/stories/demos/material-web.content.html +2125 -0
package/stories/demos/table-column-sorting.content.html +92 -0
package/stories/demos/table-pagination.content.html +139 -0
package/stories/demos/table-progress-indicator.content.html +77 -0
package/stories/demos/table-row-selection.content.html +219 -0
package/stories/demos/table.content.html +64 -0
package/stories/demos/top-app-bar.component.js +57 -0
package/stories/guide-representing-state.mdx +282 -0
package/stories/info-and-help.mdx +484 -0
package/stories/item-detail-and-editing.mdx +529 -0
package/stories/markdown-elements.mdx +194 -0
package/stories/writing-and-naming.mdx +157 -0
package/tsconfig.json +34 -0
package/tsconfig.lib.json +17 -0
package/tsconfig.spec.json +14 -0
package/types.d.ts +15 -0
package/vite.config.js +58 -0

package/stories/demos/table-column-sorting.content.html ADDED Viewed

@@ -0,0 +1,92 @@
+<div class="mdc-data-table" style="display: flex">
+  <table class="mdc-data-table__table" aria-label="Dessert calories">
+    <thead>
+      <tr class="mdc-data-table__header-row">
+        <th
+          class="mdc-data-table__header-cell mdc-data-table__header-cell--with-sort"
+          role="columnheader"
+          scope="col"
+          aria-sort="none"
+          data-column-id="dessert"
+        >
+          <div class="mdc-data-table__header-cell-wrapper">
+            <div class="mdc-data-table__header-cell-label">Dessert</div>
+            <cv-icon
+              class="mdc-data-table__sort-icon-button"
+              aria-label="Sort by dessert"
+              aria-describedby="dessert-status-label"
+              >arrow_upward</cv-icon
+            >
+            <div
+              class="mdc-data-table__sort-status-label"
+              aria-hidden="true"
+              id="dessert-status-label"
+            ></div>
+          </div>
+        </th>
+        <th
+          class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort mdc-data-table__header-cell--sorted"
+          role="columnheader"
+          scope="col"
+          aria-sort="ascending"
+          data-column-id="carbs"
+        >
+          <div class="mdc-data-table__header-cell-wrapper">
+            <cv-icon
+              class="mdc-data-table__sort-icon-button"
+              aria-label="Sort by carbs"
+              aria-describedby="carbs-status-label"
+            >
+              arrow_upward
+            </cv-icon>
+            <div class="mdc-data-table__header-cell-label">Carbs (g)</div>
+            <div
+              class="mdc-data-table__sort-status-label"
+              aria-hidden="true"
+              id="carbs-status-label"
+            ></div>
+          </div>
+        </th>
+        <th
+          class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort"
+          role="columnheader"
+          scope="col"
+          aria-sort="none"
+          data-column-id="protein"
+        >
+          <div class="mdc-data-table__header-cell-wrapper">
+            <cv-icon
+              class="mdc-data-table__sort-icon-button"
+              aria-label="Sort by protein"
+              aria-describedby="protein-status-label"
+            >
+              arrow_upward
+            </cv-icon>
+            <div class="mdc-data-table__header-cell-label">Protein (g)</div>
+            <div
+              class="mdc-data-table__sort-status-label"
+              aria-hidden="true"
+              id="protein-status-label"
+            ></div>
+          </div>
+        </th>
+        <th
+          class="mdc-data-table__header-cell"
+          role="columnheader"
+          scope="col"
+          data-column-id="comments"
+        >
+          Comments
+        </th>
+      </tr>
+    </thead>
+    <tbody class="mdc-data-table__content">
+      <tr class="mdc-data-table__row">
+        <td class="mdc-data-table__cell">Frozen yogurt</td>
+        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
+        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
+        <td class="mdc-data-table__cell">Super tasty</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/stories/demos/table-pagination.content.html ADDED Viewed

@@ -0,0 +1,139 @@
+<div class="mdc-data-table" style="display: flex">
+  <div class="mdc-data-table__table-container">
+    <table class="mdc-data-table__table" aria-label="Dessert calories">
+      <thead>
+        <tr class="mdc-data-table__header-row">
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Dessert
+          </th>
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
+            role="columnheader"
+            scope="col"
+          >
+            Carbs (g)
+          </th>
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
+            role="columnheader"
+            scope="col"
+          >
+            Protein (g)
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Comments
+          </th>
+        </tr>
+      </thead>
+      <tbody class="mdc-data-table__content">
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            4.0
+          </td>
+          <td class="mdc-data-table__cell">Super tasty</td>
+        </tr>
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            4.33333333333
+          </td>
+          <td class="mdc-data-table__cell">I like ice cream more</td>
+        </tr>
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Eclair</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            6.0
+          </td>
+          <td class="mdc-data-table__cell">New filing flavor</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="mdc-data-table__pagination">
+    <div class="mdc-data-table__pagination-trailing">
+      <div class="mdc-data-table__pagination-rows-per-page">
+        <div class="mdc-data-table__pagination-rows-per-page-label">
+          Rows per page
+        </div>
+        <div
+          class="mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select"
+        >
+          <div
+            class="mdc-select__anchor"
+            role="button"
+            aria-haspopup="listbox"
+            aria-labelledby="demo-pagination-select"
+            tabindex="0"
+          >
+            <span class="mdc-select__selected-text-container">
+              <span
+                id="demo-pagination-select"
+                class="mdc-select__selected-text"
+                >10</span
+              >
+            </span>
+            <span class="mdc-select__dropdown-icon">
+              <svg
+                class="mdc-select__dropdown-icon-graphic"
+                viewBox="7 10 10 5"
+              >
+                <polygon
+                  class="mdc-select__dropdown-icon-inactive"
+                  stroke="none"
+                  fill-rule="evenodd"
+                  points="7 10 12 15 17 10"
+                ></polygon>
+                <polygon
+                  class="mdc-select__dropdown-icon-active"
+                  stroke="none"
+                  fill-rule="evenodd"
+                  points="7 15 12 10 17 15"
+                ></polygon>
+              </svg>
+            </span>
+            <span class="mdc-notched-outline mdc-notched-outline--notched">
+              <span class="mdc-notched-outline__leading"></span>
+              <span class="mdc-notched-outline__trailing"></span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="mdc-data-table__pagination-navigation">
+        <div class="mdc-data-table__pagination-total">1‑10 of 100</div>
+        <cv-icon
+          class="mdc-data-table__pagination-button"
+          data-first-page="true"
+          disabled
+          >first_page
+        </cv-icon>
+        <cv-icon
+          class="mdc-data-table__pagination-button"
+          data-prev-page="true"
+          disabled
+          >chevron_left
+        </cv-icon>
+        <cv-icon class="mdc-data-table__pagination-button" data-next-page="true"
+          >chevron_right</cv-icon
+        >
+        <cv-icon class="mdc-data-table__pagination-button" data-last-page="true"
+          >last_page</cv-icon
+        >
+      </div>
+    </div>
+  </div>
+</div>

package/stories/demos/table-progress-indicator.content.html ADDED Viewed

@@ -0,0 +1,77 @@
+<div class="mdc-data-table" style="display: flex">
+  <div class="mdc-data-table__table-container">
+    <table class="mdc-data-table__table" aria-label="Dessert calories">
+      <thead>
+        <tr class="mdc-data-table__header-row">
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Dessert
+          </th>
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
+            role="columnheader"
+            scope="col"
+          >
+            Carbs (g)
+          </th>
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
+            role="columnheader"
+            scope="col"
+          >
+            Protein (g)
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Comments
+          </th>
+        </tr>
+      </thead>
+      <tbody class="mdc-data-table__content">
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            4.0
+          </td>
+          <td class="mdc-data-table__cell">Super tasty</td>
+        </tr>
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            4.33333333333
+          </td>
+          <td class="mdc-data-table__cell">I like ice cream more</td>
+        </tr>
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Eclair</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            6.0
+          </td>
+          <td class="mdc-data-table__cell">New filing flavor</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div
+    class="mdc-data-table__progress-indicator"
+    style="display: block; height: 100%"
+  >
+    <div class="mdc-data-table__scrim"></div>
+    <cv-linear-progress
+      indeterminate
+      role="progressbar"
+      aria-label="Data is being loaded..."
+    >
+    </cv-linear-progress>
+  </div>
+</div>

package/stories/demos/table-row-selection.content.html ADDED Viewed

@@ -0,0 +1,219 @@
+<div class="mdc-data-table">
+  <div class="mdc-data-table__table-container">
+    <table class="mdc-data-table__table" aria-label="Dessert calories">
+      <thead>
+        <tr class="mdc-data-table__header-row">
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
+            role="columnheader"
+            scope="col"
+          >
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Signal name
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Status
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Severity
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Stage
+          </th>
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
+            role="columnheader"
+            scope="col"
+          >
+            Time
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Roles
+          </th>
+        </tr>
+      </thead>
+      <tbody class="mdc-data-table__content">
+        <tr data-row-id="u0" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u0">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Medium</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Allison Brie</td>
+        </tr>
+        <tr
+          data-row-id="u1"
+          class="mdc-data-table__row mdc-data-table__row--selected"
+          aria-selected="true"
+        >
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row" checked></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u1">
+            monarch: prod shared ares-managed-features-provider-heavy
+          </th>
+          <td class="mdc-data-table__cell">Offline</td>
+          <td class="mdc-data-table__cell">Huge</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Brie Larson</td>
+        </tr>
+        <tr
+          data-row-id="u2"
+          class="mdc-data-table__row mdc-data-table__row--selected"
+          aria-selected="true"
+        >
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row" checked></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u2">
+            monarch: prod shared ares-managed-features-provider-heavy
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Minor</td>
+          <td class="mdc-data-table__cell">Not triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Jeremy Lake</td>
+        </tr>
+        <tr data-row-id="u3" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u3">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Negligible</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Angelina Cheng</td>
+        </tr>
+        <tr data-row-id="u4" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row" checked></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u4">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Negligible</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Angelina Cheng</td>
+        </tr>
+        <tr data-row-id="u5" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u5">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Negligible</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Angelina Cheng</td>
+        </tr>
+        <tr data-row-id="u6" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u6">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Negligible</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Angelina Cheng</td>
+        </tr>
+        <tr data-row-id="u7" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u7">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Negligible</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Angelina Cheng</td>
+        </tr>
+        <tr data-row-id="u8" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u8">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Negligible</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Angelina Cheng</td>
+        </tr>
+        <tr data-row-id="u9" class="mdc-data-table__row">
+          <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
+            <cv-checkbox aria-label="select row"></cv-checkbox>
+          </td>
+          <th class="mdc-data-table__cell" scope="row" id="u9">
+            Arcus watch slowdown
+          </th>
+          <td class="mdc-data-table__cell">Online</td>
+          <td class="mdc-data-table__cell">Negligible</td>
+          <td class="mdc-data-table__cell">Triaged</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            0:33
+          </td>
+          <td class="mdc-data-table__cell">Angelina Cheng</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/stories/demos/table.content.html ADDED Viewed

@@ -0,0 +1,64 @@
+<div class="mdc-data-table" style="display: flex" style="display: flex">
+  <div class="mdc-data-table__table-container">
+    <table class="mdc-data-table__table" aria-label="Dessert calories">
+      <thead>
+        <tr class="mdc-data-table__header-row">
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Dessert
+          </th>
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
+            role="columnheader"
+            scope="col"
+          >
+            Carbs (g)
+          </th>
+          <th
+            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
+            role="columnheader"
+            scope="col"
+          >
+            Protein (g)
+          </th>
+          <th
+            class="mdc-data-table__header-cell"
+            role="columnheader"
+            scope="col"
+          >
+            Comments
+          </th>
+        </tr>
+      </thead>
+      <tbody class="mdc-data-table__content">
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            4.0
+          </td>
+          <td class="mdc-data-table__cell">Super tasty</td>
+        </tr>
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            4.33333333333
+          </td>
+          <td class="mdc-data-table__cell">I like ice cream more</td>
+        </tr>
+        <tr class="mdc-data-table__row">
+          <th class="mdc-data-table__cell" scope="row">Eclair</th>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
+          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
+            6.0
+          </td>
+          <td class="mdc-data-table__cell">New filing flavor</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/stories/demos/top-app-bar.component.js ADDED Viewed

@@ -0,0 +1,57 @@
+import '../../src/icon-button/icon-button';
+import '../../src/button/button';
+// Example Content
+import loremIpsumContent from './lorem-ipsum.content.html?raw';
+import tableContent from './table.content.html?raw';
+import tableRowSelectionContent from './table-row-selection.content.html?raw';
+const iconButtons = `
+        <cv-icon-button icon="filter_list" slot="actionItems"></cv-icon-button>
+        <cv-icon-button icon="search" slot="actionItems"></cv-icon-button>
+        <cv-icon-button icon="add" slot="actionItems"></cv-icon-button>`;
+const buttons = `<cv-button label="Buttons" slot="actionItems" ></cv-button>
+    <cv-button outlined label="Buttons" slot="actionItems" ></cv-button>`;
+export default (
+  {
+    title = 'App Bar Title',
+    centerTitle,
+    dense,
+    prominent,
+    showContent,
+    showActionItems,
+  } = {},
+  { parameters } = {}
+) => {
+  const AppBarComponentElem = parameters?.fixed
+    ? 'cv-top-app-bar-fixed'
+    : 'cv-top-app-bar';
+  const actionItems = showActionItems === 'buttons' ? buttons : iconButtons;
+  let content = loremIpsumContent;
+  switch (showContent) {
+    case 'table':
+      content = `<div style="flex-grow: inherit;>${tableContent}</div>`;
+      break;
+    case 'tableWithSelection':
+      content = `<div style="flex-grow: inherit;>${tableRowSelectionContent}</div>`;
+      break;
+    case 'loremIpsum':
+    default:
+      content = loremIpsumContent;
+  }
+  return `
+      <${AppBarComponentElem}
+          ${centerTitle ? 'centerTitle' : null}
+          ${dense ? 'dense' : null}
+          ${prominent ? 'prominent' : null}>
+        <cv-icon-button slot="navigationIcon" icon="menu_open"></cv-icon-button>
+        <div slot="title">${title}</div>
+        ${actionItems}
+       </${AppBarComponentElem}>
+       ${content}
+       `;
+};