npm - @universal-material/web - Versions diffs - 3.0.8 → 3.0.10 - Mend

@universal-material/web 3.0.8 → 3.0.10

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

package/.editorconfig +8 -0
package/.eleventy.cjs +21 -0
package/.eslintignore +6 -0
package/.eslintrc.json +98 -0
package/.prettierrc.json +7 -0
package/.vscode/extensions.json +9 -0
package/CHANGELOG.md +98 -0
package/LICENSE +28 -0
package/docs/.nojekyll +0 -0
package/docs/api/index.html +149 -0
package/docs/docs.css +185 -0
package/docs/examples/index.html +75 -0
package/docs/examples/name-property/index.html +65 -0
package/docs/index.html +75 -0
package/docs/install/index.html +53 -0
package/docs/prism-okaidia.css +123 -0
package/docs/src/_api-section.pug +27 -0
package/docs/src/_layout.pug +182 -0
package/docs/src/components/button-set/alignment.html +29 -0
package/docs/src/components/button-set/stack.html +5 -0
package/docs/src/components/button-set/usage.html +35 -0
package/docs/src/components/button-set.pug +16 -0
package/docs/src/components/cards/card-media.html +39 -0
package/docs/src/components/cards/card-with-actions.html +38 -0
package/docs/src/components/cards/simple-card.html +3 -0
package/docs/src/components/cards.pug +15 -0
package/docs/src/components/checkbox/usage.html +33 -0
package/docs/src/components/checkbox.pug +7 -0
package/docs/src/components/chips/chip-input.html +73 -0
package/docs/src/components/chips/default-chips.html +25 -0
package/docs/src/components/chips/elevated-chips.html +25 -0
package/docs/src/components/chips/selected-chips.html +50 -0
package/docs/src/components/chips.pug +16 -0
package/docs/src/components/common-buttons/anchor-buttons.html +6 -0
package/docs/src/components/common-buttons/buttons-icons.html +24 -0
package/docs/src/components/common-buttons/buttons-trailing-icons.html +25 -0
package/docs/src/components/common-buttons/buttons-variants.html +6 -0
package/docs/src/components/common-buttons/filled-colors.html +4 -0
package/docs/src/components/common-buttons.pug +22 -0
package/docs/src/components/data-tables/simple-table.html +47 -0
package/docs/src/components/data-tables/table-footer.html +59 -0
package/docs/src/components/data-tables/table-header.html +43 -0
package/docs/src/components/data-tables.pug +15 -0
package/docs/src/components/datepicker.pug +133 -0
package/docs/src/components/dialogs/example.html +44 -0
package/docs/src/components/dialogs.pug +19 -0
package/docs/src/components/dividers/no-margin.html +7 -0
package/docs/src/components/dividers/usage.html +7 -0
package/docs/src/components/dividers.pug +13 -0
package/docs/src/components/dropdown-menus/down-end.html +10 -0
package/docs/src/components/dropdown-menus/down-left.html +10 -0
package/docs/src/components/dropdown-menus/down-right.html +10 -0
package/docs/src/components/dropdown-menus/down-start.html +10 -0
package/docs/src/components/dropdown-menus/down.html +10 -0
package/docs/src/components/dropdown-menus/up-end.html +10 -0
package/docs/src/components/dropdown-menus/up-left.html +10 -0
package/docs/src/components/dropdown-menus/up-right.html +10 -0
package/docs/src/components/dropdown-menus/up-start.html +10 -0
package/docs/src/components/dropdown-menus/up.html +10 -0
package/docs/src/components/expansion-panel.pug +33 -0
package/docs/src/components/fab/button-colors.html +18 -0
package/docs/src/components/fab/button-sizes.html +11 -0
package/docs/src/components/fab/extended-buttons.html +18 -0
package/docs/src/components/fab/floating-action-area.html +5 -0
package/docs/src/components/fab/floating-menu.html +10 -0
package/docs/src/components/fab/lowered-buttons.html +6 -0
package/docs/src/components/fab.pug +25 -0
package/docs/src/components/icon-buttons/anchor-buttons.html +15 -0
package/docs/src/components/icon-buttons/buttons-variants.html +15 -0
package/docs/src/components/icon-buttons/toggle-buttons-manual.html +44 -0
package/docs/src/components/icon-buttons/toggle-buttons.html +48 -0
package/docs/src/components/icon-buttons.pug +18 -0
package/docs/src/components/lists/list-avatars.html +14 -0
package/docs/src/components/lists/list-custom-dividers.html +23 -0
package/docs/src/components/lists/list-dividers.html +17 -0
package/docs/src/components/lists/list-dynamic.html +26 -0
package/docs/src/components/lists/list-hover.html +17 -0
package/docs/src/components/lists/list-icons.html +17 -0
package/docs/src/components/lists/list-indexed.html +123 -0
package/docs/src/components/lists/list-sections.html +16 -0
package/docs/src/components/lists/list-three-lines.html +20 -0
package/docs/src/components/lists/list-two-lines.html +20 -0
package/docs/src/components/lists/list-with-action.html +26 -0
package/docs/src/components/lists/list-with-activated-item.html +17 -0
package/docs/src/components/lists/simple-list.html +17 -0
package/docs/src/components/lists.pug +94 -0
package/docs/src/components/menus.pug +55 -0
package/docs/src/components/progress/circular-progress.html +13 -0
package/docs/src/components/progress/determinate-progress.html +3 -0
package/docs/src/components/progress/indeterminate-progress.html +3 -0
package/docs/src/components/progress/progress-color.html +3 -0
package/docs/src/components/progress.pug +18 -0
package/docs/src/components/ripple/usage.html +9 -0
package/docs/src/components/ripple.pug +10 -0
package/docs/src/components/selection-controls/checkbox.html +22 -0
package/docs/src/components/selection-controls/radio-button.html +36 -0
package/docs/src/components/selection-controls/switch.html +12 -0
package/docs/src/components/selection-controls.pug +13 -0
package/docs/src/components/sliders/example.html +42 -0
package/docs/src/components/sliders.pug +7 -0
package/docs/src/components/snackbar/example.html +35 -0
package/docs/src/components/snackbars.pug +21 -0
package/docs/src/components/steppers.pug +57 -0
package/docs/src/components/tabs/example.html +45 -0
package/docs/src/components/tabs.pug +8 -0
package/docs/src/components/text-fields.pug +88 -0
package/docs/src/components/toolbars/simple-toolbar.html +33 -0
package/docs/src/components/toolbars.pug +7 -0
package/docs/src/content/typography/example.html +15 -0
package/docs/src/content/typography.pug +8 -0
package/docs/src/css/docs.scss +189 -0
package/docs/src/index.pug +10 -0
package/docs/src/js/docs.js +161 -0
package/docs/src/js/universal-material.js +757 -0
package/docs/src/js/universal-material.js.map +1 -0
package/docs/src/js/universal-material.min.js +17 -0
package/docs/src/js/universal-material.min.js.map +1 -0
package/docs/src/layout/grid.pug +15 -0
package/docs/src/utilities/background-colors/common-colors.html +7 -0
package/docs/src/utilities/background-colors/theme-colors.html +16 -0
package/docs/src/utilities/background-colors.pug +10 -0
package/docs/src/utilities/text-and-background-colors/common-colors.html +80 -0
package/docs/src/utilities/text-and-background-colors/theme-colors.html +208 -0
package/docs/src/utilities/text-and-background-colors.pug +10 -0
package/docs/src/utilities/text-colors/common-colors.html +12 -0
package/docs/src/utilities/text-colors/emphasis-colors.html +26 -0
package/docs/src/utilities/text-colors/theme-colors.html +37 -0
package/docs/src/utilities/text-colors.pug +13 -0
package/gulpfile.js +225 -0
package/index.html +11 -0
package/package.json +1 -1
package/rollup.config.js +42 -0
package/src/_utils.scss +20 -0
package/src/_variables.scss +68 -0
package/src/button/button-base.styles.scss +75 -0
package/src/button/button-base.ts +147 -0
package/src/button/button-set.styles.scss +35 -0
package/src/button/button-set.ts +33 -0
package/src/button/button.styles.scss +97 -0
package/src/button/button.ts +64 -0
package/src/button/fab.styles.scss +90 -0
package/src/button/fab.ts +55 -0
package/src/button/icon-button.styles.scss +74 -0
package/src/button/icon-button.ts +72 -0
package/src/card/card-content.styles.scss +11 -0
package/src/card/card-content.ts +45 -0
package/src/card/card-media.styles.scss +9 -0
package/src/card/card-media.ts +24 -0
package/src/card/card.styles.scss +27 -0
package/src/card/card.ts +37 -0
package/src/checkbox/checkbox.ts +77 -0
package/src/container/container.styles.scss +39 -0
package/src/container/container.ts +24 -0
package/src/divider/divider.styles.scss +13 -0
package/src/divider/divider.ts +21 -0
package/src/elevation/elevation.styles.scss +31 -0
package/src/elevation/elevation.ts +17 -0
package/{index.js → src/index.ts} +1 -1
package/src/ripple/ripple.styles.scss +80 -0
package/src/ripple/ripple.ts +150 -0
package/src/shared/base.styles.scss +5 -0
package/src/table/table-body.styles.scss +9 -0
package/src/table/table-body.ts +21 -0
package/src/table/table-cell.styles.scss +9 -0
package/src/table/table-cell.ts +21 -0
package/src/table/table-head.styles.scss +9 -0
package/src/table/table-head.ts +21 -0
package/src/table/table-header-cell.styles.scss +10 -0
package/src/table/table-header-cell.ts +21 -0
package/src/table/table-row.styles.scss +3 -0
package/src/table/table-row.ts +21 -0
package/src/table/table.styles.scss +12 -0
package/{table/table.js → src/table/table.ts} +15 -6
package/src/theme/color.ts +6 -0
package/src/theme/css-var-builder.ts +36 -0
package/{theme/index.js → src/theme/index.ts} +0 -1
package/src/theme/neutral-colors.ts +21 -0
package/src/theme/rgb-color.ts +19 -0
package/src/theme/theme-builder.ts +201 -0
package/{theme/theme-color.d.ts → src/theme/theme-color.ts} +3 -2
package/tsconfig.json +36 -0
package/web-dev-server.config.js +25 -0
package/web-test-runner.config.js +120 -0
package/button/button-base.d.ts +0 -43
package/button/button-base.d.ts.map +0 -1
package/button/button-base.js +0 -152
package/button/button-base.js.map +0 -1
package/button/button-base.styles.d.ts +0 -2
package/button/button-base.styles.d.ts.map +0 -1
package/button/button-base.styles.js +0 -75
package/button/button-base.styles.js.map +0 -1
package/button/button-set.d.ts +0 -20
package/button/button-set.d.ts.map +0 -1
package/button/button-set.js +0 -38
package/button/button-set.js.map +0 -1
package/button/button-set.styles.d.ts +0 -2
package/button/button-set.styles.d.ts.map +0 -1
package/button/button-set.styles.js +0 -39
package/button/button-set.styles.js.map +0 -1
package/button/button.d.ts +0 -34
package/button/button.d.ts.map +0 -1
package/button/button.js +0 -64
package/button/button.js.map +0 -1
package/button/button.styles.d.ts +0 -2
package/button/button.styles.d.ts.map +0 -1
package/button/button.styles.js +0 -96
package/button/button.styles.js.map +0 -1
package/button/fab.d.ts +0 -31
package/button/fab.d.ts.map +0 -1
package/button/fab.js +0 -63
package/button/fab.js.map +0 -1
package/button/fab.styles.d.ts +0 -2
package/button/fab.styles.d.ts.map +0 -1
package/button/fab.styles.js +0 -89
package/button/fab.styles.js.map +0 -1
package/button/icon-button.d.ts +0 -35
package/button/icon-button.d.ts.map +0 -1
package/button/icon-button.js +0 -79
package/button/icon-button.js.map +0 -1
package/button/icon-button.styles.d.ts +0 -2
package/button/icon-button.styles.d.ts.map +0 -1
package/button/icon-button.styles.js +0 -70
package/button/icon-button.styles.js.map +0 -1
package/card/card-content.d.ts +0 -13
package/card/card-content.d.ts.map +0 -1
package/card/card-content.js +0 -44
package/card/card-content.js.map +0 -1
package/card/card-content.styles.d.ts +0 -2
package/card/card-content.styles.d.ts.map +0 -1
package/card/card-content.styles.js +0 -15
package/card/card-content.styles.js.map +0 -1
package/card/card-media.d.ts +0 -12
package/card/card-media.d.ts.map +0 -1
package/card/card-media.js +0 -29
package/card/card-media.js.map +0 -1
package/card/card-media.styles.d.ts +0 -2
package/card/card-media.styles.d.ts.map +0 -1
package/card/card-media.styles.js +0 -13
package/card/card-media.styles.js.map +0 -1
package/card/card.d.ts +0 -19
package/card/card.d.ts.map +0 -1
package/card/card.js +0 -40
package/card/card.js.map +0 -1
package/card/card.styles.d.ts +0 -2
package/card/card.styles.d.ts.map +0 -1
package/card/card.styles.js +0 -28
package/card/card.styles.js.map +0 -1
package/checkbox/checkbox.d.ts +0 -16
package/checkbox/checkbox.d.ts.map +0 -1
package/checkbox/checkbox.js +0 -75
package/checkbox/checkbox.js.map +0 -1
package/container/container.d.ts +0 -13
package/container/container.d.ts.map +0 -1
package/container/container.js +0 -23
package/container/container.js.map +0 -1
package/container/container.styles.d.ts +0 -2
package/container/container.styles.d.ts.map +0 -1
package/container/container.styles.js +0 -43
package/container/container.styles.js.map +0 -1
package/custom-elements.json +0 -3706
package/divider/divider.d.ts +0 -14
package/divider/divider.d.ts.map +0 -1
package/divider/divider.js +0 -27
package/divider/divider.js.map +0 -1
package/divider/divider.styles.d.ts +0 -2
package/divider/divider.styles.d.ts.map +0 -1
package/divider/divider.styles.js +0 -15
package/divider/divider.styles.js.map +0 -1
package/elevation/elevation.d.ts +0 -11
package/elevation/elevation.d.ts.map +0 -1
package/elevation/elevation.js +0 -21
package/elevation/elevation.js.map +0 -1
package/elevation/elevation.styles.d.ts +0 -2
package/elevation/elevation.styles.d.ts.map +0 -1
package/elevation/elevation.styles.js +0 -28
package/elevation/elevation.styles.js.map +0 -1
package/index.d.ts +0 -27
package/index.d.ts.map +0 -1
package/index.js.map +0 -1
package/ripple/ripple.d.ts +0 -25
package/ripple/ripple.d.ts.map +0 -1
package/ripple/ripple.js +0 -119
package/ripple/ripple.js.map +0 -1
package/ripple/ripple.styles.d.ts +0 -2
package/ripple/ripple.styles.d.ts.map +0 -1
package/ripple/ripple.styles.js +0 -74
package/ripple/ripple.styles.js.map +0 -1
package/shared/base.styles.d.ts +0 -2
package/shared/base.styles.d.ts.map +0 -1
package/shared/base.styles.js +0 -9
package/shared/base.styles.js.map +0 -1
package/table/table-body.d.ts +0 -11
package/table/table-body.d.ts.map +0 -1
package/table/table-body.js +0 -21
package/table/table-body.js.map +0 -1
package/table/table-body.styles.d.ts +0 -2
package/table/table-body.styles.d.ts.map +0 -1
package/table/table-body.styles.js +0 -11
package/table/table-body.styles.js.map +0 -1
package/table/table-cell.d.ts +0 -11
package/table/table-cell.d.ts.map +0 -1
package/table/table-cell.js +0 -21
package/table/table-cell.js.map +0 -1
package/table/table-cell.styles.d.ts +0 -2
package/table/table-cell.styles.d.ts.map +0 -1
package/table/table-cell.styles.js +0 -11
package/table/table-cell.styles.js.map +0 -1
package/table/table-head.d.ts +0 -11
package/table/table-head.d.ts.map +0 -1
package/table/table-head.js +0 -21
package/table/table-head.js.map +0 -1
package/table/table-head.styles.d.ts +0 -2
package/table/table-head.styles.d.ts.map +0 -1
package/table/table-head.styles.js +0 -11
package/table/table-head.styles.js.map +0 -1
package/table/table-header-cell.d.ts +0 -11
package/table/table-header-cell.d.ts.map +0 -1
package/table/table-header-cell.js +0 -21
package/table/table-header-cell.js.map +0 -1
package/table/table-header-cell.styles.d.ts +0 -2
package/table/table-header-cell.styles.d.ts.map +0 -1
package/table/table-header-cell.styles.js +0 -12
package/table/table-header-cell.styles.js.map +0 -1
package/table/table-row.d.ts +0 -11
package/table/table-row.d.ts.map +0 -1
package/table/table-row.js +0 -21
package/table/table-row.js.map +0 -1
package/table/table-row.styles.d.ts +0 -2
package/table/table-row.styles.d.ts.map +0 -1
package/table/table-row.styles.js +0 -7
package/table/table-row.styles.js.map +0 -1
package/table/table.d.ts +0 -16
package/table/table.d.ts.map +0 -1
package/table/table.js.map +0 -1
package/table/table.styles.d.ts +0 -2
package/table/table.styles.d.ts.map +0 -1
package/table/table.styles.js +0 -16
package/table/table.styles.js.map +0 -1
package/theme/color.d.ts +0 -7
package/theme/color.d.ts.map +0 -1
package/theme/color.js +0 -2
package/theme/color.js.map +0 -1
package/theme/css-var-builder.d.ts +0 -9
package/theme/css-var-builder.d.ts.map +0 -1
package/theme/css-var-builder.js +0 -25
package/theme/css-var-builder.js.map +0 -1
package/theme/index.d.ts +0 -2
package/theme/index.d.ts.map +0 -1
package/theme/index.js.map +0 -1
package/theme/neutral-colors.d.ts +0 -4
package/theme/neutral-colors.d.ts.map +0 -1
package/theme/neutral-colors.js +0 -19
package/theme/neutral-colors.js.map +0 -1
package/theme/rgb-color.d.ts +0 -9
package/theme/rgb-color.d.ts.map +0 -1
package/theme/rgb-color.js +0 -13
package/theme/rgb-color.js.map +0 -1
package/theme/theme-builder.d.ts +0 -27
package/theme/theme-builder.d.ts.map +0 -1
package/theme/theme-builder.js +0 -146
package/theme/theme-builder.js.map +0 -1
package/theme/theme-color.d.ts.map +0 -1
package/theme/theme-color.js +0 -2
package/theme/theme-color.js.map +0 -1

