@universal-material/web 3.0.19 → 3.0.21

package/navigation/side-navigation.js

@@ -0,0 +1,154 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmSideNavigation_toggleDrawer;
+import { html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { config } from '../config';
+import { styles as baseStyles } from '../shared/base.styles';
+import { styles as swiperStyles } from './side-navigation-swiper.styles';
+import { styles } from './side-navigation.styles';
+let UmSideNavigation = class UmSideNavigation extends LitElement {
+    constructor() {
+        super(...arguments);
+        _UmSideNavigation_toggleDrawer.set(this, false);
+        this.disableSlideAnimation = false;
+    }
+    /**
+     * Toggle the navigation drawer visibility
+     *
+     * _Modal drawer_: Open if `true`, closed if `false`
+     * _Standard drawer_: Collapsed if `true`, visible if `false`
+     */
+    get toggleDrawer() { return __classPrivateFieldGet(this, _UmSideNavigation_toggleDrawer, "f"); }
+    set toggleDrawer(toggleDrawer) {
+        __classPrivateFieldSet(this, _UmSideNavigation_toggleDrawer, toggleDrawer, "f");
+        if (!this.disableSlideAnimation) {
+            this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);
+        }
+    }
+    render() {
+        return config.navigationDrawer.useSwiperJs
+            ? this.renderWithSwipe()
+            : this.renderDefault();
+    }
+    renderDefault() {
+        return html `
+      <div class="grid container">
+        <div>
+          <div class="navigation">
+            <div class="scrim ${this.toggleDrawer ? 'toggle' : ''}" @click="${this.scrimClick}"></div>
+            <div class="drawer ${this.toggleDrawer ? 'toggle' : ''}">
+              <u-elevation></u-elevation>
+              <div class="drawer-container">
+                <slot name="drawer"></slot>
+              </div>
+            </div>
+            <slot name="rail"></slot>
+          </div>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    renderWithSwipe() {
+        return html `
+      <swiper-container
+        class="container"
+        initial-slide="1"
+        resistance-ratio="0"
+        slides-per-view="auto"
+        simulate-touch="false"
+        @swiperactiveindexchange="${this.swiperActiveIndexChange}"
+        @swiperslidermove="${this.swiperSliderMove}"
+        @swipertransitionend="${this.swiperTransitionEnd}"
+        @swipertransitionstart="${this.swiperTransitionStart}"
+        @swiperslidesgridlengthchange="${this.slidesGridLengthChange}">
+        <swiper-slide class="drawer ${this.toggleDrawer ? 'toggle' : ''}">
+          <u-elevation></u-elevation>
+          <div class="drawer-container">
+            <slot name="drawer"></slot>
+          </div>
+        </swiper-slide>
+        <swiper-slide class="dummy-slide"></swiper-slide>
+
+        <div id="scroll-container" class="content" slot="container-end">
+          <slot></slot>
+        </div>
+        <div class="scrim ${this.toggleDrawer ? 'toggle' : ''}" @click="${this.scrimClick}" slot="container-end"></div>
+      </swiper-container>`;
+    }
+    swiperActiveIndexChange() {
+        if (!this.swiperContainer?.swiper) {
+            return;
+        }
+        this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;
+    }
+    swiperTransitionStart() {
+        this.scrim.classList.add('moving');
+    }
+    slidesGridLengthChange() {
+        if (!this.swiperContainer?.swiper) {
+            return;
+        }
+        this.classList.add('disable-transition');
+        const gridLength = this.swiperContainer.swiper.snapGrid.length;
+        this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);
+        this.disableSlideAnimation = true;
+        this.toggleDrawer = true;
+        this.toggleDrawer = false;
+        this.disableSlideAnimation = false;
+        setTimeout(() => this.classList.remove('disable-transition'));
+    }
+    swiperTransitionEnd() {
+        this.scrim.style.removeProperty('--_modal-drawer-open-progress');
+        this.scrim.classList.remove('moving');
+    }
+    swiperSliderMove(e) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const swiper = e.detail[0];
+        this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);
+    }
+    scrimClick() {
+        this.toggleDrawer = false;
+        this.swiperContainer.swiper.slideTo(1);
+    }
+};
+_UmSideNavigation_toggleDrawer = new WeakMap();
+UmSideNavigation.styles = [
+    baseStyles,
+    config.navigationDrawer.useSwiperJs ? swiperStyles : styles
+];
+__decorate([
+    property({ type: Boolean, attribute: 'toggle-drawer' })
+], UmSideNavigation.prototype, "toggleDrawer", null);
+__decorate([
+    query('swiper-container')
+], UmSideNavigation.prototype, "swiperContainer", void 0);
+__decorate([
+    query('.scrim')
+], UmSideNavigation.prototype, "scrim", void 0);
+__decorate([
+    query('#scroll-container')
+], UmSideNavigation.prototype, "scrollContainer", void 0);
+UmSideNavigation = __decorate([
+    customElement('u-side-navigation')
+], UmSideNavigation);
+export { UmSideNavigation };
+//# sourceMappingURL=side-navigation.js.map

package/navigation/side-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { config } from '../config';\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles';\nimport { styles } from './side-navigation.styles';\n\n@customElement('u-side-navigation')\nexport class UmSideNavigation extends LitElement {\n\n  static override styles = [\n      baseStyles,\n      config.navigationDrawer.useSwiperJs ? swiperStyles : styles\n    ];\n\n  #toggleDrawer = false;\n  private disableSlideAnimation = false;\n\n  /**\n   * Toggle the navigation drawer visibility\n   *\n   * _Modal drawer_: Open if `true`, closed if `false`\n   * _Standard drawer_: Collapsed if `true`, visible if `false`\n   */\n  @property({type: Boolean, attribute: 'toggle-drawer'})\n  get toggleDrawer() { return this.#toggleDrawer; }\n  set toggleDrawer(toggleDrawer: boolean) {\n    this.#toggleDrawer = toggleDrawer;\n\n    if (!this.disableSlideAnimation) {\n      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @query('swiper-container') swiperContainer!: any;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return config.navigationDrawer.useSwiperJs\n      ? this.renderWithSwipe()\n      : this.renderDefault();\n  }\n\n  private renderDefault() {\n    return html`\n      <div class=\"grid container\">\n        <div>\n          <div class=\"navigation\">\n            <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\"></div>\n            <div class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n              <u-elevation></u-elevation>\n              <div class=\"drawer-container\">\n                <slot name=\"drawer\"></slot>\n              </div>\n            </div>\n            <slot name=\"rail\"></slot>\n          </div>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderWithSwipe() {\n    return html`\n      <swiper-container\n        class=\"container\"\n        initial-slide=\"1\"\n        resistance-ratio=\"0\"\n        slides-per-view=\"auto\"\n        simulate-touch=\"false\"\n        @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n        @swiperslidermove=\"${this.swiperSliderMove}\"\n        @swipertransitionend=\"${this.swiperTransitionEnd}\"\n        @swipertransitionstart=\"${this.swiperTransitionStart}\"\n        @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n        <swiper-slide class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n          <u-elevation></u-elevation>\n          <div class=\"drawer-container\">\n            <slot name=\"drawer\"></slot>\n          </div>\n        </swiper-slide>\n        <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n        <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n          <slot></slot>\n        </div>\n        <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\" slot=\"container-end\"></div>\n      </swiper-container>`;\n  }\n\n  private swiperActiveIndexChange() {\n\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n  }\n\n  private swiperTransitionStart() {\n    this.scrim.classList.add('moving');\n  }\n\n  private slidesGridLengthChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.classList.add('disable-transition');\n\n    const gridLength = this.swiperContainer.swiper.snapGrid.length;\n    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n    this.disableSlideAnimation = true;\n    this.toggleDrawer = true;\n    this.toggleDrawer = false;\n    this.disableSlideAnimation = false;\n    setTimeout(() =>\n      this.classList.remove('disable-transition'));\n  }\n\n  private swiperTransitionEnd() {\n    this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n    this.scrim.classList.remove('moving');\n  }\n\n  private swiperSliderMove(e: Event) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const swiper = (<any>e).detail[0];\n    this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);\n  }\n\n  private scrimClick() {\n    this.toggleDrawer = false;\n    this.swiperContainer.swiper.slideTo(1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-side-navigation': UmSideNavigation;\n  }\n}\n"]}

