@universal-material/web 3.0.8 → 3.0.9

package/docs/src/components/data-tables.pug

@@ -0,0 +1,15 @@
+extends ../_layout
+
+block content
+  +renderTitle('Data tables')
+
+  +renderSection('Simple tables')
+    include:exampleCode data-tables/simple-table.html
+  //
+  //h5.u-headline5.article-title Table header
+  //u-card.example-card(variant="outlined")
+  //  include:exampleCode data-tables/table-header.html
+  //
+  //h5.u-headline5.article-title Table footer
+  //u-card.example-card(variant="outlined")
+  //  include:exampleCode data-tables/table-footer.html

package/docs/src/components/datepicker.pug

@@ -0,0 +1,133 @@
+extends ../_layout
+
+block content
+  +renderTitle('Datepicker')
+
+  .u-datepicker
+    .u-datepicker-header
+      .u-datepicker-header-title Select date
+      .u-datepicker-header-date sex, 21 de mai
+    .u-datepicker-body
+      .u-datepicker-navigation
+        button.mr-auto.u-text-btn(type='button') Jun 2019
+          i.u-btn-icon.u-btn-icon-end.u-dropdown-toggle-icon
+        button.u-icon-btn(type='button')
+          i.u-btn-icon.mdi.mdi-chevron-left
+        button.u-icon-btn(type='button')
+          i.u-btn-icon.mdi.mdi-chevron-right
+      .u-datepicker-content
+        .u-datepicker-weekdays
+          span.u-datepicker-weekday S
+          span.u-datepicker-weekday M
+          span.u-datepicker-weekday T
+          span.u-datepicker-weekday W
+          span.u-datepicker-weekday T
+          span.u-datepicker-weekday F
+          span.u-datepicker-weekday S
+
+        .u-datepicker-week
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 26
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 27
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 28
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 29
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 30
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 31
+          button.u-datepicker-day(type='button') 1
+        .u-datepicker-week
+          button.u-datepicker-day(type='button') 2
+          button.u-datepicker-day(type='button') 3
+          button.u-datepicker-day(type='button') 4
+          button.u-datepicker-day(type='button') 5
+          button.u-datepicker-day(type='button') 6
+          button.u-datepicker-day(type='button') 7
+          button.u-datepicker-day(type='button') 8
+        .u-datepicker-week
+          button.u-datepicker-day(type='button') 9
+          button.u-datepicker-day(type='button') 10
+          button.u-datepicker-day(type='button') 11
+          button.u-datepicker-day(type='button') 12
+          button.u-datepicker-day(type='button') 13
+          button.u-datepicker-day(type='button') 14
+          button.u-datepicker-day(type='button') 15
+        .u-datepicker-week
+          button.u-datepicker-day(type='button') 16
+          button.u-datepicker-day(type='button') 17
+          button.u-datepicker-day(type='button') 18
+          button.u-datepicker-day(type='button') 19
+          button.u-datepicker-day(type='button') 20
+          button.u-datepicker-day(type='button') 21
+          button.u-datepicker-day.u-datepicker-current-day(type='button') 22
+        .u-datepicker-week
+          button.u-datepicker-day(type='button') 23
+          button.u-datepicker-day(type='button') 24
+          button.u-datepicker-day(type='button') 25
+          button.u-datepicker-day(type='button') 26
+          button.u-datepicker-day(type='button') 27
+          button.u-datepicker-day(type='button') 28
+          button.u-datepicker-day(type='button') 29
+        .u-datepicker-week
+          button.u-datepicker-day(type='button') 30
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 1
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 2
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 3
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 4
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 5
+          button.u-datepicker-day.u-datepicker-day-outside-month(type='button') 6
+  .u-datepicker
+    .u-datepicker-navigation
+      button.u-text-btn(type='button') 2019
+      button.u-icon-btn(type='button')
+        i.u-btn-icon.mdi.mdi-chevron-left
+      button.u-icon-btn(type='button')
+        i.u-btn-icon.mdi.mdi-chevron-right
+    .u-datepicker-content
+      .u-datepicker-year-group
+        .u-datepicker-year-month-button 1969
+        .u-datepicker-year-month-button 1970
+        .u-datepicker-year-month-button 1971
+        .u-datepicker-year-month-button 1972
+      .u-datepicker-year-group
+        .u-datepicker-year-month-button 1973
+        .u-datepicker-year-month-button 1974
+        .u-datepicker-year-month-button 1975
+        .u-datepicker-year-month-button 1976
+      .u-datepicker-year-group
+        .u-datepicker-year-month-button 1977
+        .u-datepicker-year-month-button 1978
+        .u-datepicker-year-month-button 1979
+        .u-datepicker-year-month-button 1980
+      .u-datepicker-year-group
+        .u-datepicker-year-month-button 1981
+        .u-datepicker-year-month-button 1982
+        .u-datepicker-year-month-button 1983
+        .u-datepicker-year-month-button 1984
+      .u-datepicker-year-group
+        .u-datepicker-year-month-button 1985
+        .u-datepicker-year-month-button 1986
+        .u-datepicker-year-month-button 1987
+        .u-datepicker-year-month-button 1988
+      .u-datepicker-year-group
+        .u-datepicker-year-month-button 1989
+        .u-datepicker-year-month-button 1990
+        .u-datepicker-year-month-button 1991
+        .u-datepicker-year-month-button 1992
+  .u-datepicker
+    .u-datepicker-navigation
+      button.u-text-btn(type='button') 2019
+    .u-datepicker-content
+      .u-datepicker-month-group
+        .u-datepicker-year-month-button JAN
+        .u-datepicker-year-month-button FEB
+        .u-datepicker-year-month-button MAR
+        .u-datepicker-year-month-button APR
+      .u-datepicker-month-group
+        .u-datepicker-year-month-button MAY
+        .u-datepicker-year-month-button.active JUN
+        .u-datepicker-year-month-button JUL
+        .u-datepicker-year-month-button AUG
+      .u-datepicker-month-group
+        .u-datepicker-year-month-button SEP
+        .u-datepicker-year-month-button OCT
+        .u-datepicker-year-month-button NOV
+        .u-datepicker-year-month-button DEC
+