package/docs/src/components/button-set/usage.html ADDED Viewed

@@ -0,0 +1,35 @@
+<u-button-set>
+  <u-fab>
+    <i class="mdi mdi-pencil"></i>
+  </u-fab>
+  <u-button>Filled</u-button>
+  <u-icon-button variant="outlined">
+    <i class="mdi mdi-heart"></i>
+  </u-icon-button>
+</u-button-set>
+<u-button-set align="center">
+  <u-fab>
+    <i class="mdi mdi-pencil"></i>
+  </u-fab>
+  <u-button>Filled</u-button>
+  <u-icon-button variant="outlined">
+    <i class="mdi mdi-heart"></i>
+  </u-icon-button>
+</u-button-set>
+<u-button-set align="start">
+  <u-fab>
+    <i class="mdi mdi-pencil"></i>
+  </u-fab>
+  <u-button>Filled</u-button>
+  <u-icon-button variant="outlined">
+    <i class="mdi mdi-heart"></i>
+  </u-icon-button>
+</u-button-set>

package/docs/src/components/button-set.pug ADDED Viewed

@@ -0,0 +1,16 @@
+extends ../_layout
+block content
+  .u-container
+    +renderTitle('Button set')
+    +renderSection('Usage')
+      include:exampleCode button-set/usage.html
+    +renderSection('Stack')
+      include:exampleCode button-set/stack.html
+    +renderSection('Alignment')
+      include:exampleCode button-set/alignment.html
+    +renderApiSection(apis.buttonSet)

