@ptcwebops/ptcw-design 0.7.5 → 0.7.7

package/dist/types/index.d.ts

@@ -1 +1 @@
-export { Components, JSX } from './components';
+export { Components, JSX } from './components';

package/dist/types/stencil-public-runtime.d.ts

@@ -221,7 +221,9 @@ export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,29 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +284,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +293,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**

package/dist/types/utils/component.d.ts

@@ -1 +1 @@
-export declare const hasSlot: (HTMLElement: any, string?: any) => boolean;
+export declare const hasSlot: (HTMLElement: any, string?: any) => boolean;

package/dist/types/utils/interfaces.d.ts

@@ -1,31 +1,31 @@
-declare type CssClassMap = {
-  [className: string]: boolean;
-};
-declare type StylesMap = {
-  [key: string]: string;
-};
-declare let ResponsiveBgVariables: {
-  envs: string[];
-  selector: string;
-  interval: number;
-};
-declare let ResponsivePictureVariables: {
-  envs: string[];
-  selector: string;
-  interval: number;
-};
-export { StylesMap, CssClassMap, ResponsiveBgVariables, ResponsivePictureVariables };
-export interface ITabData {
-  select: () => void;
-  unselect: () => void;
-  name: string;
-}
-export interface ITabHeaderData extends ITabData {
-  id: string;
-}
-export interface ITabContentData extends ITabData {
-}
-export interface ITabGroup {
-  header: ITabHeaderData;
-  content: ITabContentData;
-}
+declare type CssClassMap = {
+  [className: string]: boolean;
+};
+declare type StylesMap = {
+  [key: string]: string;
+};
+declare let ResponsiveBgVariables: {
+  envs: string[];
+  selector: string;
+  interval: number;
+};
+declare let ResponsivePictureVariables: {
+  envs: string[];
+  selector: string;
+  interval: number;
+};
+export { StylesMap, CssClassMap, ResponsiveBgVariables, ResponsivePictureVariables };
+export interface ITabData {
+  select: () => void;
+  unselect: () => void;
+  name: string;
+}
+export interface ITabHeaderData extends ITabData {
+  id: string;
+}
+export interface ITabContentData extends ITabData {
+}
+export interface ITabGroup {
+  header: ITabHeaderData;
+  content: ITabContentData;
+}

package/dist/types/utils/utils.d.ts

@@ -1,4 +1,4 @@
-export declare function format(first: string, middle: string, last: string): string;
-export declare function MapDOM(domElement: HTMLElement, selector?: string, toString?: boolean): any;
-export declare function generateUUID(): string;
-export declare function debounce(func: Function, wait: number, referer?: any): (e: any) => void;
+export declare function format(first: string, middle: string, last: string): string;
+export declare function MapDOM(domElement: HTMLElement, selector?: string, toString?: boolean): any;
+export declare function generateUUID(): string;
+export declare function debounce(func: Function, wait: number, referer?: any): (e: any) => void;

package/loader/package.json

@@ -1,5 +1,6 @@
 {
   "name": "ptcw-design-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/package.json

@@ -1,59 +1,61 @@
-{
-  "name": "@ptcwebops/ptcw-design",
-  "version": "0.7.5",
-  "description": "Stencil Component Starter",
-  "main": "dist/index.cjs.js",
-  "module": "dist/custom-elements/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/custom-elements/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/ptcw-design/ptcw-design.esm.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "test.unit": "stencil test --spec",
-    "test.end-to-end": "stencil test --e2e",
-    "test.unit.watch": "stencil test --spec --watch",
-    "generate": "stencil generate",
-    "prepare": "stencil build --docs"
-  },
-  "dependencies": {
-    "@daveberning/griddle": "^0.3.0",
-    "@stencil/core": "^2.13.0",
-    "@teamhive/lottie-player": "^1.0.0",
-    "npmrc": "^1.1.1",
-    "resize-observer-polyfill": "^1.5.1"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@stencil/sass": "^1.4.1",
-    "@types/jest": "^27.0.3",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
-    "mobile-select": "^1.1.2",
-    "puppeteer": "^10.0.0",
-    "stencil-inline-svg": "^1.1.0"
-  },
-  "directories": {
-    "doc": "docs"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://@bitbucket.org/ptc-sitecore-workspace/ptc-design-system.git"
-  },
-  "keywords": [
-    "design system",
-    "web components",
-    "stenciljs"
-  ],
-  "author": "Yunfeng Qian",
-  "homepage": "https://bitbucket.org/ptc-sitecore-workspace/ptc-design-system#readme"
-}
+{
+  "name": "@ptcwebops/ptcw-design",
+  "version": "0.7.7",
+  "description": "Stencil Component Starter",
+  "main": "dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/custom-elements/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/ptcw-design/ptcw-design.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "test.unit": "stencil test --spec",
+    "test.end-to-end": "stencil test --e2e",
+    "test.unit.watch": "stencil test --spec --watch",
+    "generate": "stencil generate",
+    "prepare": "stencil build --docs"
+  },
+  "dependencies": {
+    "@daveberning/griddle": "^0.3.0",
+    "@stencil/core": "^2.20.0",
+    "@teamhive/lottie-player": "^1.0.0",
+    "ellipsize": "^0.5.1",
+    "enquire.js": "^2.1.6",
+    "npmrc": "^1.1.1",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@stencil/sass": "^1.4.1",
+    "@types/jest": "^27.0.3",
+    "jest": "^27.4.5",
+    "jest-cli": "^27.4.5",
+    "mobile-select": "^1.1.2",
+    "puppeteer": "^10.0.0",
+    "stencil-inline-svg": "^1.1.0"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://@bitbucket.org/ptc-sitecore-workspace/ptc-design-system.git"
+  },
+  "keywords": [
+    "design system",
+    "web components",
+    "stenciljs"
+  ],
+  "author": "Yunfeng Qian",
+  "homepage": "https://bitbucket.org/ptc-sitecore-workspace/ptc-design-system#readme"
+}