package/docs/src/components/dialogs/example.html

@@ -0,0 +1,44 @@
+<button class="u-filled-btn">Launch dialog</button>
+<div class="u-dialog">
+  <div class="u-dialog-backdrop"></div>
+  <div class="u-dialog-content">
+    <div class="u-dialog-header">
+      <div class="u-dialog-title">Dialog example</div>
+    </div>
+    <div class="u-dialog-body">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu non odio dictum faucibus. Fusce turpis ante, egestas eget pretium non, vestibulum aliquet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet bibendum sem et mollis. Aliquam dignissim lectus consectetur risus ultrices, et aliquam nisi aliquam. Donec quis diam vitae nunc rutrum lobortis. In suscipit nulla non suscipit dapibus. Sed tellus est, gravida a velit et, cursus egestas felis. Suspendisse magna neque, viverra eu metus at, sollicitudin finibus velit. Etiam in mi fringilla, accumsan justo at, suscipit lorem. Fusce mi neque, pulvinar quis lorem sit amet, imperdiet tincidunt nunc. Morbi sit amet leo vitae ante sollicitudin pulvinar. Nunc vitae neque quam.
+        Donec quis dapibus sapien. Fusce ornare quam nec ultrices posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium nisi gravida justo malesuada, ac consequat erat placerat. Maecenas at nisl leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ac ligula quis lorem dictum cursus. Mauris id fringilla purus. Donec tincidunt nisl leo, non hendrerit lorem semper eu.
+
+        Proin congue nibh ligula, in vulputate turpis semper at. Fusce in sagittis tellus. Donec ac nulla hendrerit, aliquam libero id, fermentum mi. Maecenas molestie euismod ipsum in gravida. Integer ac lectus a eros tincidunt convallis. Mauris purus velit, dictum dapibus purus nec, tincidunt imperdiet leo. Suspendisse id orci at lectus aliquam fermentum et non metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eget rhoncus sapien. In eget magna ligula. Suspendisse lacus ligula, iaculis sed bibendum in, luctus blandit eros.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu non odio dictum faucibus. Fusce turpis ante, egestas eget pretium non, vestibulum aliquet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet bibendum sem et mollis. Aliquam dignissim lectus consectetur risus ultrices, et aliquam nisi aliquam. Donec quis diam vitae nunc rutrum lobortis. In suscipit nulla non suscipit dapibus. Sed tellus est, gravida a velit et, cursus egestas felis. Suspendisse magna neque, viverra eu metus at, sollicitudin finibus velit. Etiam in mi fringilla, accumsan justo at, suscipit lorem. Fusce mi neque, pulvinar quis lorem sit amet, imperdiet tincidunt nunc. Morbi sit amet leo vitae ante sollicitudin pulvinar. Nunc vitae neque quam.
+        Donec quis dapibus sapien. Fusce ornare quam nec ultrices posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium nisi gravida justo malesuada, ac consequat erat placerat. Maecenas at nisl leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ac ligula quis lorem dictum cursus. Mauris id fringilla purus. Donec tincidunt nisl leo, non hendrerit lorem semper eu.
+
+        Proin congue nibh ligula, in vulputate turpis semper at. Fusce in sagittis tellus. Donec ac nulla hendrerit, aliquam libero id, fermentum mi. Maecenas molestie euismod ipsum in gravida. Integer ac lectus a eros tincidunt convallis. Mauris purus velit, dictum dapibus purus nec, tincidunt imperdiet leo. Suspendisse id orci at lectus aliquam fermentum et non metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eget rhoncus sapien. In eget magna ligula. Suspendisse lacus ligula, iaculis sed bibendum in, luctus blandit eros.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu non odio dictum faucibus. Fusce turpis ante, egestas eget pretium non, vestibulum aliquet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet bibendum sem et mollis. Aliquam dignissim lectus consectetur risus ultrices, et aliquam nisi aliquam. Donec quis diam vitae nunc rutrum lobortis. In suscipit nulla non suscipit dapibus. Sed tellus est, gravida a velit et, cursus egestas felis. Suspendisse magna neque, viverra eu metus at, sollicitudin finibus velit. Etiam in mi fringilla, accumsan justo at, suscipit lorem. Fusce mi neque, pulvinar quis lorem sit amet, imperdiet tincidunt nunc. Morbi sit amet leo vitae ante sollicitudin pulvinar. Nunc vitae neque quam.
+        Donec quis dapibus sapien. Fusce ornare quam nec ultrices posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium nisi gravida justo malesuada, ac consequat erat placerat. Maecenas at nisl leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ac ligula quis lorem dictum cursus. Mauris id fringilla purus. Donec tincidunt nisl leo, non hendrerit lorem semper eu.
+
+        Proin congue nibh ligula, in vulputate turpis semper at. Fusce in sagittis tellus. Donec ac nulla hendrerit, aliquam libero id, fermentum mi. Maecenas molestie euismod ipsum in gravida. Integer ac lectus a eros tincidunt convallis. Mauris purus velit, dictum dapibus purus nec, tincidunt imperdiet leo. Suspendisse id orci at lectus aliquam fermentum et non metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eget rhoncus sapien. In eget magna ligula. Suspendisse lacus ligula, iaculis sed bibendum in, luctus blandit eros.
+      </p>
+    </div>
+    <div class="u-dialog-actions">
+      <button class="u-dialog-action u-text-btn">Cancel</button>
+      <button class="u-dialog-action u-text-btn">Ok</button>
+    </div>
+  </div>
+</div>
+<script>
+  (function () {
+    const dialog = umd.Dialog.attach(document.querySelector(".u-dialog"));
+
+    document.querySelector(".u-dialog-backdrop").addEventListener("click", function () { dialog.toggle() });
+    const buttons = document.querySelectorAll("button");
+    buttons.forEach(function (button) {
+      button.addEventListener("click", function () { dialog.toggle() });
+    });
+  })();
+</script>

