@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

package/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -0,0 +1,55 @@
+@import "./sizes-parameters.css";
+@import "../base/rtl-parameters.css";
+@import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
+@import "./Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
+@import "./BusyIndicator-parameters.css";
+@import "./Button-parameters.css";
+@import "./CalendarHeader-parameters.css";
+@import "./Carousel-parameters.css";
+@import "./Card-parameters.css";
+@import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
+@import "./ColorPicker-parameters.css";
+@import "./DatePicker-parameters.css";
+@import "./DayPicker-parameters.css";
+@import "./Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
+@import "../base/GroupHeaderListItem-parameters.css";
+@import "./Input-parameters.css";
+@import "./InputIcon-parameters.css";
+@import "./Link-parameters.css";
+@import "../base/List-parameters.css";
+@import "./ListItem-parameters.css";
+@import "../base/ListItemBase-parameters.css";
+@import "./Menu-parameters.css";
+@import "./MonthPicker-parameters.css";
+@import "./MessageStrip-parameters.css";
+@import "./Panel-parameters.css";
+@import "./PopupsCommon-parameters.css";
+@import "../sap_horizon_hcb/ProgressIndicator-parameters";
+@import "./RadioButton-parameters.css";
+@import "./RatingIndicator-parameters.css";
+@import "./SegmentedButtton-parameters.css";
+@import "./Select-parameters.css";
+@import "./SplitButton-parameters.css";
+@import "./Switch-parameters.css";
+@import "./TabContainer-parameters.css";
+@import "./Table-parameters.css";
+@import "../base/TableColumn-parameters.css";
+@import "./TableRow-parameters.css";
+@import "./TableGroupRow-parameters.css";
+@import "./GrowingButton-parameters.css";
+@import "./TextArea-parameters.css";
+@import "./TimePicker-parameters.css";
+@import "../base/Toast-parameters.css";
+@import "./ToggleButton-parameters.css";
+@import "./WheelSlider-parameters.css";
+@import "./YearPicker-parameters.css";
+@import "./Token-parameters.css";
+@import "../base/Tokenizer-parameters.css";
+@import "./ValueStateMessage-parameters.css";
+@import "../base/MultiComboBox-parameters.css";
+@import "./SliderBase-parameters.css";
+@import "../base/StepInput-parameters.css";

package/src/themes/sap_horizon_hcw/sizes-parameters.css

@@ -0,0 +1,9 @@
+@import "../base/sizes-parameters.css";
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	/* SplitButton */
+	--_ui5_split_button_text_button_width: 2.25rem;
+	--_ui5_color_picker_slider_container_margin_top: -10px;
+}

package/src/types/ListGrowingMode.js