package/docs/src/components/cards/card-media.html ADDED Viewed

@@ -0,0 +1,39 @@
+<div class="example-card-grid-container">
+  <u-card variant="filled">
+    <u-card-media wide class="example-card-media" slot="before-content"></u-card-media>
+    <div class="u-headline-l">Headline</div>
+    <div class="u-headline-s mb-3">Subhead</div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+  <u-card variant="filled">
+    <div class="u-headline-l">Headline</div>
+    <div class="u-headline-s">Subhead</div>
+    <u-card-media wide class="example-card-media mb-3 mt-3"></u-card-media>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+  <u-card variant="filled">
+    <u-card-media class="example-card-media u-dark-mode" slot="before-content">
+      <u-card-content>
+        <div class="u-headline-s">Headline</div>
+        <div class="u-title-m u-text-low-emphasis mb-3">Subhead</div>
+        <u-button-set>
+          <u-button variant="outlined">Action 1</u-button>
+          <u-button>Action 2</u-button>
+        </u-button-set>
+      </u-card-content>
+    </u-card-media>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+  <u-card variant="filled">
+    <u-card-media class="example-card-media u-dark-mode" wide slot="before-content">
+      <u-card-content>
+        <div class="u-headline-s">Headline</div>
+        <div class="u-title-m u-text-low-emphasis mb-3">Subhead</div>
+      </u-card-content>
+    </u-card-media>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+</div>