package/navigation/side-navigation.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=side-navigation.styles.d.ts.map

package/navigation/side-navigation.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyHlB,CAAC"}

package/navigation/side-navigation.styles.js

@@ -0,0 +1,124 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_navigation-width: 0;
+    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);
+    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);
+    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));
+    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);
+    display: block;
+    width: 100%;
+    height: 100%;
+    --u-app-bar-offset: var(--_navigation-width);
+  }
+
+  :host(.disable-transition) * {
+    transition: none !important;
+  }
+  :host(.disable-transition) * ::slotted(u-top-app-bar) {
+    transition: none !important;
+  }
+
+  .drawer {
+    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  .drawer,
+  .drawer u-elevation,
+  .drawer .drawer-container {
+    border-start-end-radius: var(--_navigation-drawer-corner-shape);
+    border-end-end-radius: var(--_navigation-drawer-corner-shape);
+  }
+  .drawer.toggle u-elevation {
+    --u-elevation-level: 1;
+  }
+
+  .drawer-container {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .scrim {
+    --_modal-drawer-open-progress: 0;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: 100vw;
+    height: 100vh;
+    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));
+    pointer-events: none;
+    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));
+    transition: opacity 375ms linear;
+  }
+  .scrim.moving {
+    transition: none;
+  }
+  .scrim.toggle {
+    --_modal-drawer-open-progress: 1;
+    pointer-events: auto;
+  }
+
+  @media (min-width: 840px) {
+    .content slot {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+  }
+  @media (min-width: 1200px) {
+    .container {
+      --_navigation-width: var(--_navigation-drawer-width);
+    }
+    .container:has(.drawer.toggle) {
+      --_navigation-width: 0;
+    }
+    .drawer {
+      border-radius: 0;
+      inset-inline-start: 0;
+    }
+    .drawer.toggle {
+      inset-inline-start: var(--_navigation-drawer-width-negative);
+    }
+    u-elevation,
+    .scrim {
+      display: none;
+    }
+  }
+  .navigation {
+    position: fixed;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    height: 100%;
+    z-index: var(--u-side-navigation-z-index, 1030);
+  }
+
+  .drawer {
+    position: absolute;
+    inset-inline-start: var(--_navigation-drawer-width-negative);
+    inset-block-start: 0;
+    width: var(--_navigation-drawer-width);
+    height: 100%;
+    border-start-end-radius: var(--_navigation-drawer-corner-shape);
+    border-end-end-radius: var(--_navigation-drawer-corner-shape);
+    overflow: hidden;
+  }
+  .drawer.toggle {
+    inset-inline-start: 0;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);
+    transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);
+    --u-app-bar-offset: var(--_navigation-width);
+  }
+
+  @media (min-width: 1200px) {
+    .drawer {
+      inset-inline-start: 0;
+    }
+    .drawer.toggle {
+      inset-inline-start: var(--_navigation-drawer-width-negative);
+    }
+  }
+`;
+//# sourceMappingURL=side-navigation.styles.js.map

package/navigation/side-navigation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation.styles.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_navigation-width: 0;\n    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);\n    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);\n    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));\n    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);\n    display: block;\n    width: 100%;\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  :host(.disable-transition) * {\n    transition: none !important;\n  }\n  :host(.disable-transition) * ::slotted(u-top-app-bar) {\n    transition: none !important;\n  }\n\n  .drawer {\n    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n  .drawer,\n  .drawer u-elevation,\n  .drawer .drawer-container {\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n  }\n  .drawer.toggle u-elevation {\n    --u-elevation-level: 1;\n  }\n\n  .drawer-container {\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .scrim {\n    --_modal-drawer-open-progress: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100vw;\n    height: 100vh;\n    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    pointer-events: none;\n    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));\n    transition: opacity 375ms linear;\n  }\n  .scrim.moving {\n    transition: none;\n  }\n  .scrim.toggle {\n    --_modal-drawer-open-progress: 1;\n    pointer-events: auto;\n  }\n\n  @media (min-width: 840px) {\n    .content slot {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n    }\n  }\n  @media (min-width: 1200px) {\n    .container {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .container:has(.drawer.toggle) {\n      --_navigation-width: 0;\n    }\n    .drawer {\n      border-radius: 0;\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n    u-elevation,\n    .scrim {\n      display: none;\n    }\n  }\n  .navigation {\n    position: fixed;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    height: 100%;\n    z-index: var(--u-side-navigation-z-index, 1030);\n  }\n\n  .drawer {\n    position: absolute;\n    inset-inline-start: var(--_navigation-drawer-width-negative);\n    inset-block-start: 0;\n    width: var(--_navigation-drawer-width);\n    height: 100%;\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n    overflow: hidden;\n  }\n  .drawer.toggle {\n    inset-inline-start: 0;\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);\n    transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  @media (min-width: 1200px) {\n    .drawer {\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n  }\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "description": "Material web components",
   "type": "module",
   "keywords": [
@@ -16,30 +16,31 @@
   "module": "./index.js",
   "typings": "./index.d.ts",
   "scripts": {
-    "build": "run-s clean sass:sass-to-ts script:build analyze copy",
-    "build:watch": "npm-run-all clean sass:sass-to-ts --parallel sass:sass-to-ts:watch script:build:watch",
+    "build": "run-s clean script:sass-to-ts script:build sass analyze copy",
+    "build:watch": "gulp -f gulpfile.js scripts:watch",
     "script:build": "tsc",
-    "script:build:watch": "tsc --watch",
-    "script:build:prod": "npm run clean && npm run script:build && npm run copy",
-    "sass:sass-to-ts": "gulp -f gulpfile.js sass:sass-to-ts",
-    "sass:sass-to-ts:watch": "gulp -f gulpfile.js sass:sass-to-ts:watch",
+    "script:sass-to-ts": "gulp -f gulpfile.js scripts:sass-to-ts",
+    "script:sass-to-ts:watch": "gulp -f gulpfile.js scripts:sass-to-ts:watch",
+    "sass": "gulp -f gulpfile.js sass",
+    "sass:watch": "gulp -f gulpfile.js sass:watch",
     "clean": "rimraf ./dist/ rimraf ./src/**/*.d.ts rimraf ./src/**/*.styles.ts",
-    "copy": "copyfiles package.json README.md custom-elements.json dist/",
+    "copy": "copyfiles package.json README.md custom-elements.json dist/ && copyfiles -u 1 src/scss/**/*.scss dist/",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer",
     "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
-    "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build",
-    "docs:clean": "rimraf ./docs/dist/",
-    "docs:build": "gulp -f gulpfile.js docs",
-    "docs:watch": "run-p docs:gulp:watch docs:serve",
-    "docs:bundle": "gulp -f gulpfile.js docs:bundle",
-    "docs:gulp:watch": "gulp -f gulpfile.js docs:watch",
-    "docs:serve": "wds --root-dir=docs/dist --node-resolve --watch",
+    "predocs": "run-p analyze docs:apis script:sass-to-ts",
+    "docs": "run-p script:sass-to-ts:watch docs:serve",
+    "docs:apis": "gulp -f gulpfile.js docs:apis",
+    "docs:apis:watch": "gulp -f gulpfile.js docs:apis:watch",
+    "docs:serve": "cd docs && ng serve --disable-host-check",
+    "docs:build": "npm run predocs && cd docs && ng build",
+    "docs:watch": "npm run predocs && cd docs && ng build --watch --configuration development",
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
     "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
     "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js",
-    "publish": "cd dist && npm publish"
+    "publish": "cd dist && npm publish",
+    "postinstall": "node ./change-schematics-to-generate-pug.js && node ./change-compiler-to-add-custom-elements.js"
   },
   "author": "https://github.com/universal-material/universal-material/graphs/contributors",
   "repository": {
@@ -49,22 +50,39 @@
   "license": "MIT",
   "homepage": "https://universal-material.github.io",
   "dependencies": {
+    "@angular/animations": "^17.3.4",
+    "@angular/common": "^17.3.4",
+    "@angular/compiler": "^17.3.4",
+    "@angular/core": "^17.3.4",
+    "@angular/forms": "^17.3.4",
+    "@angular/platform-browser": "^17.3.4",
+    "@angular/platform-browser-dynamic": "^17.3.4",
+    "@angular/router": "^17.3.4",
+    "@material/material-color-utilities": "^0.2.7",
+    "highlight.js": "^11.9.0",
     "lit": "^3.0.0",
-    "@material/material-color-utilities": "^0.2.7"
+    "ngx-highlightjs": "^11.0.0-beta.1",
+    "ngx-markdown": "^17.2.0",
+    "rxjs": "~7.8.0",
+    "swiper": "^11.1.1",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@angular-devkit/build-angular": "^17.3.4",
+    "@angular/cli": "^17.3.4",
+    "@angular/compiler-cli": "^17.3.0",
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
+    "@types/mocha": "^10.0.6",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
-    "@web/dev-server": "^0.1.31",
-    "@web/dev-server-legacy": "^1.0.0",
-    "@web/test-runner": "^0.15.0",
-    "@web/test-runner-playwright": "^0.9.0",
+    "@web/test-runner": "^0.18.0",
+    "@web/test-runner-playwright": "^0.11.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
@@ -72,13 +90,21 @@
     "eslint-plugin-import-helpers": "^1.3.1",
     "eslint-plugin-unused-imports": "^3.1.0",
     "gulp": "^4.0.2",
+    "gulp-changed": "^5.0.2",
+    "gulp-newer": "^1.4.0",
     "gulp-notify": "^4.0.0",
     "gulp-pug": "^5.0.0",
+    "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-typescript": "^6.0.0-alpha.1",
     "html-entities": "^2.5.2",
     "lit-analyzer": "^1.2.1",
+    "ngx-pug-builders": "^17.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",
+    "pug": "^3.0.2",
+    "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.73.0",
     "rollup-plugin-summary": "^2.0.0",

package/scss/_api.scss

@@ -0,0 +1,2 @@
+@import "mixins";
+@import "functions";

package/scss/_common.scss

@@ -0,0 +1,38 @@
+@use "functions";
+
+* {
+  outline: 0;
+}
+
+*:focus-visible {
+  animation: u-focus-pulse 400ms ease;
+  animation-fill-mode: forwards;
+  outline-offset: 2px;
+}
+
+body {
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity));
+}
+
+@keyframes u-focus-pulse {
+  0% {
+    outline: 2px solid var(--u-color-primary);
+  }
+  50% {
+    outline: 4px solid var(--u-color-primary);
+  }
+  100% {
+    outline: 2px solid var(--u-color-primary);
+  }
+}
+
+a {
+  border-radius: #{functions.get-spacing-var(extra-small)};
+  text-decoration: none;
+
+  @media (hover: hover) {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/scss/_css-vars.scss

@@ -0,0 +1,30 @@
+@use "sass:map";
+
+@use "variables";
+@use "functions";
+@use "mixins";
+
+:root {
+  --u-state-layer-color: currentColor;
+  --u-hover-state-layer-opacity: .08;
+  --u-focus-state-layer-opacity: .12;
+  --u-pressed-state-layer-opacity: .12;
+  --u-dragged-state-layer-opacity: .16;
+  --u-disabled-state-background-opacity: .12;
+  --u-disabled-state-label-opacity: .57;
+  --u-disabled-state-opacity: .38;
+  --u-high-emphasis-opacity: 1;
+  --u-low-emphasis-opacity: .75;
+  --u-lower-emphasis-opacity: .5;
+  --u-color-background: #{functions.get-color-var(surface)};
+  --u-color-on-background: #{functions.get-color-var(on-surface)};
+  --u-color-background-rgb: #{functions.get-color-rgb-var(surface)};
+  --u-color-on-background-rgb: #{functions.get-color-rgb-var(on-surface)};
+
+  --u-current-text-color-rgb: var(--u-color-on-background-rgb);
+  --u-text-opacity: var(--u-high-emphasis-opacity);
+
+  @each $name, $value in variables.$font-weights {
+    --u-font-weight-#{$name}: #{$value};
+  }
+}

package/scss/_functions.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+
+@use "variables";
+
+@import "functions/font";
+
+@function get-color-var($name) {
+  @return var(--u-color-#{$name}, map.get(variables.$colors, $name));
+}
+
+@function get-color-rgb-var($name) {
+  @return var(--u-color-#{$name}-rgb, map.get(variables.$rgb-colors, $name));
+}
+
+@function get-shape-corner-var($name) {
+  @return var(--u-shape-corner-#{$name}, map.get(variables.$shape-corner, $name));
+}
+
+@function get-spacing-var($name) {
+  @return var(--u-spacing-#{$name}, map.get(variables.$spacings, $name));
+}
+
+@function hexToRgbString($hexColor) {
+  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
+}

package/scss/_mixins.scss

@@ -0,0 +1,3 @@
+@import "mixins/breakpoints";
+@import "mixins/colors";
+@import "mixins/typo";

package/scss/_variables.scss

@@ -0,0 +1,110 @@
+@use "sass:map";
+
+$awesome-cubic-bezier: cubic-bezier(.19, 1, .22, 1) !default;
+
+$breakpoints: (
+  xs: 0,
+  sm: 600px,
+  md: 840px,
+  lg: 1200px,
+  xl: 1600px
+);
+
+$theme-colors: (
+  primary,
+  secondary,
+  tertiary
+);
+
+$color-roles: (
+  primary,
+  primary-container,
+  secondary,
+  secondary-container,
+  tertiary,
+  tertiary-container,
+  error,
+  error-container,
+  surface,
+  surface-variant,
+  surface-container,
+  surface-container-highest,
+  surface-container-high,
+  surface-container-low,
+  surface-container-lowest
+);
+
+$rgb-colors: (
+  primary: unquote("103, 80, 164"),
+  on-primary: unquote("255, 255, 255"),
+  primary-container: unquote("234, 221, 255"),
+  on-primary-container: unquote("33, 0, 93"),
+  secondary: unquote("98, 91, 113"),
+  secondary-container: unquote("232, 222, 248"),
+  on-secondary-container: unquote("29, 25, 43"),
+  on-secondary: unquote("255, 255, 255"),
+  tertiary: unquote("125, 82, 96"),
+  on-tertiary: unquote("255, 255, 255"),
+  tertiary-container: unquote("255, 216, 228"),
+  on-tertiary-container: unquote("49, 17, 29"),
+  error: unquote("179, 38, 30"),
+  on-error: unquote("255, 255, 255"),
+  error-container: unquote("249, 222, 220"),
+  on-error-container: unquote("65, 14, 11"),
+  surface: unquote("254, 247, 255"),
+  on-surface: unquote("29, 27, 32"),
+  surface-variant: unquote("231, 224, 236"),
+  on-surface-variant: unquote("73, 69, 79"),
+  surface-container-highest: unquote("230, 224, 233"),
+  surface-container-high: unquote("236, 230, 240"),
+  surface-container: unquote("243, 237, 247"),
+  surface-container-low: unquote("247, 242, 250"),
+  surface-container-lowest: unquote("255, 255, 255"),
+  inverse-surface: unquote("50, 47, 53"),
+  on-inverse-surface: unquote("245, 239, 247"),
+  outline: unquote("121, 116, 126"),
+  outline-variant: unquote("202, 196, 208"),
+  scrim: unquote("0, 0, 0"),
+  shadow: unquote("0, 0, 0")
+);
+
+$colors: ();
+
+@each $name, $value in $rgb-colors {
+  $colors: map.set($colors, $name, unquote("rgb(#{$value})"));
+}
+
+$fixed-colors: (
+  success,
+  info,
+  warning
+);
+
+$spacings: (
+  extra-small: 4px,
+  small: 8px,
+  medium: 16px,
+  large: 24px,
+  extra-large: 40px,
+);
+
+$font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$font-weights: (
+  thin: 100,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+  bolder: 900,
+);
+
+$shape-corner: (
+  none: 0,
+  extra-small: 4px,
+  small: 8px,
+  medium: 12px,
+  large: 16px,
+  extra-large: 28px,
+  full: 9999px
+);