@@ -1,15 +1,48 @@
-import GrowingMode from "./GrowingMode.js";
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.ListGrowingMode.prototype
+ * @public
+ */
+const ListGrowingModes = {
+	/**
+	 * Component's <code>load-more</code> is fired upon pressing a "More" button.
+	 * at the bottom.
+	 * @public
+	 * @type {Button}
+	 */
+	Button: "Button",
+
+	/**
+	 * Component's <code>load-more</code> is fired upon scroll.
+	 * @public
+	 * @type {Scroll}
+	 */
+	Scroll: "Scroll",
+
+	/**
+	 * Component's growing is not enabled.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+};
 
 /**
  * @class
- * Defines the growing mode, used in the <code>ui5-List</code>.
+ * Defines the growing mode, used in the <code>ui5-list</code>.
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.types.ListGrowingMode
  * @public
  * @enum {string}
  */
-class ListGrowingMode extends GrowingMode {
+class ListGrowingMode extends DataType {
+	static isValid(value) {
+		return !!ListGrowingModes[value];
+	}
 }
 
+ListGrowingMode.generateTypeAccessors(ListGrowingModes);
+
 export default ListGrowingMode;

package/src/types/TableGrowingMode.js

@@ -1,4 +1,32 @@
-import GrowingMode from "./GrowingMode.js";
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.TableGrowingMode.prototype
+ * @public
+ */
+const TableGrowingModes = {
+	/**
+	 * Component's <code>load-more</code> is fired upon pressing a "More" button.
+	 * at the bottom.
+	 * @public
+	 * @type {Button}
+	 */
+	Button: "Button",
+
+	/**
+	 * Component's <code>load-more</code> is fired upon scroll.
+	 * @public
+	 * @type {Scroll}
+	 */
+	Scroll: "Scroll",
+
+	/**
+	 * Component's growing is not enabled.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+};
 
 /**
  * @class
@@ -9,7 +37,12 @@ import GrowingMode from "./GrowingMode.js";
  * @public
  * @enum {string}
  */
-class TableGrowingMode extends GrowingMode {
+class TableGrowingMode extends DataType {
+	static isValid(value) {
+		return !!TableGrowingModes[value];
+	}
 }
 
+TableGrowingMode.generateTypeAccessors(TableGrowingModes);
+
 export default TableGrowingMode;

package/dist/ComboBoxFilters.js

@@ -1,40 +0,0 @@
-const escapeReg = /[[\]{}()*+?.\\^$|]/g;
-
-const escapeRegExp = str => {
-	return str.replace(escapeReg, "\\$&");
-};
-
-const StartsWith = (value, items) => {
-	return items.filter(item => {
-		const lowerText = item.text.toLowerCase();
-
-		return lowerText.startsWith(value.toLowerCase());
-	});
-};
-
-const StartsWithPerTerm = (value, items) => {
-	const reg = new RegExp(`(^|\\s)${escapeRegExp(value.toLowerCase())}.*`, "g");
-
-	return items.filter(item => {
-		reg.lastIndex = 0;
-
-		return reg.test(item.text.toLowerCase());
-	});
-};
-
-const Contains = (value, items) => {
-	return items.filter(item => {
-		const lowerText = item.text.toLowerCase();
-
-		return lowerText.includes(value.toLowerCase());
-	});
-};
-
-const None = (_, items) => items;
-
-export {
-	StartsWithPerTerm,
-	StartsWith,
-	Contains,
-	None,
-};

package/dist/css/themes/Button.ie11.css

@@ -1 +0,0 @@
-[ui5-button][focused]{outline:none}[ui5-button][focused] .ui5-button-root{position:relative}[ui5-button][focused] .ui5-button-root:after{content:"";position:absolute;border-width:1px;border-style:dotted;border-color:var(--_ui5_button_focus_color);top:var(--_ui5_button_focus_offset);bottom:var(--_ui5_button_focus_offset);left:var(--_ui5_button_focus_offset);right:var(--_ui5_button_focus_offset)}[ui5-button][active] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Positive][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Positive][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Negative][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Negative][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Emphasized][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button] [ui5-icon].ui5-button-icon{height:var(--_ui5_button_icon_font_size);top:0}

package/dist/css/themes/ToggleButton.ie11.css

@@ -1 +0,0 @@
-[ui5-toggle-button][focused]{outline:none}[ui5-toggle-button][focused] .ui5-button-root{position:relative}[ui5-toggle-button][focused] .ui5-button-root:after{content:"";position:absolute;border-width:1px;border-style:dotted;border-color:var(--_ui5_button_focus_color);top:var(--_ui5_button_focus_offset);bottom:var(--_ui5_button_focus_offset);left:var(--_ui5_button_focus_offset);right:var(--_ui5_button_focus_offset)}[ui5-toggle-button][active] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button][design=Positive][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-toggle-button][design=Positive][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button][design=Negative][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-toggle-button][design=Negative][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button][design=Emphasized][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button] [ui5-icon].ui5-button-icon{height:var(--_ui5_button_icon_font_size);top:0}

package/dist/generated/themes/Button.ie11.css.js

@@ -1,8 +0,0 @@
-import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-
-import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js";
-import defaultTheme from "./sap_fiori_3/parameters-bundle.css.js";
-
-registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_fiori_3", () => defaultThemeBase);
-registerThemePropertiesLoader("@ui5/webcomponents", "sap_fiori_3", () => defaultTheme);
-export default {packageName:"@ui5/webcomponents",fileName:"themes/Button.ie11.css",content:"[ui5-button][focused]{outline:none}[ui5-button][focused] .ui5-button-root{position:relative}[ui5-button][focused] .ui5-button-root:after{content:\"\";position:absolute;border-width:1px;border-style:dotted;border-color:var(--_ui5_button_focus_color);top:var(--_ui5_button_focus_offset);bottom:var(--_ui5_button_focus_offset);left:var(--_ui5_button_focus_offset);right:var(--_ui5_button_focus_offset)}[ui5-button][active] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Positive][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Positive][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Negative][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Negative][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Emphasized][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button] [ui5-icon].ui5-button-icon{height:var(--_ui5_button_icon_font_size);top:0}"}

package/dist/generated/themes/ToggleButton.ie11.css.js

@@ -1,8 +0,0 @@
-import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-
-import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js";
-import defaultTheme from "./sap_fiori_3/parameters-bundle.css.js";
-
-registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_fiori_3", () => defaultThemeBase);
-registerThemePropertiesLoader("@ui5/webcomponents", "sap_fiori_3", () => defaultTheme);
-export default {packageName:"@ui5/webcomponents",fileName:"themes/ToggleButton.ie11.css",content:"[ui5-toggle-button][focused]{outline:none}[ui5-toggle-button][focused] .ui5-button-root{position:relative}[ui5-toggle-button][focused] .ui5-button-root:after{content:\"\";position:absolute;border-width:1px;border-style:dotted;border-color:var(--_ui5_button_focus_color);top:var(--_ui5_button_focus_offset);bottom:var(--_ui5_button_focus_offset);left:var(--_ui5_button_focus_offset);right:var(--_ui5_button_focus_offset)}[ui5-toggle-button][active] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button][design=Positive][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-toggle-button][design=Positive][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button][design=Negative][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-toggle-button][design=Negative][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button][design=Emphasized][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-toggle-button] [ui5-icon].ui5-button-icon{height:var(--_ui5_button_icon_font_size);top:0}"}

package/dist/webcomponentsjs/CHANGELOG.md

@@ -1,61 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic
-Versioning](https://semver.org/spec/v2.0.0.html).
-
-<!-- ## [Unreleased] -->
-
-## [2.6.0] - 2021-08-02
-
-- Add TS externs. ([#457](https://github.com/webcomponents/polyfills/pull/457))
-
-## [2.5.0] - 2020-10-21
-
-- Polyfill `Element#matches`.
-  ([#400](https://github.com/webcomponents/polyfills/pull/400))
-- Remove function declarations from platform polyfills to sastisfy internal lint
-  after import transforms.
-  ([#396](https://github.com/webcomponents/polyfills/pull/396))
-- Polyfill `Element#getAttributeNames`.
-  ([#393](https://github.com/webcomponents/polyfills/pull/393))
-- Add polyfills for ChildNode APIs.
-  ([#390](https://github.com/webcomponents/polyfills/pull/390))
-- Add polyfills for select ParentNode APIs.
-  ([#389](https://github.com/webcomponents/polyfills/pull/389))
-- Add `classList` support to `SVGElement`.
-  ([#391](https://github.com/webcomponents/polyfills/pull/391))
-- Add new entrypoints to webcomponentsjs for the 'platform' polyfills.
-  ([#385](https://github.com/webcomponents/polyfills/pull/385))
-
-## [2.4.4] - 2020-07-20
-
-- Fixed bug where Object.assign polyfill would copy non-enumerable properties.
-- Convert platform (`Array.from`, `CustomEvent`, `Promise` etc.) polyfills to
-  TypeScript ([#292](https://github.com/webcomponents/polyfills/pull/292))
-- Improve types for JSCompiler compatibility
-  ([#307](https://github.com/webcomponents/polyfills/pull/307))
-- README improvements
-  ([#128](https://github.com/webcomponents/polyfills/pull/128),
-  [#212](https://github.com/webcomponents/polyfills/pull/212),
-  [#214](https://github.com/webcomponents/polyfills/pull/214))
-
-## [2.4.3] - 2020-03-16
-
-- Maintenance release (no user-facing changes)
-
-## [2.4.2] - 2020-02-26
-
-- Remove unnecessary externs
-  ([#272](https://github.com/webcomponents/polyfills/pull/272))
-
-## [2.4.1] - 2020-01-09
-
-- Maintenance release (no user-facing changes)
-
-## [2.4.0] - 2019-11-12
-
-- Add on-demand patching mode
-  ([#189](https://github.com/webcomponents/polyfills/pull/189))

package/dist/webcomponentsjs/LICENSE.md

@@ -1,19 +0,0 @@
-# License
-
-Everything in this repo is BSD style license unless otherwise specified.
-
-Copyright (c) 2015 The Polymer Authors. All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright
-notice, this list of conditions and the following disclaimer.
-* 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.
-* Neither the name of Google Inc. 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 OWNER 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/dist/webcomponentsjs/README.md

@@ -1,246 +0,0 @@
-[![Build Status](https://travis-ci.org/webcomponents/webcomponentsjs.svg?branch=master)](https://travis-ci.org/webcomponents/webcomponentsjs)
-
-# webcomponents.js (v1 spec polyfills)
-
-> **Note**. For polyfills that work with the older Custom Elements and Shadow DOM v0 specs,
-> see the [v0 branch](https://github.com/webcomponents/webcomponentsjs/tree/v0).
-
-> **Note**. For polyfills that include HTML Imports,
-> see the [v1 branch](https://github.com/webcomponents/webcomponentsjs/tree/v1).
-
-A suite of polyfills supporting the [Web Components](http://webcomponents.org) specs:
-
-- **Custom Elements v1**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/), [tutorial](https://developers.google.com/web/fundamentals/getting-started/primers/customelements), [polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)).
-- **Shadow DOM v1**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/), [tutorial](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom),
-  [shadydom polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/shadydom), [shadycss polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss)).
-
-For browsers that need it, there are also some minor polyfills included:
-
-- [`HTMLTemplateElement`](https://github.com/webcomponents/polyfills/tree/master/packages/template)
-- [`Promise`](https://github.com/taylorhakes/promise-polyfill)
-- `Event`, `CustomEvent`, `MouseEvent` constructors and `Object.assign`, `Array.from`
-  (see [webcomponents-platform](https://github.com/webcomponents/webcomponents-platform))
-- [`URL constructor`](https://github.com/webcomponents/polyfills/tree/master/packages/url)
-
-## How to use
-
-### Install polyfills
-
-```bash
-npm install @webcomponents/webcomponentsjs
-```
-
-You can also load the code from a CDN such as unpkg: https://unpkg.com/@webcomponents/webcomponentsjs@^2/
-
-### Using `webcomponents-bundle.js`
-
-The `webcomponents-bundle.js` contains all of the web components polyfills and is
-suitable for use on any supported browser. All of the polyfill code will be loaded
-but each polyfill will only be used based on feature detection.
-The bundle includes Custom Elements, Shady DOM/CSS and generic platform polyfills
-(such as ES6 Promise, Constructable events, etc.) (needed by Internet Explorer 11),
-and Template (needed by IE 11 and Edge).
-
-The `webcomponents-bundle.js` is very simple to use but it does load code
-that is not needed on most modern browsers, slowing page load. For best performance,
-use the `webcomponents-loader.js`.
-
-Here's an example:
-
-```html
-<!-- load webcomponents bundle, which includes all the necessary polyfills -->
-<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-
-<!-- load the element -->
-<script type="module" src="my-element.js"></script>
-
-<!-- use the element -->
-<my-element></my-element>
-```
-
-### Using `webcomponents-loader.js`
-
-The `webcomponents-loader.js` is a client-side loader that dynamically loads the
-minimum polyfill bundle, using feature detection.
-
-`webcomponents-loader.js` can be loaded synchronously, or asynchronously depending on your needs.
-
-#### Inlining
-
-If you have inlined the source of `webcomponent-loader.js`, then you should specify `window.WebComponents.root` as the root from which to load the polyfills.
-For example:
-
-```html
-<script>
-  window.WebComponents = window.WebComponents || {};
-  window.WebComponents.root = 'node_modules/@webcomponents/webcomponentsjs/';
-</script>
-```
-
-#### Synchronous
-
-When loaded synchronously, `webcomponents-loader.js` behaves similarly to `webcomponents-bundle.js`.
-
-The appropriate bundle will be loaded with `document.write()` to ensure that WebComponent polyfills are available for subsequent scripts and modules.
-
-Here's an example:
-
-```html
-<!-- load the webcomponents loader, which injects the necessary polyfill bundle -->
-<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-
-<!-- load the element -->
-<script type="module" src="my-element.js"></script>
-
-<!-- use the element -->
-<my-element></my-element>
-```
-
-#### Asynchronous
-
-When loaded asychronously with the `defer` attribute, polyfill bundles will be loaded asynchronously,
-which means that scripts and modules that depend on webcomponents APIs _must_ be loaded
-using `WebComponents.waitFor` function.
-
-The `WebComponents.waitFor` function takes a callback function as an argument, and will evaluate that callback after the polyfill bundle has been loaded.
-
-The callback function should load scripts that need the polyfills (typically via `import('my-script.js')`) and
-should return a promise that resolves when all scripts have loaded.
-
-Here's an example:
-
-```html
-<!-- Load polyfills; note that "loader" will load these async -->
-<script
-  src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
-  defer
-></script>
-
-<!-- Load a custom element definitions in `waitFor` and return a promise -->
-<script type="module">
-  WebComponents.waitFor(() => {
-    // At this point we are guaranteed that all required polyfills have
-    // loaded, and can use web components API's.
-    // The standard pattern is to load element definitions that call
-    // `customElements.define` here.
-    // Note: returning the import's promise causes the custom elements
-    // polyfill to wait until all definitions are loaded and then upgrade
-    // the document in one batch, for better performance.
-    return import('my-element.js');
-  });
-</script>
-
-<!-- Use the custom element -->
-<my-element></my-element>
-```
-
-The `WebComponents.waitFor` function may be called multiple times, and the callback functions will be processed in order.
-
-Here's a more complicated example:
-
-```html
-<!-- Load polyfills; note that "loader" will load these async -->
-<script
-  src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
-  defer
-></script>
-
-<script type="module">
-  WebComponents.waitFor(async () => {
-    if (!window.fetch) {
-      await import('node_modules/fetch-polyfill/fetch.js');
-    }
-    return import('my-element.js');
-  });
-</script>
-
-<script type="module"></script>
-```
-
-### WebComponentsReady event
-
-The `WebComponentsReady` event is fired when polyfills and user scripts have loaded and custom elements have been upgraded. This event is generally not needed; however, it may be useful in some cases like testing. If imperative code should wait until a specific custom element definition has loaded, it can use the platform `customElements.whenDefined` API.
-
-### `custom-elements-es5-adapter.js`
-
-According to the spec, only ES6 classes (https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance) may be passed to the _native_ `customElements.define` API. For best performance, ES6 should be served to browsers that support it, and ES5 code should be serve to those that don't. Since this may not always be possible, it may make sense to compile and serve ES5 to all browsers. However, if you do so, ES5-style custom element classes will now **not** work on browsers with native Custom Elements because ES5-style classes cannot properly extend ES6 classes, like `HTMLElement`.
-
-As a workaround, if your project has been compiled to ES5, load `custom-elements-es5-adapter.js` before defining Custom Elements. This adapter will automatically wrap ES5.
-
-**The adapter must NOT be compiled.**
-
-## Browser Support
-
-The polyfills are intended to work in the latest versions of evergreen browsers. See below
-for our complete browser support matrix:
-
-| Polyfill        | Edge | IE11+ | Chrome\* | Firefox\* | Safari 9+\* | Chrome Android\* | Mobile Safari\* |
-| --------------- | :--: | :---: | :------: | :-------: | :---------: | :--------------: | :-------------: |
-| Custom Elements |  ✓   |   ✓   |    ✓     |     ✓     |      ✓      |        ✓         |        ✓        |
-| Shady CSS/DOM   |  ✓   |   ✓   |    ✓     |     ✓     |      ✓      |        ✓         |        ✓        |
-
-\*Indicates the current version of the browser
-
-The polyfills may work in older browsers, however require additional polyfills (such as classList, or other [platform](https://github.com/webcomponents/webcomponents-platform)
-polyfills) to be used. We cannot guarantee support for browsers outside of our compatibility matrix.
-
-## Known Issues
-
-- [Style encapsulation (inline styling in components) does not work out of the box](#shadycss)
-- [Custom element's constructor property is unreliable](#constructor)
-- [ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)
-
-### Style encapsulation (inline styling in components) does not work out of the box. <a id="shadycss"></a>
-
-The ShadowDOM polyfill does not properly support CSS in ShadowDoM out of the box:
-
-- Any styles inside components have an effect on the whole document (instead of on the component only - the encapsulation is broken).
-- Any shadow-dom specific selectors (like `:host`) do not work.
-
-You can fix those issues by manually calling the `ShadyCSS` APIs. See [ShadyCSS usage](https://github.com/webcomponents/shadycss#usage).
-
-### Custom element's constructor property is unreliable <a id="constructor"></a>
-
-See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.
-
-In Edge and IE, instances of Custom Elements have a `constructor` property of `HTMLUnknownElementConstructor` and `HTMLUnknownElement`, respectively. It's unsafe to rely on this property for checking element types.
-
-It's worth noting that `customElement.__proto__.__proto__.constructor` is `HTMLElementPrototype` and that the prototype chain isn't modified by the polyfills(onto `ElementPrototype`, etc.)
-
-### ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedparens"></a>
-
-ShadyCSS `:host()` rules can only have (at most) 1-level of nested parentheses in its argument selector under ShadyCSS. For example, `:host(.zot)` and `:host(.zot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not.
-
-### Manually Building
-
-If you wish to build the bundles yourself, you'll need `node` and `npm` on your system:
-
-- install [node.js](http://nodejs.org/) using the instructions on their website
-- use `npm` to install [gulp.js](http://gulpjs.com/): `npm install -g gulp`
-- make sure you have Java installed per https://www.npmjs.com/package/google-closure-compiler#java-version
-
-Now you are ready to build the polyfills with:
-
-    # install dependencies
-    npm install
-    # build
-    npm run build
-
-The builds will be placed into the root directory.
-
-## Contribute
-
-See the [contributing guide](CONTRIBUTING.md)
-
-## License
-
-Everything in this repository is BSD style license unless otherwise specified.
-
-Copyright (c) 2015 The Polymer Authors. All rights reserved.
-
-## Changes in version 2.x
-
-- The HTML Imports polyfill has been removed. Given that ES modules have shipped in
-  most browsers, the expectation is that web components code will be loaded via
-  ES modules.
-- When using `webcomponents-loader.js` with the `defer` attribute, scripts that rely on the polyfills _must_ be loaded using `WebComponents.waitFor(loadCallback)`.