package/docs/src/components/cards/card-with-actions.html ADDED Viewed

@@ -0,0 +1,38 @@
+<u-card variant="filled">
+  <div class="u-headline-l">Headline</div>
+  <div class="u-headline-s mb-3">Subhead</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  <u-button-set>
+    <u-button variant="text">Cancel</u-button>
+    <u-button variant="text">Ok</u-button>
+  </u-button-set>
+</u-card>
+<u-card variant="filled">
+  <div class="u-headline-l">Headline</div>
+  <div class="u-headline-s mb-3">Subhead</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  <u-divider></u-divider>
+  <u-button-set>
+    <u-icon-button>
+      <i class="mdi mdi-share"></i>
+    </u-icon-button>
+    <u-icon-button>
+      <i class="mdi mdi-star"></i>
+    </u-icon-button>
+  </u-button-set>
+</u-card>
+<u-card variant="filled">
+  <div class="u-headline-l">Headline</div>
+  <div class="u-headline-s mb-3">Subhead</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  <div slot="after-content">
+    <u-divider no-margin></u-divider>
+    <u-card-content>
+      <u-button-set>
+        <u-button variant="text">Expand</u-button>
+      </u-button-set>
+    </u-card-content>
+  </div>
+</u-card>

package/docs/src/components/cards/simple-card.html ADDED Viewed