package/docs/src/components/dialogs.pug

@@ -0,0 +1,19 @@
+extends ../_layout
+
+block content
+  +renderTitle('Dialogs')
+
+  +renderSection('Simple card')
+    include:exampleCode dialogs/example.html
+
+block scripts
+  script.
+    (function () {
+      var dialog = umd.Dialog.attach(document.querySelector(".u-dialog"));
+
+      document.querySelector(".u-dialog-backdrop").addEventListener("click", function () { dialog.toggle() });
+      var buttons = document.querySelectorAll("button");
+      buttons.forEach(function (button) {
+        button.addEventListener("click", function () { dialog.toggle() });
+      });
+    })();

package/docs/src/components/dividers/no-margin.html

@@ -0,0 +1,7 @@
+<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 no-margin></u-divider>
+<u-button-set>
+  <u-icon-button variant="outlined">
+    <i class="mdi mdi-heart"></i>
+  </u-icon-button>
+</u-button-set>

package/docs/src/components/dividers/usage.html

@@ -0,0 +1,7 @@
+<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 variant="outlined">
+    <i class="mdi mdi-heart"></i>
+  </u-icon-button>
+</u-button-set>

package/docs/src/components/dividers.pug

@@ -0,0 +1,13 @@
+extends ../_layout
+
+block content
+
+  +renderTitle('Dividers')
+
+  +renderSection('Usage')
+    include:exampleCode dividers/usage.html
+
+  +renderSection('No margin')
+    include:exampleCode dividers/no-margin.html
+
+  +renderApiSection(apis.divider)

