@universal-material/web 3.0.138 → 3.0.140

package/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_size = 2
+indent_style = space

package/.eleventy.cjs

@@ -0,0 +1,21 @@
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(syntaxHighlight);
+  eleventyConfig.addPassthroughCopy('docs-src/docs.css');
+  eleventyConfig.addPassthroughCopy('docs-src/.nojekyll');
+  eleventyConfig.addPassthroughCopy(
+    'node_modules/@webcomponents/webcomponentsjs'
+  );
+  eleventyConfig.addPassthroughCopy('node_modules/lit/polyfill-support.js');
+  return {
+    dir: {
+      input: 'docs-src',
+      output: 'docs',
+    },
+    templateExtensionAliases: {
+      '11ty.cjs': '11ty.js',
+      '11tydata.cjs': '11tydata.js',
+    },
+  };
+};

package/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": ["runem.lit-plugin"],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}

package/CHANGELOG.md

@@ -0,0 +1,98 @@
+# @lit/lit-starter-ts
+
+## 2.0.1
+
+### Patch Changes
+
+- [#4451](https://github.com/lit/lit/pull/4451) [`7852e130`](https://github.com/lit/lit/commit/7852e13022c9dcfcff5ed54a215c93420349e318) - Minor security fixes.
+
+## 2.0.0
+
+### Major Changes
+
+- [#4141](https://github.com/lit/lit/pull/4141) [`6b515e43`](https://github.com/lit/lit/commit/6b515e43c3a24cc8a593247d3aa72d81bcc724d5) - Update TypeScript to ~5.2.0
+
+- [#3756](https://github.com/lit/lit/pull/3756) [`f06f7972`](https://github.com/lit/lit/commit/f06f7972a027d2937fe2c68ab5af0274dec57cf4) - Drop IE11 support
+
+### Patch Changes
+
+- [#3814](https://github.com/lit/lit/pull/3814) [`23326c6b`](https://github.com/lit/lit/commit/23326c6b9a6abdf01998dadf5d0f20a643e457aa) - Update to TypeScript v5.0
+
+- Updated dependencies [[`dfd747cf`](https://github.com/lit/lit/commit/dfd747cf4f7239e0c3bb7134f8acb967d0157654), [`6b515e43`](https://github.com/lit/lit/commit/6b515e43c3a24cc8a593247d3aa72d81bcc724d5), [`23c404fd`](https://github.com/lit/lit/commit/23c404fdec0cd7be834221b6ddf9b659c24ca8a2), [`1040f758`](https://github.com/lit/lit/commit/1040f75861b029527538b4ec36b2cfedcc32988a), [`0f6878dc`](https://github.com/lit/lit/commit/0f6878dc45fd95bbeb8750f277349c1392e2b3ad), [`1db01376`](https://github.com/lit/lit/commit/1db0137699b35d7e7bfac9b2ab274af4100fd7cf), [`2a01471a`](https://github.com/lit/lit/commit/2a01471a5f65fe34bad11e1099281811b8d0f79b), [`6f2833fd`](https://github.com/lit/lit/commit/6f2833fd05f2ecde5386f72d291dafc9dbae0cf7), [`c3e473b4`](https://github.com/lit/lit/commit/c3e473b499ff029b5e1aff01ca8799daf1ca1bbe), [`2eba6997`](https://github.com/lit/lit/commit/2eba69974c9e130e7483f44f9daca308345497d5), [`92cedaa2`](https://github.com/lit/lit/commit/92cedaa2c8cd8a306be3fe25d52e0e47bb044020), [`d27a77ec`](https://github.com/lit/lit/commit/d27a77ec3d3999e872df9218a2b07f90f22eb417), [`7e8491d4`](https://github.com/lit/lit/commit/7e8491d4ed9f0c39d974616c4678552ef50b81df), [`6470807f`](https://github.com/lit/lit/commit/6470807f3a0981f9d418cb26f05969912455d148), [`23326c6b`](https://github.com/lit/lit/commit/23326c6b9a6abdf01998dadf5d0f20a643e457aa), [`09949234`](https://github.com/lit/lit/commit/09949234445388d51bfb4ee24ff28a4c9f82fe17), [`f06f7972`](https://github.com/lit/lit/commit/f06f7972a027d2937fe2c68ab5af0274dec57cf4)]:
+  - lit@3.0.0
+
+## 2.0.0-pre.1
+
+### Major Changes
+
+- [#4141](https://github.com/lit/lit/pull/4141) [`6b515e43`](https://github.com/lit/lit/commit/6b515e43c3a24cc8a593247d3aa72d81bcc724d5) - Update TypeScript to ~5.2.0
+
+### Patch Changes
+
+- Updated dependencies [[`6b515e43`](https://github.com/lit/lit/commit/6b515e43c3a24cc8a593247d3aa72d81bcc724d5), [`0f6878dc`](https://github.com/lit/lit/commit/0f6878dc45fd95bbeb8750f277349c1392e2b3ad), [`2a01471a`](https://github.com/lit/lit/commit/2a01471a5f65fe34bad11e1099281811b8d0f79b), [`2eba6997`](https://github.com/lit/lit/commit/2eba69974c9e130e7483f44f9daca308345497d5), [`d27a77ec`](https://github.com/lit/lit/commit/d27a77ec3d3999e872df9218a2b07f90f22eb417), [`6470807f`](https://github.com/lit/lit/commit/6470807f3a0981f9d418cb26f05969912455d148), [`09949234`](https://github.com/lit/lit/commit/09949234445388d51bfb4ee24ff28a4c9f82fe17)]:
+  - lit@3.0.0-pre.1
+
+## 2.0.0-pre.0
+
+### Major Changes
+
+- [#3756](https://github.com/lit/lit/pull/3756) [`f06f7972`](https://github.com/lit/lit/commit/f06f7972a027d2937fe2c68ab5af0274dec57cf4) - Drop IE11 support
+
+### Patch Changes
+
+- [#3814](https://github.com/lit/lit/pull/3814) [`23326c6b`](https://github.com/lit/lit/commit/23326c6b9a6abdf01998dadf5d0f20a643e457aa) - Update to TypeScript v5.0
+
+- Updated dependencies [[`dfd747cf`](https://github.com/lit/lit/commit/dfd747cf4f7239e0c3bb7134f8acb967d0157654), [`23c404fd`](https://github.com/lit/lit/commit/23c404fdec0cd7be834221b6ddf9b659c24ca8a2), [`1db01376`](https://github.com/lit/lit/commit/1db0137699b35d7e7bfac9b2ab274af4100fd7cf), [`c3e473b4`](https://github.com/lit/lit/commit/c3e473b499ff029b5e1aff01ca8799daf1ca1bbe), [`92cedaa2`](https://github.com/lit/lit/commit/92cedaa2c8cd8a306be3fe25d52e0e47bb044020), [`23326c6b`](https://github.com/lit/lit/commit/23326c6b9a6abdf01998dadf5d0f20a643e457aa), [`f06f7972`](https://github.com/lit/lit/commit/f06f7972a027d2937fe2c68ab5af0274dec57cf4)]:
+  - lit@3.0.0-pre.0
+
+## 1.0.6
+
+### Patch Changes
+
+- [#4157](https://github.com/lit/lit/pull/4157) [`da32db2e`](https://github.com/lit/lit/commit/da32db2e67547e0f17b7132065559eba2b1d3513) Thanks [@welingtonms](https://github.com/welingtonms)! - Improve bundling and minification recommendations.
+
+## 1.0.5
+
+### Patch Changes
+
+- [#3561](https://github.com/lit/lit/pull/3561) [`e5c254e9`](https://github.com/lit/lit/commit/e5c254e96cb5d0f770ec616332e231559325c5c5) - Update dependency `@rollup/plugin-replace`
+
+## 1.0.4
+
+### Patch Changes
+
+- [#2922](https://github.com/lit/lit/pull/2922) [`da9db86a`](https://github.com/lit/lit/commit/da9db86a33cba710d439e254df2492f9f6dcbbee) - Update dependencies and remove unused dependencies
+
+## 1.0.3
+
+### Patch Changes
+
+- [#2757](https://github.com/lit/lit/pull/2757) [`55841c14`](https://github.com/lit/lit/commit/55841c14f52891357dd93680d3bc5b1da6c89c8a) - Update Rollup and Rollup plugins
+
+## 1.0.2
+
+### Patch Changes
+
+- [#2535](https://github.com/lit/lit/pull/2535) [`d1359856`](https://github.com/lit/lit/commit/d1359856698d1af381b335fb757f9282574690b0) - Update the README to indicate that issues and PRs should be filed on the main Lit repo.
+
+## 1.0.1
+
+### Patch Changes
+
+- [#2300](https://github.com/lit/lit/pull/2300) [`8b9dcb4d`](https://github.com/lit/lit/commit/8b9dcb4d10e4161083146ae40d0b12174a63d31d) - Fix starter kits so `npm run serve` serves the root directory, and add a link to the `/dev/index.html` component example from `/`.
+
+- Updated dependencies [[`fcc2b3d0`](https://github.com/lit/lit/commit/fcc2b3d0054e69e6f76588ea9f440117b6d0deed), [`49ecf623`](https://github.com/lit/lit/commit/49ecf6239033e9578184d46116e6b89676d091db), [`1d563e83`](https://github.com/lit/lit/commit/1d563e830c02a2d1a22e1e939f1ace971b1d1ae7)]:
+  - lit@2.1.0
+
+## 1.0.0
+
+### Patch Changes
+
+- [#2113](https://github.com/lit/lit/pull/2113) [`5b2f3642`](https://github.com/lit/lit/commit/5b2f3642ff91931b5b01f8bdd2ed98aba24f1047) - Dependency upgrades including TypeScript 4.4.2
+
+- [#2103](https://github.com/lit/lit/pull/2103) [`15a8356d`](https://github.com/lit/lit/commit/15a8356ddd59a1e80880a93acd21fadc9c24e14b) - Added Lit dev mode to test and serve commands, controlled via the MODE=dev or MODE=prod environment variables.
+
+- [#2117](https://github.com/lit/lit/pull/2117) [`eff2fbc7`](https://github.com/lit/lit/commit/eff2fbc7e45cfc2a7b8df21e18c84619dfbcb277) - Updated starter templates to use open-wc analyzer for generating custom-elements.json, and updated basic API docs generater included in the template to the new manifest format.
+
+- Updated dependencies [[`15a8356d`](https://github.com/lit/lit/commit/15a8356ddd59a1e80880a93acd21fadc9c24e14b), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`5b2f3642`](https://github.com/lit/lit/commit/5b2f3642ff91931b5b01f8bdd2ed98aba24f1047), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`0312f3e5`](https://github.com/lit/lit/commit/0312f3e533611eb3f4f9381594485a33ad003b74)]:
+  - lit@2.0.0

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2019 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/add-custom-elements-schemas.cjs

@@ -0,0 +1,75 @@
+const customElementsSchemas = [
+  './custom-elements.json'
+]
+
+const customElementsDefinitions = [];
+
+for (const customElementSchema of customElementsSchemas) {
+  const customElements = require(customElementSchema);
+  customElementsDefinitions.push(customElements);
+}
+
+function parsePropertyType(type) {
+  switch (type) {
+    case 'boolean':
+      return '!';
+    case 'number':
+      return '#';
+    default:
+      return '';
+  }
+}
+
+function buildElementDefinition(name, properties) {
+  return `${name}^[HTMLElement]|${properties.join(',')}`;
+}
+
+function mapSchema(customElementsDefinition, SCHEMAS) {
+
+  for (const module of customElementsDefinition.modules) {
+
+    const customElementDefinition = module.exports.find(e => e.kind === 'custom-element-definition');
+    const classDeclaration = module.declarations.find(e => e.kind === 'class');
+
+    if (!classDeclaration || !customElementDefinition) {
+      continue;
+    }
+
+    const properties = [];
+    const attributeNames = [];
+
+    if (classDeclaration.attributes) {
+      for (const attr of classDeclaration.attributes) {
+        properties.push(`${parsePropertyType(attr.type?.text)}${attr.name}`);
+        attributeNames.push(attr.name);
+      }
+    }
+
+    parseMembers(classDeclaration, properties, attributeNames)
+
+    SCHEMAS.push(buildElementDefinition(customElementDefinition.name, properties));
+  }
+}
+
+function parseMembers(classDeclaration, properties, attributeNames) {
+  if (!classDeclaration.members) {
+    return;
+  }
+
+  for (const member of classDeclaration.members) {
+    if (member.kind !== 'field'
+      || member.static
+      || member.privacy
+      || attributeNames.includes(member.name)) {
+      continue;
+    }
+
+    properties.push(member.name);
+  }
+}
+
+exports.mapSchemas = SCHEMAS => {
+  for (const customElementsDefinition of customElementsDefinitions) {
+    mapSchema(customElementsDefinition, SCHEMAS)
+  }
+}

package/change-compiler-to-add-custom-elements.js

@@ -0,0 +1,26 @@
+import fs from 'fs';
+
+const compilerPath = 'node_modules/@angular/compiler/fesm2022/compiler.mjs';
+
+fs.access(compilerPath, fs.constants.F_OK, fileDoesNotExists => {
+  if (fileDoesNotExists) {
+    return;
+  }
+
+  try {
+    let content = fs.readFileSync(compilerPath).toString();
+
+    if (content.includes('mapSchemas(SCHEMA);')) {
+      return;
+    }
+
+    content = `${content}
+
+import { mapSchemas } from '../../../../add-custom-elements-schemas.cjs';
+mapSchemas(SCHEMA);`;
+
+    fs.writeFileSync(compilerPath, content);
+  } catch (err) {
+    console.log(`An error occurred while changing Angular compiler to add custom elements`);
+  }
+});

package/change-schematics-to-generate-pug.js

@@ -0,0 +1,32 @@
+import fs from 'fs';
+
+const componentSchematicFilesFolderPath = 'node_modules/@schematics/angular/component/files/__name@dasherize@if-flat__';
+const htmlSchematicPath = `${componentSchematicFilesFolderPath}/__name@dasherize__.__type@dasherize__.html.template`;
+const pugSchematicPath = `${componentSchematicFilesFolderPath}/__name@dasherize__.__type@dasherize__.pug.template`;
+const tsSchematicPath = `${componentSchematicFilesFolderPath}/__name@dasherize__.__type@dasherize__.ts.template`;
+
+fs.access(htmlSchematicPath, fs.constants.F_OK, fileDoesNotExists => {
+  if (fileDoesNotExists) {
+    return;
+  }
+
+  try {
+    fs.renameSync(htmlSchematicPath, pugSchematicPath);
+    let pugFile = fs.readFileSync(pugSchematicPath).toString();
+    pugFile = pugFile
+      .replace('<p>', 'p ')
+      .replace('</p>', '');
+
+    fs.writeFileSync(pugSchematicPath, pugFile);
+
+
+    let tsFile = fs.readFileSync(tsSchematicPath).toString();
+
+    tsFile = tsFile
+      .replace('.html', '.pug');
+
+    fs.writeFileSync(tsSchematicPath, tsFile);
+  } catch (err) {
+    console.log(`An error occurred while changing Angular CLI's schematics`);
+  }
+});

package/docs/angular.json

@@ -0,0 +1,110 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "universal-material-web-docs": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "docs",
+      "architect": {
+        "build": {
+          "builder": "ngx-pug-builders:browser",
+          "options": {
+            "outputPath": "dist/universal-material-web-docs",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "../src/scss/universal-material.scss",
+              "../node_modules/highlight.js/styles/base16/atelier-sulphurpool-light.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "baseHref": "/web/"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "ngx-pug-builders:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "universal-material-web-docs:build:production"
+            },
+            "development": {
+              "buildTarget": "universal-material-web-docs:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "ngx-pug-builders:extract-i18n",
+          "options": {
+            "buildTarget": "universal-material-web-docs:build"
+          }
+        }
+      }
+    }
+  }
+}

package/docs/src/app/app.component.pug

@@ -0,0 +1,199 @@
+u-side-navigation(#navigation)
+  u-top-app-bar(
+    headline="Material",
+    size="medium",
+    [scrollContainer]="navigation.scrollContainer || 'window'")
+    u-icon-button(
+      type="button",
+      slot="leading-icon",
+      (click)="navigation.toggleDrawer = !navigation.toggleDrawer")
+      span.material-symbols-outlined menu
+
+    .color-picker(slot="trailing-icon")
+      u-ripple((click)="colorInput.click()")
+      input(
+        #colorInput,
+        type="color",
+        aria-label="Theme color",
+        [ngModel]="themeColor",
+        (ngModelChange)="$themeColorChange.next($event)")
+    .position-relative(slot="trailing-icon")
+      u-icon-button(
+        aria-label="Theme",
+        (click)="themeMenu.toggle()")
+        span.material-symbols-outlined palette
+      u-menu(
+        #themeMenu,
+        anchor-corner="end-end")
+        u-menu-item((click)="setThemeMode(ThemeMode.Auto)")
+          span.material-symbols-outlined(slot="leading-icon") brightness_4
+          span System
+        u-menu-item((click)="setThemeMode(ThemeMode.Light)")
+          span.material-symbols-outlined(slot="leading-icon") light_mode
+          span Light Mode
+        u-menu-item((click)="setThemeMode(ThemeMode.Dark)")
+          span.material-symbols-outlined(slot="leading-icon") dark_mode
+          span Dark Mode
+
+    //u-icon-button(
+      slot="trailing-icon",
+      href="/angular",
+      title="Universal Material Angular")
+      span.material-symbols-outlined angular
+    u-icon-button(
+      slot="trailing-icon",
+      type="button",
+      title="Rtl",
+      (click)="toggleRtl()")
+      span.material-symbols-outlined format_align_right
+
+  u-drawer(slot="drawer")
+    h6.navigation-headline.u-headline-s Material Design
+    u-drawer-item(
+      routerLink="",
+      docsLinkActive,
+      [routerLinkActiveOptions]="{exact: true}") Introduction
+
+    //u-drawer-item(
+      routerLink="layout/grid",
+      docsLinkActive) Grid
+
+
+    //u-drawer-item Colors
+      i.u-typo-title-l.mdi.mdi-chevron-down(slot="badge")
+
+    docs-submenu(label="CSS")
+      u-drawer-item(
+        routerLink="content/typography",
+        docsLinkActive) Typography
+
+      docs-submenu(label="Colors")
+        u-drawer-item(
+          role="menuitem",
+          routerLink="utilities/text-colors",
+          docsLinkActive) Text
+        u-drawer-item(
+          routerLink="utilities/text-emphasis",
+          docsLinkActive) Text emphasis
+        u-drawer-item(
+          routerLink="utilities/background-colors",
+          docsLinkActive) Background
+        u-drawer-item(
+          routerLink="utilities/text-and-background-colors",
+          docsLinkActive) Color & background
+
+      u-drawer-item(
+        routerLink="utilities/dividers",
+        docsLinkActive) Dividers
+
+      u-drawer-item(
+        routerLink="components/tables",
+        docsLinkActive) Tables
+
+      u-drawer-item(
+        routerLink="layout/container",
+        docsLinkActive) Container
+
+      u-drawer-item(
+        routerLink="layout/grid",
+        docsLinkActive) Grid
+
+    docs-submenu(label="Components")
+
+      u-drawer-item(
+        routerLink="components/common-buttons",
+        docsLinkActive) Common buttons
+      u-drawer-item(
+        routerLink="components/fab",
+        docsLinkActive) Floating Action Button (FAB)
+      u-drawer-item(
+        routerLink="components/icon-buttons",
+        docsLinkActive) Icon buttons
+      u-drawer-item(
+        routerLink="components/button-set",
+        docsLinkActive) Button set
+
+      u-drawer-item(
+        routerLink="components/cards",
+        docsLinkActive) Cards
+
+      //u-drawer-item(
+        routerLink="components/checkbox",
+        docsLinkActive) Checkbox
+
+      u-drawer-item(
+        routerLink="components/chips",
+        docsLinkActive) Chips
+
+      u-drawer-item(
+        routerLink="components/dialogs",
+        docsLinkActive) Dialogs
+
+      u-drawer-item(
+        routerLink="components/lists",
+        docsLinkActive) Lists
+
+      //u-drawer-item(
+        routerLink="components/menus",
+        docsLinkActive) Menus
+
+      u-drawer-item(
+        routerLink="components/progress",
+        docsLinkActive) Progress
+
+      u-drawer-item(
+        routerLink="components/ripple",
+        docsLinkActive) Ripple
+
+      //u-drawer-item(
+        routerLink="components/selection-controls",
+        docsLinkActive) Selection controls
+
+      //u-drawer-item(
+        routerLink="components/sliders",
+        docsLinkActive) Sliders
+
+      //u-drawer-item(
+        routerLink="components/snackbars",
+        docsLinkActive) Snackbars
+
+      //u-drawer-item(
+        routerLink="components/tabs",
+        docsLinkActive) Tabs
+
+      u-drawer-item(
+        routerLink="components/text-fields",
+        docsLinkActive) Text fields
+
+      u-drawer-item(
+        routerLink="components/select",
+        docsLinkActive) Select
+
+      u-drawer-item(
+        routerLink="components/chip-field",
+        docsLinkActive) Chip field
+
+      u-drawer-item(
+        routerLink="components/typeahead",
+        docsLinkActive) Typeahead
+
+      //u-drawer-item(
+        routerLink="components/toolbars",
+        docsLinkActive) Toolbars
+
+  .u-container.chapter
+    router-outlet
+  //.pane-layout
+    .pane
+      u-elevation
+      .scroll-wrapper(#scrollWrapper)
+
+
+    .side-pane
+      u-card
+        .u-label-m On this page:
+        a.hash-navigation-item.u-title-s(
+          href="#",
+          *ngFor="let item of anchorsNavigation",
+          tabindex="0",
+          (click)="navigateToAnchor($event, item)") {{item.title}}