@@ -0,0 +1,3 @@
+<u-card variant="filled">Filled card</u-card>
+<u-card variant="elevated">Elevated card</u-card>
+<u-card variant="outlined">Outlined card</u-card>

package/docs/src/components/cards.pug ADDED Viewed

@@ -0,0 +1,15 @@
+extends ../_layout
+block content
+  +renderTitle('Cards')
+  +renderSection('Variants')
+    include:exampleCode cards/simple-card.html
+  +renderSection('Card with actions')
+    include:exampleCode cards/card-with-actions.html
+  +renderSection('Card media')
+    include:exampleCode cards/card-media.html
+  +renderApiSection(apis.card)

package/docs/src/components/checkbox/usage.html ADDED Viewed

@@ -0,0 +1,33 @@
+<u-checkbox>
+  <input type="checkbox" id="check-1" disabled>
+</u-checkbox>
+<label for="check-1">Checkbox</label>
+<label>
+  <u-checkbox>
+    <input type="checkbox">
+  </u-checkbox>
+  Checkbox
+</label>
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" disabled />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" disabled checked />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>

package/docs/src/components/checkbox.pug ADDED Viewed

@@ -0,0 +1,7 @@
+extends ../_layout
+block content
+  +renderTitle('Checkbox')
+  +renderSection('Checkbox')
+    include:exampleCode checkbox/usage.html