package/docs/src/components/dropdown-menus/down-end.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down-end">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/down-left.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down-left">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/down-right.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down-right">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/down-start.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down-start">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/down.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/up-end.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-end">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/up-left.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-left">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/up-right.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-right">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/up-start.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-start">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/dropdown-menus/up.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/components/expansion-panel.pug

@@ -0,0 +1,33 @@
+extends ../_layout
+
+block content
+  .u-container
+    +renderTitle('Expansion panel')
+
+  div
+    .u-expansion-panel
+      .u-expansion-panel-header
+        .u-expansion-panel-label Personal data
+        .u-expansion-panel-label Type your name and age
+        .u-expansion-toggle-icon
+          i.u-chevron-down
+      .u-expansion-panel-content
+        div dummy content
+
+    .u-expansion-panel.expanded
+      .u-expansion-panel-header
+        .u-expansion-panel-label Self aware panel
+        .u-expansion-panel-label Currently I am opened
+        .u-expansion-toggle-icon
+          i.u-chevron-down
+      .u-expansion-panel-content
+        .u-body1 I'm visible because I am open
+
+    .u-expansion-panel
+      .u-expansion-panel-header
+        .u-expansion-panel-label Self aware panel
+        .u-expansion-panel-label Currently I am closed
+        .u-expansion-toggle-icon
+          i.u-chevron-down
+      .u-expansion-panel-content
+        div dummy content

package/docs/src/components/fab/button-colors.html

@@ -0,0 +1,18 @@
+<u-fab>
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="secondary">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="tertiary">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="surface">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="branded">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab disabled>
+  <i class="mdi mdi-pencil"></i>
+</u-fab>

package/docs/src/components/fab/button-sizes.html

@@ -0,0 +1,11 @@
+<u-fab size="small">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+
+<u-fab>
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+
+<u-fab size="large">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>

package/docs/src/components/fab/extended-buttons.html

@@ -0,0 +1,18 @@
+<u-fab label="Compose">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="secondary" label="Compose">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="tertiary" label="Compose">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="surface" label="Compose">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="branded" label="Compose">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab disabled label="Compose">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>

package/docs/src/components/fab/floating-action-area.html

@@ -0,0 +1,5 @@
+<div class="u-floating-action-area">
+  <u-fab>
+    <i class="mdi mdi-plus"></i>
+  </u-fab>
+</div>

package/docs/src/components/fab/floating-menu.html