package/readme.md

@@ -1,11 +1,11 @@
-![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
-
-# PTC Design 0.7.5
-
-The site is the place for documentation on PTC Design System
-
-## Building the Site
-
-To build the site from the source, ensure you're using the most recent versions of Node and Npm, and pull the latest from master. Next, run `npm install`, `npm run docs` to build the docs files and `npm start` to launch the site in development mode.
-
-## License
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+# PTC Design 0.7.7
+
+The site is the place for documentation on PTC Design System
+
+## Building the Site
+
+To build the site from the source, ensure you're using the most recent versions of Node and Npm, and pull the latest from master. Next, run `npm install`, `npm run docs` to build the docs files and `npm start` to launch the site in development mode.
+
+## License

package/dist/cjs/ptc-nav-item.cjs.entry.js

@@ -1,94 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b3fabe79.js');
-
-const ptcNavItemCss = ":host{display:block;width:100%}@media only screen and (min-width: 992px){:host{width:auto}}:host([depth=\"2\"]) a{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);margin-bottom:var(--ptc-element-spacing-03);padding-left:50px}@media only screen and (min-width: 992px){:host([depth=\"2\"]) a{padding-left:0px}}:host([depth=\"1\"]) a{font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);padding:20px 25px}:host([nav-type=secondary-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}:host([nav-type=language-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}@media only screen and (min-width: 992px){.primary-nav~.ptc-nav-children{position:absolute;left:0}.primary-nav~.ptc-nav-children ::slotted(.nav-tab){background-color:var(--color-gray-11);display:flex;width:100vw}.language-nav~.ptc-nav-children{position:absolute;background-color:var(--color-gray-11)}}a[aria-expanded=true]~.ptc-nav-children{padding-top:var(--ptc-element-spacing-04);max-height:2000px}@media only screen and (min-width: 992px){a[aria-expanded=true]~.ptc-nav-children{padding-top:0}}.ptc-nav-children{overflow:hidden;max-height:0;transition:max-height var(--ptc-transition-medium) var(--ptc-ease-inout), padding-top var(--ptc-transition-medium) var(--ptc-ease-inout)}a{color:var(--color-white);text-transform:uppercase;display:block;outline:none;text-decoration:none}";
-
-let PtcNavItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.menuItemToggled = index.createEvent(this, "menuItemToggled", 7);
-    /**
-     * Link URL
-     */
-    this.url = undefined;
-    /**
-     * Nav Description
-     */
-    this.label = '';
-    /**
-     * If the current nav item is expanded
-     */
-    this.ariaExpanded = false;
-    /**
-     * Depth of the current nav item
-     */
-    this.depth = 0;
-    /**
-     * If the current nav item has children nav items
-     */
-    this.hasChildren = false;
-    /**
-     * If the parent nav item of the current one is expanded
-     */
-    this.parentExpanded = false;
-    /**
-     * Nav Item Type
-     */
-    this.navType = undefined;
-  }
-  /**
-   * Watch
-   */
-  expandedHandler(newValue) {
-    const children = Array.prototype.slice.call(this.el.children);
-    children.forEach(child => {
-      child.parentExpanded = newValue;
-    });
-    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
-  }
-  /**
-   * Event Listener
-   */
-  handleClick(e) {
-    if (this.hasChildren) {
-      e.preventDefault();
-      this.ariaExpanded = !this.ariaExpanded;
-    }
-  }
-  handleResize(ev) {
-    console.log('the body was scrolled', ev);
-  }
-  /**
-   * Lifecycle method
-   */
-  componentWillRender() {
-    this.hasChildren = !!this.el.hasChildNodes();
-    let parentMenu = this.el.closest('ptc-nav-item');
-    let nextParentMenu;
-    this.depth = 0;
-    while (parentMenu) {
-      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
-      if (nextParentMenu === parentMenu) {
-        break;
-      }
-      else {
-        parentMenu = nextParentMenu;
-        this.depth = this.depth + 1;
-      }
-    }
-  }
-  render() {
-    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
-    return (index.h(index.Host, { role: "none" }, index.h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType }, index.h("span", null, this.label)), this.hasChildren && (index.h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, index.h("slot", null)))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "ariaExpanded": ["expandedHandler"]
-  }; }
-};
-PtcNavItem.style = ptcNavItemCss;
-
-exports.ptc_nav_item = PtcNavItem;