package/docs/src/components/chips/chip-input.html ADDED Viewed

@@ -0,0 +1,73 @@
+<div class="u-text-field u-text-field-box u-chip-field">
+  <div class="u-text-input">
+    <div class="u-chip-set">
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">Juan</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <div class="u-chip">
+        <div class="u-chip-avatar"></div>
+        <div class="u-chip-label">John Doe</div>
+        <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+      </div>
+      <input class="u-chip-input">
+    </div>
+  </div>
+  <label>To:</label>
+</div>

package/docs/src/components/chips/default-chips.html ADDED Viewed

@@ -0,0 +1,25 @@
+<div class="d-flex">
+  <div class="u-chip">
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip">
+    <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-calendar"></i></div>
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip">
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip">
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip">
+    <div class="u-chip-hover"></div>
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+</div>

package/docs/src/components/chips/elevated-chips.html ADDED Viewed

@@ -0,0 +1,25 @@
+<div class="d-flex">
+  <div class="u-chip u-chip-elevated">
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip u-chip-elevated">
+    <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-calendar"></i></div>
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip u-chip-elevated">
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip u-chip-elevated">
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip u-chip-elevated">
+    <div class="u-chip-hover"></div>
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+</div>

package/docs/src/components/chips/selected-chips.html ADDED Viewed

@@ -0,0 +1,50 @@
+<div class="d-flex">
+  <div class="u-chip u-chip-selected">
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip u-chip-selected">
+    <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-check"></i></div>
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip u-chip-selected">
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip u-chip-selected">
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip u-chip-selected">
+    <div class="u-chip-hover"></div>
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="u-chip u-chip-elevated u-chip-selected">
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip u-chip-elevated u-chip-selected">
+    <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-check"></i></div>
+    <div class="u-chip-label">John Doe</div>
+  </div>
+  <div class="u-chip u-chip-elevated u-chip-selected">
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip u-chip-elevated u-chip-selected">
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+  <div class="u-chip u-chip-elevated u-chip-selected">
+    <div class="u-chip-hover"></div>
+    <div class="u-chip-avatar"></div>
+    <div class="u-chip-label">John Doe</div>
+    <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
+  </div>
+</div>

package/docs/src/components/chips.pug ADDED Viewed

@@ -0,0 +1,16 @@
+extends ../_layout
+block content
+  +renderTitle('Chips')
+  +renderSection('Default chip')
+    include:exampleCode chips/default-chips.html
+  +renderSection('Elevated chip')
+    include:exampleCode chips/elevated-chips.html
+  +renderSection('Selected chip')
+    include:exampleCode chips/selected-chips.html
+  +renderSection('Chip input')
+    include:exampleCode chips/chip-input.html

package/docs/src/components/common-buttons/anchor-buttons.html ADDED Viewed

@@ -0,0 +1,6 @@
+<u-button variant="elevated" href="https://github.com/universal-material/universal-material-web" target="_blank">Elevated</u-button>
+<u-button href="https://github.com/universal-material/universal-material-web" target="_blank">Filled</u-button>
+<u-button variant="tonal" href="https://github.com/universal-material/universal-material-web" target="_blank">Tonal</u-button>
+<u-button variant="outlined" href="https://github.com/universal-material/universal-material-web" target="_blank">Outlined</u-button>
+<u-button variant="text" href="https://github.com/universal-material/universal-material-web" target="_blank">Text</u-button>
+<u-button variant="elevated" href="https://github.com/universal-material/universal-material-web" target="_blank" disabled>Disabled</u-button>