@@ -0,0 +1,10 @@
+<div class="u-floating-action-area">
+  <div class="u-floating-menu">
+    <u-fab size="small" color="tertiary" lowered>
+      <i class="mdi mdi-crosshairs-gps"></i>
+    </u-fab>
+    <u-fab label="Navigate" lowered>
+      <i class="mdi mdi-crosshairs-gps"></i>
+    </u-fab>
+  </div>
+</div>

package/docs/src/components/fab/lowered-buttons.html

@@ -0,0 +1,6 @@
+<u-fab color="branded">
+  <i class="mdi mdi-pencil"></i>
+</u-fab>
+<u-fab color="branded" lowered>
+  <i class="mdi mdi-pencil"></i>
+</u-fab>

package/docs/src/components/fab.pug

@@ -0,0 +1,25 @@
+extends ../_layout
+
+block content
+  .u-container
+    +renderTitle('Floating action button')
+
+    +renderSection('Sizes')
+      include:exampleCode fab/button-sizes.html
+
+    +renderSection('Colors')
+      include:exampleCode fab/button-colors.html
+
+    +renderSection('Extended')
+      include:exampleCode fab/extended-buttons.html
+
+    +renderSection('Lowered')
+      include:exampleCode fab/lowered-buttons.html
+
+    +renderSection('Floating action area')
+      include:exampleCode fab/floating-action-area.html
+
+    +renderSection('Floating menu')
+      include:exampleCode fab/floating-menu.html
+
+    +renderApiSection(apis.fab)

package/docs/src/components/icon-buttons/anchor-buttons.html

@@ -0,0 +1,15 @@
+<u-icon-button href="https://github.com/universal-material/universal-material-web" target="_blank">
+  <i class="mdi mdi-share"></i>
+</u-icon-button>
+<u-icon-button variant="outlined" href="https://github.com/universal-material/universal-material-web" target="_blank">
+  <i class="mdi mdi-share"></i>
+</u-icon-button>
+<u-icon-button variant="filled">
+  <i class="mdi mdi-share"></i>
+</u-icon-button>
+<u-icon-button variant="tonal" href="https://github.com/universal-material/universal-material-web" target="_blank">
+  <i class="mdi mdi-share"></i>
+</u-icon-button>
+<u-icon-button disabled href="https://github.com/universal-material/universal-material-web" target="_blank">
+  <i class="mdi mdi-share"></i>
+</u-icon-button>

package/docs/src/components/icon-buttons/buttons-variants.html

@@ -0,0 +1,15 @@
+<u-icon-button>
+  <i class="mdi mdi-cards-heart-outline"></i>
+</u-icon-button>
+<u-icon-button variant="outlined">
+  <i class="mdi mdi-cards-heart-outline"></i>
+</u-icon-button>
+<u-icon-button variant="filled">
+  <i class="mdi mdi-heart"></i>
+</u-icon-button>
+<u-icon-button variant="tonal">
+  <i class="mdi mdi-heart"></i>
+</u-icon-button>
+<u-icon-button disabled>
+  <i class="mdi mdi-cards-heart-outline"></i>
+</u-icon-button>

package/docs/src/components/icon-buttons/toggle-buttons-manual.html

@@ -0,0 +1,44 @@
+<div>
+  <u-icon-button onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="outlined" onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="filled" onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="tonal" onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button disabled onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+</div>
+<div>
+  <u-icon-button selected onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="outlined" selected onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="filled" selected onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="tonal" selected onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button disabled selected onclick="this.selected = !this.selected">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+</div>

package/docs/src/components/icon-buttons/toggle-buttons.html

@@ -0,0 +1,48 @@
+<div>
+  <u-icon-button toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="outlined" toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="filled" toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="tonal" toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button disabled toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+</div>
+<div>
+  <u-icon-button selected toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="outlined" selected toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="filled" selected toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button variant="tonal" selected toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button disabled selected toggle>
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+  <u-icon-button selected toggle aria-label="off" aria-label-selected="on">
+    <i class="mdi mdi-close"></i>
+    <i slot="selected" class="mdi mdi-check"></i>
+  </u-icon-button>
+</div>