package/dist/cjs/ptc-nav.cjs.entry.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b3fabe79.js');
-
-const ptcNavCss = ":host{display:block}.nav-style{background-color:var(--color-gray-11);display:block}@media only screen and (min-width: 992px){.nav-style{display:grid;grid-template-columns:auto fit-content(76px);grid-template-rows:fit-content(22px) 1fr;grid-template-areas:\"secondary secondary\" \"primary language\"}.primary-nav{grid-area:primary}.secondary-nav{grid-area:secondary}.language-nav{grid-area:language}}";
-
-let PtcNav = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("nav", { class: "nav-style" }, index.h("div", { class: "primary-nav", part: "primary-nav-part" }, index.h("slot", { name: "primary-nav-content" })), index.h("div", { class: "secondary-nav", part: "secondary-nav-part" }, index.h("slot", { name: "secondary-nav-content" })), index.h("div", { class: "language-nav", part: "language-nav-part" }, index.h("slot", { name: "language-nav-content" })))));
-  }
-};
-PtcNav.style = ptcNavCss;
-
-exports.ptc_nav = PtcNav;

package/dist/collection/components/ptc-nav/ptc-nav.css

@@ -1,29 +0,0 @@
-:host {
-  display: block;
-}
-
-.nav-style {
-  background-color: var(--color-gray-11);
-  display: block;
-}
-
-@media only screen and (min-width: 992px) {
-  .nav-style {
-    display: grid;
-    grid-template-columns: auto fit-content(76px);
-    grid-template-rows: fit-content(22px) 1fr;
-    grid-template-areas: "secondary secondary" "primary language";
-  }
-
-  .primary-nav {
-    grid-area: primary;
-  }
-
-  .secondary-nav {
-    grid-area: secondary;
-  }
-
-  .language-nav {
-    grid-area: language;
-  }
-}

package/dist/collection/components/ptc-nav/ptc-nav.js

@@ -1,21 +0,0 @@
-import { Component, Host, h } from '@stencil/core';
-export class PtcNav {
-  render() {
-    return (h(Host, null,
-      h("nav", { class: "nav-style" },
-        h("div", { class: "primary-nav", part: "primary-nav-part" },
-          h("slot", { name: "primary-nav-content" })),
-        h("div", { class: "secondary-nav", part: "secondary-nav-part" },
-          h("slot", { name: "secondary-nav-content" })),
-        h("div", { class: "language-nav", part: "language-nav-part" },
-          h("slot", { name: "language-nav-content" })))));
-  }
-  static get is() { return "ptc-nav"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-nav.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-nav.css"]
-  }; }
-}

package/dist/collection/components/ptc-nav-item/ptc-nav-item.css

@@ -1,81 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-@media only screen and (min-width: 992px) {
-  :host {
-    width: auto;
-  }
-}
-
-:host([depth="2"]) a {
-  font-family: var(--ptc-font-secondary-latin);
-  font-size: var(--ptc-font-size-x-small);
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: var(--ptc-line-height-dense);
-  letter-spacing: var(--ptc-letter-spacing-dense);
-  margin-bottom: var(--ptc-element-spacing-03);
-  padding-left: 50px;
-}
-@media only screen and (min-width: 992px) {
-  :host([depth="2"]) a {
-    padding-left: 0px;
-  }
-}
-
-:host([depth="1"]) a {
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: var(--ptc-line-height-dense);
-  letter-spacing: var(--ptc-letter-spacing-dense);
-  padding: 20px 25px;
-}
-
-:host([nav-type=secondary-nav]) a {
-  font-size: var(--ptc-font-size-xxx-small);
-  font-weight: var(--ptc-font-weight-thin);
-}
-
-:host([nav-type=language-nav]) a {
-  font-size: var(--ptc-font-size-xxx-small);
-  font-weight: var(--ptc-font-weight-thin);
-}
-
-@media only screen and (min-width: 992px) {
-  .primary-nav ~ .ptc-nav-children {
-    position: absolute;
-    left: 0;
-  }
-  .primary-nav ~ .ptc-nav-children ::slotted(.nav-tab) {
-    background-color: var(--color-gray-11);
-    display: flex;
-    width: 100vw;
-  }
-
-  .language-nav ~ .ptc-nav-children {
-    position: absolute;
-    background-color: var(--color-gray-11);
-  }
-}
-a[aria-expanded=true] ~ .ptc-nav-children {
-  padding-top: var(--ptc-element-spacing-04);
-  max-height: 2000px;
-}
-@media only screen and (min-width: 992px) {
-  a[aria-expanded=true] ~ .ptc-nav-children {
-    padding-top: 0;
-  }
-}
-
-.ptc-nav-children {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height var(--ptc-transition-medium) var(--ptc-ease-inout), padding-top var(--ptc-transition-medium) var(--ptc-ease-inout);
-}
-
-a {
-  color: var(--color-white);
-  text-transform: uppercase;
-  display: block;
-  outline: none;
-  text-decoration: none;
-}