package/docs/src/components/common-buttons/buttons-icons.html ADDED Viewed

@@ -0,0 +1,24 @@
+<u-button variant="elevated">
+  Elevated
+  <i slot="icon" class="mdi mdi-heart"></i>
+</u-button>
+<u-button>
+  Filled
+  <i slot="icon" class="mdi mdi-heart"></i>
+</u-button>
+<u-button variant="tonal">
+  Tonal
+  <i slot="icon" class="mdi mdi-heart"></i>
+</u-button>
+<u-button variant="outlined">
+  Outlined
+  <i slot="icon" class="mdi mdi-heart"></i>
+</u-button>
+<u-button variant="text">
+  Text
+  <i slot="icon" class="mdi mdi-heart"></i>
+</u-button>
+<u-button variant="elevated" disabled>
+  Disabled
+  <i slot="icon" class="mdi mdi-heart"></i>
+</u-button>

package/docs/src/components/common-buttons/buttons-trailing-icons.html ADDED Viewed

@@ -0,0 +1,25 @@
+<u-button variant="elevated" trailing-icon>
+  Elevated
+  <i slot="icon" class="mdi mdi-open-in-new"></i>
+</u-button>
+<u-button trailing-icon>
+  Filled
+  <i slot="icon" class="mdi mdi-open-in-new"></i>
+</u-button>
+<u-button variant="tonal" trailing-icon>
+  Tonal
+  <i slot="icon" class="mdi mdi-open-in-new"></i>
+</u-button>
+<u-button variant="outlined" trailing-icon>
+  Outlined
+  <i slot="icon" class="mdi mdi-open-in-new"></i>
+</u-button>
+<u-button variant="text" trailing-icon>
+  Text
+  <i slot="icon" class="mdi mdi-open-in-new"></i>
+</u-button>
+<u-button variant="elevated" trailing-icon disabled>
+  Disabled
+  <i slot="icon" class="mdi mdi-open-in-new"></i>
+</u-button>

package/docs/src/components/common-buttons/buttons-variants.html ADDED Viewed

@@ -0,0 +1,6 @@
+<u-button variant="elevated">Elevated</u-button>
+<u-button>Filled</u-button>
+<u-button variant="tonal">Tonal</u-button>
+<u-button variant="outlined">Outlined</u-button>
+<u-button variant="text">Text</u-button>
+<u-button variant="elevated" disabled>Disabled</u-button>

package/docs/src/components/common-buttons/filled-colors.html ADDED Viewed

@@ -0,0 +1,4 @@
+<u-button>Filled</u-button>
+<u-button color="secondary">Secondary</u-button>
+<u-button color="tertiary">Tertiary</u-button>
+<u-button color="error">Error</u-button>

package/docs/src/components/common-buttons.pug ADDED Viewed

@@ -0,0 +1,22 @@
+extends ../_layout
+block content
+  +renderTitle('Common buttons')
+  +renderSection('Variants')
+    include:exampleCode common-buttons/buttons-variants.html
+  +renderSection('Filled colors')
+    include:exampleCode common-buttons/filled-colors.html
+  +renderSection('Anchor buttons')
+    include:exampleCode common-buttons/anchor-buttons.html
+  +renderSection('Icons')
+    include:exampleCode common-buttons/buttons-icons.html
+  +renderSection('Trailing icons')
+    include:exampleCode common-buttons/buttons-trailing-icons.html
+  +renderApiSection(apis.button)

package/docs/src/components/data-tables/simple-table.html ADDED Viewed

@@ -0,0 +1,47 @@
+<u-card variant="outlined">
+  <u-table slot="before-content">
+    <u-tbody>
+      <u-tr>
+        <u-th>Nome</u-th>
+        <u-td>John Doe</u-td>
+      </u-tr>
+      <u-tr>
+        <u-th>Email</u-th>
+        <u-td>john.doe@example.com</u-td>
+      </u-tr>
+    </u-tbody>
+  </u-table>
+</u-card>
+<u-card variant="outlined">
+  <u-table slot="before-content">
+    <u-thead class="u-title-s">
+      <u-tr>
+        <u-th>Dessert (100g serving)&#x200E;</u-th>
+        <u-th class="u-text-end">Calories</u-th>
+        <u-th class="u-text-end">Fat (g)&#x200E;</u-th>
+        <u-th class="u-text-end">Carbs(g)&#x200E;</u-th>
+      </u-tr>
+    </u-thead>
+    <u-tbody>
+      <u-tr>
+        <u-td>Frozen yogurt</u-td>
+        <u-td class="u-text-end">159</u-td>
+        <u-td class="u-text-end">6.0</u-td>
+        <u-td class="u-text-end">24</u-td>
+      </u-tr>
+      <u-tr>
+        <u-td>Ice cream sandwich</u-td>
+        <u-td class="u-text-end">237</u-td>
+        <u-td class="u-text-end">9.0</u-td>
+        <u-td class="u-text-end">37</u-td>
+      </u-tr>
+      <u-tr>
+        <u-td>Eclair</u-td>
+        <u-td class="u-text-end">262</u-td>
+        <u-td class="u-text-end">16.0</u-td>
+        <u-td class="u-text-end">24</u-td>
+      </u-tr>
+    </u-tbody>
+  </u-table>
+</u-card>

