+ ${this.selectedElements.map((option, i) => {
+ const highlight = Boolean(
+ this.removeChipOnNextBackspace && i === this.selectedElements.length - 1,
+ );
+ return this._selectedElementTemplate(option, highlight);
+ })}
+
+ `;
+ }
+
+ render() {
+ return html` ${this._selectedElementsTemplate()} `;
+ }
+
+ /**
+ * @param {{ key: string; }} ev
+ */
+ __textboxOnKeyup(ev) {
+ if (ev.key === 'Backspace') {
+ if (!this._inputNode.value) {
+ if (this.removeChipOnNextBackspace && this.selectedElements.length) {
+ this.selectedElements[this.selectedElements.length - 1].checked = false;
+ }
+ this.removeChipOnNextBackspace = true;
+ }
+ } else {
+ this.removeChipOnNextBackspace = false;
+ }
+ }
+
+ __restoreBackspace() {
+ this.removeChipOnNextBackspace = false;
+ }
+}
+customElements.define('demo-selection-display', DemoSelectionDisplay);
diff --git a/packages/ui/docs/components/combobox/src/gh-combobox/gh-button.js b/packages/ui/docs/components/combobox/src/gh-combobox/gh-button.js
new file mode 100644
index 000000000..c24f2d33a
--- /dev/null
+++ b/packages/ui/docs/components/combobox/src/gh-combobox/gh-button.js
@@ -0,0 +1,69 @@
+import { css, html } from 'lit';
+import { LionButton } from '@lion/ui/button.js';
+
+export class GhButton extends LionButton {
+ static get properties() {
+ return {
+ value: String,
+ };
+ }
+
+ static get styles() {
+ return css`
+ :host {
+ outline: none;
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ padding: 5px 16px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ white-space: nowrap;
+ vertical-align: middle;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border: 1px solid;
+ border-radius: 6px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ color: #24292e;
+ background-color: #fafbfc;
+ border-color: rgba(27, 31, 35, 0.15);
+ box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
+ transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+ }
+
+ :host(:hover) {
+ background-color: #f3f4f6;
+ transition-duration: 0.1s;
+ }
+
+ :host ::slotted([slot='before']) {
+ margin-right: 4px;
+ }
+
+ /**
+ * TODO: this doesn't have to be light dom anymore in LionButton,
+ * just spawning a hidden native button on submit would be enough
+ */
+ :host ::slotted(button) {
+ position: absolute;
+ opacity: 0;
+ }
+ `;
+ }
+
+ render() {
+ return html`
+
+
+
+
+
+ ${this._groupOneTemplate()}
+
+
+ ${this._groupTwoTemplate()}
+
+
+
+
+
+
+ `;
+ }
+
+ /**
+ * @override LionCombobox: restore to values FormControlMixin
+ */
+ // eslint-disable-next-line class-methods-use-this
+ _groupTwoTemplate() {
+ return html` ${this._inputGroupTemplate()} ${this._feedbackTemplate()} `;
+ }
+
+ get slots() {
+ return {
+ ...super.slots,
+ 'selection-display': () =>
+ renderLitAsNode(html`
+ ${googleSearchIcon}
`
+ : html`
+
+
+
+ `;
+ }
+
+ _googleSearchBtnsTemplate() {
+ return html`
+
+
+
+
+
`;
+ }
+
+ /**
+ * @enhance FormControlMixin - add google search buttons
+ */
+ _groupTwoTemplate() {
+ return html`${super._groupTwoTemplate()} ${!this.opened ? this._googleSearchBtnsTemplate() : ''} `;
+ }
+
+ get slots() {
+ return {
+ ...super.slots,
+ label: () => renderLitAsNode(html`
+ ${this._labelTemplate()}
+
+ `;
+ }
+
+ /**
+ * @enhance FormControlMixin
+ */
+ _inputGroupTemplate() {
+ return html`
+
+ ${this._inputGroupBeforeTemplate()}
+
+ `;
+ }
+ },
+);
diff --git a/packages/ui/docs/components/combobox/src/md-combobox/md-combobox.js b/packages/ui/docs/components/combobox/src/md-combobox/md-combobox.js
new file mode 100644
index 000000000..81250a5dd
--- /dev/null
+++ b/packages/ui/docs/components/combobox/src/md-combobox/md-combobox.js
@@ -0,0 +1,89 @@
+import { css, html } from 'lit';
+import { LionOption } from '@lion/ui/listbox.js';
+import { LionCombobox } from '@lion/ui/combobox.js';
+import { MdFieldMixin } from './MdFieldMixin.js';
+import './style/md-ripple.js';
+import './style/load-roboto.js';
+
+// TODO: insert ink wc here
+export class MdOption extends LionOption {
+ static get styles() {
+ return [
+ ...super.styles,
+ css`
+ :host {
+ position: relative;
+ padding: 8px;
+ }
+
+ :host([focused]) {
+ background: lightgray;
+ }
+
+ :host([active]) {
+ color: #1867c0 !important;
+ caret-color: #1867c0 !important;
+ }
+
+ :host ::slotted(.md-highlight) {
+ color: rgba(0, 0, 0, 0.38);
+ background: #eee;
+ }
+ `,
+ ];
+ }
+
+ /**
+ * @override
+ * @param {string} matchingString
+ */
+ onFilterMatch(matchingString) {
+ const { innerHTML } = this;
+ this.__originalInnerHTML = innerHTML;
+ this.innerHTML = innerHTML.replace(
+ new RegExp(`(${matchingString})`, 'i'),
+ `$1`,
+ );
+ this.style.display = '';
+ }
+
+ /**
+ * @override
+ */
+ onFilterUnmatch() {
+ if (this.__originalInnerHTML) {
+ this.innerHTML = this.__originalInnerHTML;
+ }
+ this.style.display = 'none';
+ }
+
+ render() {
+ return html`
+ ${super.render()}
+
+ ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
+ ${this._inputGroupSuffixTemplate()}
+
+ ${this._inputGroupAfterTemplate()}
+
+
+
+
+
`;
+ }
+
+ /**
+ * @configure LionCombobox
+ * @param {string} matchingString
+ */
+ onFilterMatch(matchingString) {
+ this.__originalTitle = this.title;
+ const newInnerHTML = this.title.replace(new RegExp(`(${matchingString})`, 'i'), `$1`);
+ const helperNode = document.createElement('div');
+ // For Safari, we need to add a label to the element
+ helperNode.innerHTML = `${newInnerHTML}`;
+ [this.title] = helperNode.children;
+ this.style.cssText = `
+ max-height: 500px;
+ opacity: 1;
+ `;
+ }
+
+ /**
+ * @configure LionCombobox
+ * @param {string} [curValue]
+ * @param {string} [prevValue]
+ */
+ // eslint-disable-next-line no-unused-vars
+ onFilterUnmatch() {
+ if (this.__originalTitle) {
+ this.title = this.__originalTitle;
+ }
+ this.style.cssText = `
+ max-height: 0;
+ opacity: 0;
+ `;
+ }
+}
+customElements.define('wa-option', WaOption);
+
+class WaCombobox extends LionCombobox {
+ static get styles() {
+ return [
+ ...super.styles,
+ css`
+ :host {
+ font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui,
+ BlinkMacSystemFont, Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari,
+ sans-serif;
+ }
+
+ .input-group__container {
+ display: flex;
+ border-bottom: none;
+ }
+
+ * > ::slotted([role='listbox']) {
+ max-height: none;
+ }
+
+ * > ::slotted([slot='input']) {
+ font-size: 14px;
+ }
+
+ .input-group {
+ padding: 15px;
+ background: #f6f6f6;
+ }
+
+ .input-group__prefix {
+ margin-right: 20px;
+ color: #999;
+ display: flex;
+ }
+
+ .input-group__container {
+ border-radius: 18px;
+ background: white;
+ padding: 7px;
+ padding-left: 16px;
+ }
+
+ /** Undo Popper */
+ #overlay-content-node-wrapper {
+ position: static !important;
+ width: auto !important;
+ transform: none !important;
+
+ /* height: 300px;
+ overflow: scroll; */
+ }
+ `,
+ ];
+ }
+
+ get slots() {
+ return {
+ ...super.slots,
+ prefix: () =>
+ renderLitAsNode(
+ html``,
+ ),
+ };
+ }
+
+ constructor() {
+ super();
+
+ /** @configure OverlayMixin */
+ this.opened = true;
+ /** @configure LionCombobox */
+ this.showAllOnEmpty = true;
+ /** @configure LionCombobox */
+ this.rotateKeyboardNavigation = false;
+ }
+}
+customElements.define('wa-combobox', WaCombobox);
diff --git a/packages/ui/docs/components/combobox/use-cases.md b/packages/ui/docs/components/combobox/use-cases.md
new file mode 100644
index 000000000..238555e99
--- /dev/null
+++ b/packages/ui/docs/components/combobox/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/combobox/use-cases.md)
diff --git a/packages/ui/docs/components/dialog/index.md b/packages/ui/docs/components/dialog/index.md
new file mode 100644
index 000000000..c2c51ff0c
--- /dev/null
+++ b/packages/ui/docs/components/dialog/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/dialog/index.md)
diff --git a/packages/ui/docs/components/dialog/overview.md b/packages/ui/docs/components/dialog/overview.md
new file mode 100644
index 000000000..97b95480e
--- /dev/null
+++ b/packages/ui/docs/components/dialog/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/dialog/overview.md)
diff --git a/packages/ui/docs/components/dialog/src/demo-dialog-style.js b/packages/ui/docs/components/dialog/src/demo-dialog-style.js
new file mode 100644
index 000000000..33b081365
--- /dev/null
+++ b/packages/ui/docs/components/dialog/src/demo-dialog-style.js
@@ -0,0 +1,3 @@
+import { css } from 'lit';
+
+export default css``;
diff --git a/packages/ui/docs/components/dialog/src/demoStyle.js b/packages/ui/docs/components/dialog/src/demoStyle.js
new file mode 100644
index 000000000..0be789d4d
--- /dev/null
+++ b/packages/ui/docs/components/dialog/src/demoStyle.js
@@ -0,0 +1,39 @@
+import { css } from 'lit';
+
+export const demoStyle = css`
+ .demo-box {
+ width: 200px;
+ background-color: white;
+ border-radius: 2px;
+ border: 1px solid grey;
+ padding: 8px;
+ }
+ .demo-box_placements {
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+ }
+ lion-dialog {
+ display: block;
+ padding: 10px;
+ margin-bottom: 10px;
+ }
+ .close-button {
+ color: black;
+ font-size: 28px;
+ line-height: 28px;
+ }
+ .demo-box__column {
+ display: flex;
+ flex-direction: column;
+ }
+ .demo-dialog--content {
+ display: block;
+ position: absolute;
+ font-size: 16px;
+ color: white;
+ background-color: black;
+ border-radius: 4px;
+ padding: 8px;
+ }
+`;
diff --git a/packages/ui/docs/components/dialog/src/slots-dialog-content.js b/packages/ui/docs/components/dialog/src/slots-dialog-content.js
new file mode 100644
index 000000000..6b481427d
--- /dev/null
+++ b/packages/ui/docs/components/dialog/src/slots-dialog-content.js
@@ -0,0 +1,32 @@
+import { LitElement, html, css } from 'lit';
+
+class SlotsDialogContent extends LitElement {
+ static get styles() {
+ return [
+ css`
+ :host {
+ background-color: #fff;
+ }
+ .actions {
+ border-top: 2px solid green;
+ }
+ `,
+ ];
+ }
+
+ _closeOverlay() {
+ this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
+ }
+
+ render() {
+ return html`
+
+
+
+ 
+ ${this.image
+ ? ''
+ : html`
+
+
+
+
+
`}
+
+
+
+
+
+
+
+ ${this.title}
+
+
+
+
+ ${this.time}
+
+
+
+
+
+ ${this.text}
+
+
+ This content contains an actions slot
+
+
+
+ `;
+ }
+}
+
+customElements.define('slots-dialog-content', SlotsDialogContent);
diff --git a/packages/ui/docs/components/dialog/src/styled-dialog-content.js b/packages/ui/docs/components/dialog/src/styled-dialog-content.js
new file mode 100644
index 000000000..799dae2e8
--- /dev/null
+++ b/packages/ui/docs/components/dialog/src/styled-dialog-content.js
@@ -0,0 +1,38 @@
+import { LitElement, html, css } from 'lit';
+
+class StyledDialogContent extends LitElement {
+ static get styles() {
+ return [
+ css`
+ :host {
+ background-color: #fff;
+ }
+ .nice {
+ font-weight: bold;
+ color: green;
+ }
+ .close-button {
+ color: black;
+ font-size: 28px;
+ line-height: 28px;
+ }
+ `,
+ ];
+ }
+
+ _closeOverlay() {
+ this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
+ }
+
+ render() {
+ return html`
+ Hello person who opened the dialog!
+
+
+ `;
+ }
+}
+
+customElements.define('styled-dialog-content', StyledDialogContent);
diff --git a/packages/ui/docs/components/dialog/use-cases.md b/packages/ui/docs/components/dialog/use-cases.md
new file mode 100644
index 000000000..f295536ca
--- /dev/null
+++ b/packages/ui/docs/components/dialog/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/dialog/use-cases.md)
diff --git a/packages/ui/docs/components/drawer/index.md b/packages/ui/docs/components/drawer/index.md
new file mode 100644
index 000000000..27ad39193
--- /dev/null
+++ b/packages/ui/docs/components/drawer/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/drawer/index.md)
diff --git a/packages/ui/docs/components/drawer/overview.md b/packages/ui/docs/components/drawer/overview.md
new file mode 100644
index 000000000..07d4b8c97
--- /dev/null
+++ b/packages/ui/docs/components/drawer/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/drawer/overview.md)
diff --git a/packages/ui/docs/components/drawer/src/demoStyle.js b/packages/ui/docs/components/drawer/src/demoStyle.js
new file mode 100644
index 000000000..763a89c60
--- /dev/null
+++ b/packages/ui/docs/components/drawer/src/demoStyle.js
@@ -0,0 +1,71 @@
+import { css } from 'lit';
+
+export const demoStyle = css`
+ .demo-container {
+ height: 400px;
+ display: flex;
+ flex-direction: row;
+ }
+
+ .demo-container > div {
+ padding: 8px;
+ background-color: #f6f8fa;
+ }
+
+ lion-drawer {
+ height: 400px;
+ }
+
+ button {
+ all: revert !important;
+ border: 2px solid #000000;
+ background-color: rgb(239, 239, 239);
+ }
+
+ .demo-container-top {
+ height: 400px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .demo-container-top > div {
+ padding: 8px;
+ height: 100%;
+ background-color: #f6f8fa;
+ }
+
+ .demo-container-top lion-drawer {
+ height: auto;
+ width: 100%;
+ }
+
+ .demo-container-right {
+ height: 400px;
+ display: flex;
+ flex-direction: row-reverse;
+ }
+
+ .demo-container-right > div {
+ padding: 8px;
+ background-color: #f6f8fa;
+ }
+
+ .demo-container-right lion-drawer {
+ height: 400px;
+ }
+
+ .demo-container-opened {
+ height: 400px;
+ display: flex;
+ flex-direction: row;
+ }
+
+ .demo-container-opened > div {
+ padding: 8px;
+ background-color: #f6f8fa;
+ }
+
+ .demo-container-opened lion-drawer {
+ height: 400px;
+ }
+`;
diff --git a/packages/ui/docs/components/drawer/use-cases.md b/packages/ui/docs/components/drawer/use-cases.md
new file mode 100644
index 000000000..8a01ab3d2
--- /dev/null
+++ b/packages/ui/docs/components/drawer/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/drawer/use-cases.md)
diff --git a/packages/ui/docs/components/fieldset/index.md b/packages/ui/docs/components/fieldset/index.md
new file mode 100644
index 000000000..ecb2013fe
--- /dev/null
+++ b/packages/ui/docs/components/fieldset/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/fieldset/index.md)
diff --git a/packages/ui/docs/components/fieldset/overview.md b/packages/ui/docs/components/fieldset/overview.md
new file mode 100644
index 000000000..180587cbf
--- /dev/null
+++ b/packages/ui/docs/components/fieldset/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/fieldset/overview.md)
diff --git a/packages/ui/docs/components/fieldset/use-cases.md b/packages/ui/docs/components/fieldset/use-cases.md
new file mode 100644
index 000000000..4453a315c
--- /dev/null
+++ b/packages/ui/docs/components/fieldset/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/fieldset/use-cases.md)
diff --git a/packages/ui/docs/components/form/index.md b/packages/ui/docs/components/form/index.md
new file mode 100644
index 000000000..14c7f4b56
--- /dev/null
+++ b/packages/ui/docs/components/form/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/form/index.md)
diff --git a/packages/ui/docs/components/form/overview.md b/packages/ui/docs/components/form/overview.md
new file mode 100644
index 000000000..01f7b6fbb
--- /dev/null
+++ b/packages/ui/docs/components/form/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/form/overview.md)
diff --git a/packages/ui/docs/components/form/use-cases.md b/packages/ui/docs/components/form/use-cases.md
new file mode 100644
index 000000000..f30634060
--- /dev/null
+++ b/packages/ui/docs/components/form/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/form/use-cases.md)
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug01.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug01.svg.js
new file mode 100644
index 000000000..aea2228a4
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug01.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug02.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug02.svg.js
new file mode 100644
index 000000000..f69a54e44
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug02.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug05.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug05.svg.js
new file mode 100644
index 000000000..aa49c4c80
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug05.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug06.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug06.svg.js
new file mode 100644
index 000000000..5c59fcbbb
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug06.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug08.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug08.svg.js
new file mode 100644
index 000000000..3f29f4265
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug08.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug12.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug12.svg.js
new file mode 100644
index 000000000..80333cb62
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug12.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug19.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug19.svg.js
new file mode 100644
index 000000000..397d9f61a
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug19.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug23.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug23.svg.js
new file mode 100644
index 000000000..8db0542b8
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug23.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug24.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug24.svg.js
new file mode 100644
index 000000000..fe9cdeaa9
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/bugs/bug24.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/iconset-bugs.js b/packages/ui/docs/components/icon/assets/iconset-bugs.js
new file mode 100755
index 000000000..b1314dec5
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/iconset-bugs.js
@@ -0,0 +1,11 @@
+import bug01 from './bugs/bug01.svg.js';
+import bug02 from './bugs/bug02.svg.js';
+import bug05 from './bugs/bug05.svg.js';
+import bug06 from './bugs/bug06.svg.js';
+import bug08 from './bugs/bug08.svg.js';
+import bug12 from './bugs/bug12.svg.js';
+import bug19 from './bugs/bug19.svg.js';
+import bug23 from './bugs/bug23.svg.js';
+import bug24 from './bugs/bug24.svg.js';
+
+export { bug01, bug02, bug05, bug06, bug08, bug12, bug19, bug23, bug24 };
diff --git a/packages/ui/docs/components/icon/assets/iconset-misc.js b/packages/ui/docs/components/icon/assets/iconset-misc.js
new file mode 100644
index 000000000..7541a4a01
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/iconset-misc.js
@@ -0,0 +1,3 @@
+import arrowLeft from './misc/arrowLeft.svg.js';
+
+export { arrowLeft };
diff --git a/packages/ui/docs/components/icon/assets/iconset-space.js b/packages/ui/docs/components/icon/assets/iconset-space.js
new file mode 100755
index 000000000..56b4a217b
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/iconset-space.js
@@ -0,0 +1,31 @@
+import alienSpaceship from './space/aliens-spaceship.svg.js';
+import meteor from './space/meteor.svg.js';
+import moonFlag from './space/moon-flag.svg.js';
+import moon from './space/moon.svg.js';
+import night from './space/night.svg.js';
+import orbit from './space/orbit.svg.js';
+import planet from './space/planet.svg.js';
+import robot from './space/robot.svg.js';
+import rocket from './space/rocket.svg.js';
+import satellite from './space/satellite.svg.js';
+import signal from './space/signal.svg.js';
+import spaceHelmet from './space/space-helmet.svg.js';
+import sun from './space/sun.svg.js';
+import telescope from './space/telescope.svg.js';
+
+export {
+ alienSpaceship,
+ meteor,
+ moonFlag,
+ moon,
+ night,
+ orbit,
+ planet,
+ robot,
+ rocket,
+ satellite,
+ signal,
+ spaceHelmet,
+ sun,
+ telescope,
+};
diff --git a/packages/ui/docs/components/icon/assets/misc/arrowLeft.svg.js b/packages/ui/docs/components/icon/assets/misc/arrowLeft.svg.js
new file mode 100644
index 000000000..d23823b45
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/misc/arrowLeft.svg.js
@@ -0,0 +1,6 @@
+export default tag =>
+ tag`
+
+ `;
diff --git a/packages/ui/docs/components/icon/assets/space/aliens-spaceship.svg.js b/packages/ui/docs/components/icon/assets/space/aliens-spaceship.svg.js
new file mode 100644
index 000000000..9438a9317
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/aliens-spaceship.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/meteor.svg.js b/packages/ui/docs/components/icon/assets/space/meteor.svg.js
new file mode 100644
index 000000000..197133816
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/meteor.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/moon-flag.svg.js b/packages/ui/docs/components/icon/assets/space/moon-flag.svg.js
new file mode 100644
index 000000000..9283c4010
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/moon-flag.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/moon.svg.js b/packages/ui/docs/components/icon/assets/space/moon.svg.js
new file mode 100644
index 000000000..dbfb92b1c
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/moon.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/night.svg.js b/packages/ui/docs/components/icon/assets/space/night.svg.js
new file mode 100644
index 000000000..ba258dac1
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/night.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/orbit.svg.js b/packages/ui/docs/components/icon/assets/space/orbit.svg.js
new file mode 100644
index 000000000..e3f26ebb0
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/orbit.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/planet.svg.js b/packages/ui/docs/components/icon/assets/space/planet.svg.js
new file mode 100644
index 000000000..2d0283f43
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/planet.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/robot.svg.js b/packages/ui/docs/components/icon/assets/space/robot.svg.js
new file mode 100644
index 000000000..73dd887fd
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/robot.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/rocket.svg.js b/packages/ui/docs/components/icon/assets/space/rocket.svg.js
new file mode 100644
index 000000000..6d7a1fdc6
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/rocket.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/satellite.svg.js b/packages/ui/docs/components/icon/assets/space/satellite.svg.js
new file mode 100644
index 000000000..363059924
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/satellite.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/signal.svg.js b/packages/ui/docs/components/icon/assets/space/signal.svg.js
new file mode 100644
index 000000000..8613b0e1f
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/signal.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/space-helmet.svg.js b/packages/ui/docs/components/icon/assets/space/space-helmet.svg.js
new file mode 100644
index 000000000..4b7b539ef
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/space-helmet.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/sun.svg.js b/packages/ui/docs/components/icon/assets/space/sun.svg.js
new file mode 100644
index 000000000..11a341845
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/sun.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/telescope.svg.js b/packages/ui/docs/components/icon/assets/space/telescope.svg.js
new file mode 100644
index 000000000..4fdffb02c
--- /dev/null
+++ b/packages/ui/docs/components/icon/assets/space/telescope.svg.js
@@ -0,0 +1,2 @@
+export default tag =>
+ tag``;
diff --git a/packages/ui/docs/components/icon/index.md b/packages/ui/docs/components/icon/index.md
new file mode 100644
index 000000000..9ad5a221b
--- /dev/null
+++ b/packages/ui/docs/components/icon/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/icon/index.md)
diff --git a/packages/ui/docs/components/icon/overview.md b/packages/ui/docs/components/icon/overview.md
new file mode 100644
index 000000000..985aac84f
--- /dev/null
+++ b/packages/ui/docs/components/icon/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/icon/overview.md)
diff --git a/packages/ui/docs/components/icon/use-cases.md b/packages/ui/docs/components/icon/use-cases.md
new file mode 100644
index 000000000..da1f5c94d
--- /dev/null
+++ b/packages/ui/docs/components/icon/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/icon/use-cases.md)
diff --git a/packages/ui/docs/components/index.md b/packages/ui/docs/components/index.md
new file mode 100644
index 000000000..a1875dad6
--- /dev/null
+++ b/packages/ui/docs/components/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../docs/components/index.md)
diff --git a/packages/ui/docs/components/input-amount/index.md b/packages/ui/docs/components/input-amount/index.md
new file mode 100644
index 000000000..d7169e590
--- /dev/null
+++ b/packages/ui/docs/components/input-amount/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-amount/index.md)
diff --git a/packages/ui/docs/components/input-amount/overview.md b/packages/ui/docs/components/input-amount/overview.md
new file mode 100644
index 000000000..61a60e843
--- /dev/null
+++ b/packages/ui/docs/components/input-amount/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-amount/overview.md)
diff --git a/packages/ui/docs/components/input-amount/use-cases.md b/packages/ui/docs/components/input-amount/use-cases.md
new file mode 100644
index 000000000..dda15d2e8
--- /dev/null
+++ b/packages/ui/docs/components/input-amount/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-amount/use-cases.md)
diff --git a/packages/ui/docs/components/input-date/index.md b/packages/ui/docs/components/input-date/index.md
new file mode 100644
index 000000000..dde5cb970
--- /dev/null
+++ b/packages/ui/docs/components/input-date/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-date/index.md)
diff --git a/packages/ui/docs/components/input-date/overview.md b/packages/ui/docs/components/input-date/overview.md
new file mode 100644
index 000000000..78c5bc08d
--- /dev/null
+++ b/packages/ui/docs/components/input-date/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-date/overview.md)
diff --git a/packages/ui/docs/components/input-date/use-cases.md b/packages/ui/docs/components/input-date/use-cases.md
new file mode 100644
index 000000000..74ce9e7d4
--- /dev/null
+++ b/packages/ui/docs/components/input-date/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-date/use-cases.md)
diff --git a/packages/ui/docs/components/input-datepicker/index.md b/packages/ui/docs/components/input-datepicker/index.md
new file mode 100644
index 000000000..4a2f5b64b
--- /dev/null
+++ b/packages/ui/docs/components/input-datepicker/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-datepicker/index.md)
diff --git a/packages/ui/docs/components/input-datepicker/overview.md b/packages/ui/docs/components/input-datepicker/overview.md
new file mode 100644
index 000000000..100c360b0
--- /dev/null
+++ b/packages/ui/docs/components/input-datepicker/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-datepicker/overview.md)
diff --git a/packages/ui/docs/components/input-datepicker/use-cases.md b/packages/ui/docs/components/input-datepicker/use-cases.md
new file mode 100644
index 000000000..774e615a9
--- /dev/null
+++ b/packages/ui/docs/components/input-datepicker/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-datepicker/use-cases.md)
diff --git a/packages/ui/docs/components/input-email/index.md b/packages/ui/docs/components/input-email/index.md
new file mode 100644
index 000000000..e458f8b25
--- /dev/null
+++ b/packages/ui/docs/components/input-email/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-email/index.md)
diff --git a/packages/ui/docs/components/input-email/overview.md b/packages/ui/docs/components/input-email/overview.md
new file mode 100644
index 000000000..9ee862ee1
--- /dev/null
+++ b/packages/ui/docs/components/input-email/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-email/overview.md)
diff --git a/packages/ui/docs/components/input-email/use-cases.md b/packages/ui/docs/components/input-email/use-cases.md
new file mode 100644
index 000000000..a1745df38
--- /dev/null
+++ b/packages/ui/docs/components/input-email/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-email/use-cases.md)
diff --git a/packages/ui/docs/components/input-iban/index.md b/packages/ui/docs/components/input-iban/index.md
new file mode 100644
index 000000000..79f3cb63a
--- /dev/null
+++ b/packages/ui/docs/components/input-iban/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-iban/index.md)
diff --git a/packages/ui/docs/components/input-iban/overview.md b/packages/ui/docs/components/input-iban/overview.md
new file mode 100644
index 000000000..e39e8b7b0
--- /dev/null
+++ b/packages/ui/docs/components/input-iban/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-iban/overview.md)
diff --git a/packages/ui/docs/components/input-iban/use-cases.md b/packages/ui/docs/components/input-iban/use-cases.md
new file mode 100644
index 000000000..550452761
--- /dev/null
+++ b/packages/ui/docs/components/input-iban/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-iban/use-cases.md)
diff --git a/packages/ui/docs/components/input-range/index.md b/packages/ui/docs/components/input-range/index.md
new file mode 100644
index 000000000..d98da4230
--- /dev/null
+++ b/packages/ui/docs/components/input-range/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-range/index.md)
diff --git a/packages/ui/docs/components/input-range/overview.md b/packages/ui/docs/components/input-range/overview.md
new file mode 100644
index 000000000..68faa1c3d
--- /dev/null
+++ b/packages/ui/docs/components/input-range/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-range/overview.md)
diff --git a/packages/ui/docs/components/input-range/use-cases.md b/packages/ui/docs/components/input-range/use-cases.md
new file mode 100644
index 000000000..23378fe4b
--- /dev/null
+++ b/packages/ui/docs/components/input-range/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-range/use-cases.md)
diff --git a/packages/ui/docs/components/input-stepper/index.md b/packages/ui/docs/components/input-stepper/index.md
new file mode 100644
index 000000000..0de447404
--- /dev/null
+++ b/packages/ui/docs/components/input-stepper/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-stepper/index.md)
diff --git a/packages/ui/docs/components/input-stepper/overview.md b/packages/ui/docs/components/input-stepper/overview.md
new file mode 100644
index 000000000..7b7d03759
--- /dev/null
+++ b/packages/ui/docs/components/input-stepper/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-stepper/overview.md)
diff --git a/packages/ui/docs/components/input-stepper/use-cases.md b/packages/ui/docs/components/input-stepper/use-cases.md
new file mode 100644
index 000000000..05e837bf1
--- /dev/null
+++ b/packages/ui/docs/components/input-stepper/use-cases.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-stepper/use-cases.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/examples.md b/packages/ui/docs/components/input-tel-dropdown/examples.md
new file mode 100644
index 000000000..fdaa33a5c
--- /dev/null
+++ b/packages/ui/docs/components/input-tel-dropdown/examples.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-tel-dropdown/examples.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/index.md b/packages/ui/docs/components/input-tel-dropdown/index.md
new file mode 100644
index 000000000..13fc56bab
--- /dev/null
+++ b/packages/ui/docs/components/input-tel-dropdown/index.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-tel-dropdown/index.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/overview.md b/packages/ui/docs/components/input-tel-dropdown/overview.md
new file mode 100644
index 000000000..b718ec4a4
--- /dev/null
+++ b/packages/ui/docs/components/input-tel-dropdown/overview.md
@@ -0,0 +1 @@
+[=> See Source <=](../../../../../docs/components/input-tel-dropdown/overview.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js b/packages/ui/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
new file mode 100644
index 000000000..771d7d8ac
--- /dev/null
+++ b/packages/ui/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
@@ -0,0 +1,127 @@
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html, css } from 'lit';
+import { ref } from 'lit/directives/ref.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+import {
+ IntlSelectRich,
+ IntlOption,
+ IntlSeparator,
+} from '../../select-rich/src/intl-select-rich.js';
+
+/**
+ * @typedef {import('@lion/ui/input-tel-dropdown/types.js').TemplateDataForDropdownInputTel}TemplateDataForDropdownInputTel
+ */
+
+// Example implementation for https://intl-tel-input.com/
+export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdown) {
+ /**
+ * @configure LitElement
+ * @enhance LionInputTelDropdown
+ */
+ static styles = [
+ super.styles,
+ css`
+ :host,
+ ::slotted(*) {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.42857143;
+ color: #333;
+ }
+
+ :host {
+ max-width: 300px;
+ }
+
+ .input-group__container {
+ width: 100%;
+ height: 34px;
+ font-size: 14px;
+ line-height: 1.42857143;
+ color: #555;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+ -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+ -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+ transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+ }
+
+ .input-group__input {
+ padding: 6px;
+ box-sizing: border-box;
+ }
+
+ .input-group__input ::slotted(input) {
+ border: none;
+ outline: none;
+ }
+
+ :host([focused]) .input-group__container {
+ border-color: #66afe9;
+ outline: 0;
+ -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
+ }
+ `,
+ ];
+
+ static templates = {
+ ...(super.templates || {}),
+ /**
+ * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
+ */
+ dropdown: templateDataForDropdown => {
+ const { refs, data } = templateDataForDropdown;
+ // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+ return html`
+ Look how nice this dialog looks!
+| + country name + | ++ region code + | ++ country code + | +
|---|---|---|
| ${nameForLocale} | +${regionCode} | +${countryCode} | +
+
+
+ ${nameForLocale} (${nameForRegion})
+ +${countryCode}
+ `;
+ }
+}
+customElements.define('intl-option', IntlOption);
+
+class IntlSelectInvoker extends LionSelectInvoker {
+ /**
+ * @configure LitElement
+ * @enhance LionSelectInvoker
+ */
+ static styles = [
+ super.styles,
+ flagStyles,
+ css`
+ :host {
+ /** TODO: avoid importants; should actually be configured in overlay */
+ width: auto !important;
+ background-color: transparent;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ }
+
+ #content-wrapper {
+ display: flex;
+ align-items: center;
+ }
+ `,
+ ];
+
+ /**
+ * @configure SlotMixin
+ * @override LionSelectInvoker
+ */
+ get slots() {
+ return {};
+ }
+
+ /**
+ * @override LionSelectInvoker
+ */
+ render() {
+ const ctor = /** @type {typeof LionSelectInvoker} */ (this.constructor);
+ return ctor._mainTemplate(this._templateData);
+ }
+
+ get _templateData() {
+ return {
+ data: { selectedElement: this.selectedElement, hostElement: this.hostElement },
+ };
+ }
+
+ static _mainTemplate(templateData) {
+ return html` ${this._contentTemplate(templateData)}
`;
+ }
+
+ static _contentTemplate({ data: { selectedElement, hostElement } }) {
+ if (!selectedElement) {
+ return ``;
+ }
+ return html`
+
+
+ `;
+ }
+}
+customElements.define('intl-select-invoker', IntlSelectInvoker);
+
+export class IntlSeparator extends LitElement {
+ static styles = [
+ css`
+ :host {
+ display: block;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
+ border-bottom: 1px solid #ccc;
+ }
+ `,
+ ];
+
+ /**
+ * @lifecycle platform
+ */
+ connectedCallback() {
+ super.connectedCallback();
+ this.setAttribute('role', 'separator');
+ }
+}
+customElements.define('intl-separator', IntlSeparator);
+
+export class IntlSelectRich extends LionSelectRich {
+ static styles = [
+ super.styles,
+ css`
+ :host,
+ ::slotted(*) {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.42857143;
+ color: #333;
+ }
+
+ ::slotted([role='listbox']) {
+ margin-left: -3px;
+ display: block;
+ white-space: nowrap;
+ max-height: 200px;
+ overflow-y: scroll;
+ position: absolute;
+ z-index: 2;
+ list-style: none;
+ text-align: left;
+ padding: 0;
+ margin: 0 0 0 -1px;
+ box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
+ background-color: white;
+ border: 1px solid #ccc;
+ -webkit-overflow-scrolling: touch;
+ outline: none;
+ }
+
+ .form-field__group-two,
+ .input-group,
+ .input-group__container,
+ .input-group__input {
+ height: 100%;
+ }
+ `,
+ ];
+
+ /**
+ * @configure ScopedElementsMixin
+ */
+ static scopedElements = { 'intl-select-invoker': IntlSelectInvoker };
+
+ /**
+ * @configure SlotMixin
+ */
+ slots = {
+ ...super.slots,
+ invoker: () => html`undefined`;
+ }
+ if (typeof p === 'object' && p !== null) {
+ return JSON.stringify(p);
+ }
+ resultText = p;
+ } else {
+ resultText = prop.processor(field);
+ }
+
+ return html`${resultText}`;
+ }
+
+ constructor() {
+ super();
+ this.title = 'States';
+ }
+
+ render() {
+ const computePropName = prop => (typeof prop === 'string' ? prop : prop.name);
+ return html`
+ | ${computePropName(prop)} | `)} +
|---|
| ${this.__renderProp(prop)} | `)} +
+
+ popup is ${this.opened ? 'opened' : 'closed'}
+ `;
+ }
+}
+customElements.define('demo-overlay-system', DemoOverlaySystem);
diff --git a/packages/ui/docs/fundamentals/systems/overlays/assets/ref.js b/packages/ui/docs/fundamentals/systems/overlays/assets/ref.js
new file mode 100644
index 000000000..fed6d4307
--- /dev/null
+++ b/packages/ui/docs/fundamentals/systems/overlays/assets/ref.js
@@ -0,0 +1,38 @@
+import { directive } from 'lit/directive.js';
+
+/**
+ * @typedef {import('@lion/ui/core.js').PropertyPart} PropertyPart
+ */
+
+/** @type {WeakSetDemo App
+ + ${this.page === 'A' ? html`I am page A
+Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + + +customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js new file mode 100644 index 000000000..5c5ae99b9 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js @@ -0,0 +1,30 @@ +export class OverlaysManager { + name = 'OverlayManager 2.x'; + + _blockBody = false; + + constructor() { + this._setupBlocker(); + } + + _setupBlocker() { + const blocker = document.createElement('div'); + blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;'); + blocker.innerText = `Blocker for ${this.name}`; + + const target = document.getElementById('overlay-target'); + target.appendChild(blocker); + + this.blocker = blocker; + } + + blockBody() { + this._blockBody = true; + this.blocker.style.backgroundColor = '#ff6161'; + } + + unBlockBody() { + this._blockBody = false; + this.blocker.style.backgroundColor = 'transparent'; + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js new file mode 100644 index 000000000..c3e546133 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js @@ -0,0 +1,4 @@ +import { OverlaysManager } from './index.js'; +import { singletonManager } from 'singleton-manager'; + +export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/package.json new file mode 100644 index 000000000..5e83291f8 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/package.json @@ -0,0 +1,4 @@ +{ + "name": "overlays", + "version": "2.0.0" +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/package.json new file mode 100644 index 000000000..cd0fdbef4 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/package.json @@ -0,0 +1,7 @@ +{ + "name": "page-b", + "version": "1.0.0", + "dependencies": { + "overlays": "^2.0.0" + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js new file mode 100644 index 000000000..bc65fde08 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js @@ -0,0 +1,49 @@ +import { LitElement, html, css } from 'lit-element'; +import { overlays } from 'overlays/instance.js'; + +export class PageB extends LitElement { + getInstance(sym, fallback) { + const ev = new CustomEvent('request-instance', { + detail: { key: sym }, + bubbles: true, + cancelable: true, + composed: true, + }); + this.dispatchEvent(ev); + return ev.detail.instance || fallback(); + } + + connectedCallback() { + super.connectedCallback(); + } + + static get styles() { + return css` + :host { + display: block; + padding: 10px; + border: 2px solid #ccc; + } + `; + } + + render() { + return html` +I am page B
+Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays._blockBody}
+ + + + `; + } +} + +customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js new file mode 100644 index 000000000..384537215 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js @@ -0,0 +1,70 @@ +import { OverlaysManager } from 'overlays'; +import { singletonManager } from 'singleton-manager'; +import { OverlaysManager as OverlaysManager2 } from './node_modules/page-b/node_modules/overlays/index.js'; + +let compatibleManager1; +let compatibleManager2; + +const blocker = document.createElement('div'); +blocker.setAttribute( + 'style', + 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;', +); +blocker.innerText = `Shared Blocker for App`; +document.body.appendChild(blocker); + +class CompatibleManager1 extends OverlaysManager { + constructor() { + super(); + this.name = 'Compatible1 from App'; + } + + block(sync = true) { + super.block(); + if (sync) { + compatibleManager2.blockBody(false); + } + } + + unBlock(sync = true) { + super.unBlock(); + if (sync) { + compatibleManager2.unBlockBody(false); + } + } + + _setupBlocker() { + this.blocker = blocker; + } +} + +class CompatibleManager2 extends OverlaysManager2 { + constructor() { + super(); + this.name = 'Compatible2 from App'; + } + + blockBody(sync = true) { + super.blockBody(); + if (sync) { + compatibleManager1.block(); + } + } + + unBlockBody(sync = true) { + super.unBlockBody(); + if (sync) { + compatibleManager1.unBlock(); + } + } + + _setupBlocker() { + this.blocker = blocker; + } +} + +compatibleManager1 = new CompatibleManager1(); +compatibleManager2 = new CompatibleManager2(); + +singletonManager.set('overlays::overlays::1.x', compatibleManager1); +singletonManager.set('overlays::overlays::2.x', compatibleManager2); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/package.json new file mode 100644 index 000000000..5bf693476 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/package.json @@ -0,0 +1,9 @@ +{ + "name": "fail-demo-app", + "version": "1.0.0", + "dependencies": { + "@lion/core": "0.13.6", + "page-a": "^1.0.0", + "page-b": "^1.0.0" + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js new file mode 100644 index 000000000..802bb6d85 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js @@ -0,0 +1,91 @@ +import { LitElement, css, html } from 'lit'; + +import 'page-a/page-a.js'; +import 'page-b/page-b.js'; + +class DemoApp extends LitElement { + constructor() { + super(); + this.page = 'A'; + } + + static get properties() { + return { + page: { type: String }, + }; + } + + static get styles() { + return css` + :host { + display: block; + max-width: 680px; + margin: 0 auto; + } + + nav { + padding: 0 10px 10px 10px; + } + + button { + border: none; + padding: 1rem 2rem; + background: #0069ed; + color: #fff; + font-size: 1rem; + cursor: pointer; + text-align: center; + transition: background 250ms ease-in-out, transform 150ms ease; + } + + button:hover, + button:focus { + background: #0053ba; + } + + button:focus { + outline: 1px solid #fff; + outline-offset: -4px; + } + + button:active { + transform: scale(0.99); + } + + button.active { + background: #33a43f; + } + + h1 { + text-align: center; + } + `; + } + + render() { + return html` +Demo App
+ + ${this.page === 'A' ? html`I am page A
+Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + +customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js new file mode 100644 index 000000000..ea2f3b178 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js @@ -0,0 +1,30 @@ +export class OverlaysManager { + name = 'OverlayManager 2.x'; + + _blockBody = false; + + constructor() { + this._setupBlocker(); + } + + _setupBlocker() { + const blocker = document.createElement('div'); + blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 180px; text-align: center;'); + blocker.innerText = `Blocker for ${this.name}`; + + const target = document.getElementById('overlay-target'); + target.appendChild(blocker); + + this.blocker = blocker; + } + + blockBody() { + this._blockBody = true; + this.blocker.style.backgroundColor = '#ff6161'; + } + + unBlockBody() { + this._blockBody = false; + this.blocker.style.backgroundColor = 'transparent'; + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js new file mode 100644 index 000000000..f73ca3b47 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js @@ -0,0 +1,3 @@ +import { OverlaysManager } from './index.js'; + +export const overlays = new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/package.json new file mode 100644 index 000000000..5e83291f8 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/package.json @@ -0,0 +1,4 @@ +{ + "name": "overlays", + "version": "2.0.0" +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/package.json new file mode 100644 index 000000000..cd0fdbef4 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/package.json @@ -0,0 +1,7 @@ +{ + "name": "page-b", + "version": "1.0.0", + "dependencies": { + "overlays": "^2.0.0" + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js new file mode 100644 index 000000000..94a90c0c0 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js @@ -0,0 +1,34 @@ +import { LitElement, html, css } from 'lit-element'; +import { overlays } from 'overlays/instance.js'; + +export class PageB extends LitElement { + static get styles() { + return css` + :host { + display: block; + padding: 10px; + border: 2px solid #ccc; + } + `; + } + + render() { + return html` +I am page B
+Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays._blockBody}
+ + + + `; + } +} + +customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/package.json new file mode 100644 index 000000000..5bf693476 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/package.json @@ -0,0 +1,9 @@ +{ + "name": "fail-demo-app", + "version": "1.0.0", + "dependencies": { + "@lion/core": "0.13.6", + "page-a": "^1.0.0", + "page-b": "^1.0.0" + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js new file mode 100644 index 000000000..057392db9 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js @@ -0,0 +1,93 @@ +import { LitElement, css, html } from 'lit'; + +import './overlayCompatibility.js'; + +import 'page-a/page-a.js'; +import 'page-b/page-b.js'; + +class DemoApp extends LitElement { + constructor() { + super(); + this.page = 'A'; + } + + static get properties() { + return { + page: { type: String }, + }; + } + + static get styles() { + return css` + :host { + display: block; + max-width: 680px; + margin: 0 auto; + } + + nav { + padding: 0 10px 10px 10px; + } + + button { + border: none; + padding: 1rem 2rem; + background: #0069ed; + color: #fff; + font-size: 1rem; + cursor: pointer; + text-align: center; + transition: background 250ms ease-in-out, transform 150ms ease; + } + + button:hover, + button:focus { + background: #0053ba; + } + + button:focus { + outline: 1px solid #fff; + outline-offset: -4px; + } + + button:active { + transform: scale(0.99); + } + + button.active { + background: #33a43f; + } + + h1 { + text-align: center; + } + `; + } + + render() { + return html` +Demo App
+ + ${this.page === 'A' ? html`I am page A
+Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + +customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js new file mode 100644 index 000000000..a2e56314e --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js @@ -0,0 +1,30 @@ +export class OverlaysManager { + name = 'OverlayManager 2.x'; + + blockBody = false; + + constructor() { + this._setupBlocker(); + } + + _setupBlocker() { + const blocker = document.createElement('div'); + blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;'); + blocker.innerText = `Blocker for ${this.name}`; + + const target = document.getElementById('overlay-target'); + target.appendChild(blocker); + + this.blocker = blocker; + } + + blockingBody() { + this.blockBody = true; + this.blocker.style.backgroundColor = '#ff6161'; + } + + unBlockingBody() { + this.blockBody = false; + this.blocker.style.backgroundColor = 'transparent'; + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js new file mode 100644 index 000000000..c3e546133 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js @@ -0,0 +1,4 @@ +import { OverlaysManager } from './index.js'; +import { singletonManager } from 'singleton-manager'; + +export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/package.json new file mode 100644 index 000000000..5e83291f8 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/package.json @@ -0,0 +1,4 @@ +{ + "name": "overlays", + "version": "2.0.0" +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/package.json new file mode 100644 index 000000000..cd0fdbef4 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/package.json @@ -0,0 +1,7 @@ +{ + "name": "page-b", + "version": "1.0.0", + "dependencies": { + "overlays": "^2.0.0" + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js new file mode 100644 index 000000000..41fa08ad4 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js @@ -0,0 +1,34 @@ +import { LitElement, html, css } from 'lit-element'; +import { overlays } from 'overlays/instance.js'; + +export class PageB extends LitElement { + static get styles() { + return css` + :host { + display: block; + padding: 10px; + border: 2px solid #ccc; + } + `; + } + + render() { + return html` +I am page B
+Overlays Status:
+Name: ${overlays.name}
+Blocked: ${overlays.blockBody}
+ + + + `; + } +} + +customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js new file mode 100644 index 000000000..36a9c73c0 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js @@ -0,0 +1,23 @@ +import { OverlaysManager } from 'overlays'; +import { singletonManager } from 'singleton-manager'; + +class CompatibleManager extends OverlaysManager { + constructor() { + super(); + this.name = 'Compatible from App'; + this.blocker.innerText = `Blocker for ${this.name}`; + } + + blockingBody() { + this.block(); + } + + unBlockingBody() { + this.unBlock(); + } +} + +const compatibleManager = new CompatibleManager(); + +singletonManager.set('overlays::overlays::1.x', compatibleManager); +singletonManager.set('overlays::overlays::2.x', compatibleManager); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/package.json b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/package.json new file mode 100644 index 000000000..5bf693476 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/package.json @@ -0,0 +1,9 @@ +{ + "name": "fail-demo-app", + "version": "1.0.0", + "dependencies": { + "@lion/core": "0.13.6", + "page-a": "^1.0.0", + "page-b": "^1.0.0" + } +} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/index.md b/packages/ui/docs/fundamentals/tools/singleton-manager/index.md new file mode 100644 index 000000000..c596d52a8 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/index.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../../docs/fundamentals/tools/singleton-manager/index.md) diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/overview.md b/packages/ui/docs/fundamentals/tools/singleton-manager/overview.md new file mode 100644 index 000000000..bcb433e30 --- /dev/null +++ b/packages/ui/docs/fundamentals/tools/singleton-manager/overview.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../../docs/fundamentals/tools/singleton-manager/overview.md) diff --git a/packages/ui/docs/guides/how-to/create-a-custom-field.md b/packages/ui/docs/guides/how-to/create-a-custom-field.md new file mode 100644 index 000000000..abf05508a --- /dev/null +++ b/packages/ui/docs/guides/how-to/create-a-custom-field.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/how-to/create-a-custom-field.md) diff --git a/packages/ui/docs/guides/how-to/extend-a-native-input.md b/packages/ui/docs/guides/how-to/extend-a-native-input.md new file mode 100644 index 000000000..732d29738 --- /dev/null +++ b/packages/ui/docs/guides/how-to/extend-a-native-input.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/how-to/extend-a-native-input.md) diff --git a/packages/ui/docs/guides/how-to/get-started.md b/packages/ui/docs/guides/how-to/get-started.md new file mode 100644 index 000000000..c6c257997 --- /dev/null +++ b/packages/ui/docs/guides/how-to/get-started.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/how-to/get-started.md) diff --git a/packages/ui/docs/guides/how-to/index.md b/packages/ui/docs/guides/how-to/index.md new file mode 100644 index 000000000..f277f8c7c --- /dev/null +++ b/packages/ui/docs/guides/how-to/index.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/how-to/index.md) diff --git a/packages/ui/docs/guides/index.md b/packages/ui/docs/guides/index.md new file mode 100644 index 000000000..fda6dd4b0 --- /dev/null +++ b/packages/ui/docs/guides/index.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../docs/guides/index.md) diff --git a/packages/ui/docs/guides/principles/definitions-and-terms.md b/packages/ui/docs/guides/principles/definitions-and-terms.md new file mode 100644 index 000000000..6ddd68b5b --- /dev/null +++ b/packages/ui/docs/guides/principles/definitions-and-terms.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/principles/definitions-and-terms.md) diff --git a/packages/ui/docs/guides/principles/index.md b/packages/ui/docs/guides/principles/index.md new file mode 100644 index 000000000..782a0ca05 --- /dev/null +++ b/packages/ui/docs/guides/principles/index.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/principles/index.md) diff --git a/packages/ui/docs/guides/principles/scoped-elements.md b/packages/ui/docs/guides/principles/scoped-elements.md new file mode 100644 index 000000000..fe49e687c --- /dev/null +++ b/packages/ui/docs/guides/principles/scoped-elements.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/principles/scoped-elements.md) diff --git a/packages/ui/docs/guides/principles/styling.md b/packages/ui/docs/guides/principles/styling.md new file mode 100644 index 000000000..b642e31f1 --- /dev/null +++ b/packages/ui/docs/guides/principles/styling.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/principles/styling.md) diff --git a/packages/ui/docs/guides/principles/subclasser-apis.md b/packages/ui/docs/guides/principles/subclasser-apis.md new file mode 100644 index 000000000..62c703759 --- /dev/null +++ b/packages/ui/docs/guides/principles/subclasser-apis.md @@ -0,0 +1 @@ +[=> See Source <=](../../../../../docs/guides/principles/subclasser-apis.md) diff --git a/packages/ui/docs/override.js b/packages/ui/docs/override.js new file mode 100644 index 000000000..552d7c9b9 --- /dev/null +++ b/packages/ui/docs/override.js @@ -0,0 +1,15 @@ +/** + * This will override all md files within the folder to only contain [=> See Source <=](../path/to/source.md) + */ + +import { writeFile } from 'fs/promises'; +import glob from 'glob'; + +const allFiles = glob.sync('**/*.md', { nodir: true }); +const files = allFiles; + +for (const filePath of files) { + const insert = 3 + filePath.match(/\//g).length; + const srcPath = `${'../'.repeat(insert)}docs/${filePath}`; + await writeFile(filePath, `[=> See Source <=](${srcPath})`); +}