package/docs/src/components/data-tables/table-footer.html ADDED Viewed

@@ -0,0 +1,59 @@
+<u-card variant="outlined">
+  <div class="u-data-table u-data-table-hover" slot="before-content">
+    <div class="u-data-table-header">
+      <div class="u-toolbar">
+        <div class="u-toolbar-row">
+          <div class="u-toolbar-title">Nutrients</div>
+          <div class="u-toolbar-end">
+            <u-button-set>
+              <u-icon-button disabled>
+                <i class="mdi mdi-phone"></i>
+              </u-icon-button>
+              <u-icon-button>
+                <i class="mdi mdi-dots-vertical"></i>
+              </u-icon-button>
+            </u-button-set>
+            <div class="u-toolbar-actions">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="u-data-table-content" slot="before-content">
+      <table is="u-table">
+        <thead>
+        <tr>
+          <th class="text-nowrap">Dessert (100g serving)&#x200E;</th>
+          <th class="u-text-end">Calories</th>
+          <th class="u-text-end">Fat (g)&#x200E;</th>
+          <th class="u-text-end">Carbs(g)&#x200E;</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td class="text-nowrap">Frozen yogurt</td>
+          <td class="u-text-end">159</td>
+          <td class="u-text-end">6.0</td>
+          <td class="u-text-end">24</td>
+        </tr>
+        <tr>
+          <td class="text-nowrap">Ice cream sandwich</td>
+          <td class="u-text-end">237</td>
+          <td class="u-text-end">9.0</td>
+          <td class="u-text-end">37</td>
+        </tr>
+        <tr>
+          <td class="text-nowrap">Eclair</td>
+          <td class="u-text-end">262</td>
+          <td class="u-text-end">16.0</td>
+          <td class="u-text-end">24</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="u-data-table-footer">
+      <button class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-chevron-left"></i></button>
+      <button class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-chevron-right"></i></button>
+    </div>
+  </div>
+</u-card>

package/docs/src/components/data-tables/table-header.html ADDED Viewed

@@ -0,0 +1,43 @@
+<u-card variant="outlined">
+  <div class="u-toolbar" slot="before-content">
+    <div class="u-toolbar-row">
+      <div class="u-toolbar-title">Nutrients</div>
+      <div class="u-toolbar-end">
+        <div class="u-toolbar-actions">
+          <button class="u-toolbar-action u-icon-btn u-btn-default" disabled="disabled"><i class="u-btn-icon mdi mdi-phone"></i></button>
+          <button class="u-toolbar-action u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-dots-vertical"></i></button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <u-table slot="before-content">
+    <u-thead>
+    <u-tr>
+      <u-th>Dessert (100g serving)&#x200E;</u-th>
+      <u-th class="u-text-end">Calories</u-th>
+      <u-th class="u-text-end">Fat (g)&#x200E;</u-th>
+      <u-th class="u-text-end">Carbs(g)&#x200E;</u-th>
+    </u-tr>
+    </u-thead>
+    <u-tbody>
+    <u-tr>
+      <u-td>Frozen yogurt</u-td>
+      <u-td class="u-text-end">159</u-td>
+      <u-td class="u-text-end">6.0</u-td>
+      <u-td class="u-text-end">24</u-td>
+    </u-tr>
+    <u-tr>
+      <u-td>Ice cream sandwich</u-td>
+      <u-td class="u-text-end">237</u-td>
+      <u-td class="u-text-end">9.0</u-td>
+      <u-td class="u-text-end">37</u-td>
+    </u-tr>
+    <u-tr>
+      <u-td>Eclair</u-td>
+      <u-td class="u-text-end">262</u-td>
+      <u-td class="u-text-end">16.0</u-td>
+      <u-td class="u-text-end">24</u-td>
+    </u-tr>
+    </u-tbody>
+  </u-table>
+</u-card>