@internetarchive/elements 0.0.1 → 0.1.0

package/dist/src/elements/ia-button/ia-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM;IAQN,MAAM,KAAK,MAAM,IAAI,cAAc,CAOlC;CACF"}
+{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM;IAQN,MAAM,KAAK,MAAM,IAAI,cAAc,CAgBlC;CACF"}

package/dist/src/elements/ia-button/ia-button.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
+import themeStyles from '../../themes/theme-styles';
 /**
  * A button element to demo the elements library
  */
@@ -13,12 +14,21 @@ let IAButton = class IAButton extends LitElement {
     `;
     }
     static get styles() {
-        return css `
-      button {
-        padding: 8px 16px;
-        background-color: var(--ia-button-background-color, #007bff);
-      }
-    `;
+        return [
+            themeStyles,
+            css `
+        :host {
+          --primary-background-color--: var(--primary-cta-fill);
+          --primary-text-color--: var(--primary-cta-text-color);
+        }
+
+        button {
+          padding: 8px 16px;
+          background-color: var(--primary-background-color--);
+          color: var(--primary-text-color--);
+        }
+      `,
+        ];
     }
 };
 IAButton = __decorate([

package/dist/src/elements/ia-button/ia-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IACtC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;KAKT,CAAC;IACJ,CAAC;CACF,CAAA;AAjBY,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiBpB","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\n/**\n * A button element to demo the elements library\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n  render() {\n    return html`\n      <button>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      button {\n        padding: 8px 16px;\n        background-color: var(--ia-button-background-color, #007bff);\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IACtC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;OAWF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA1BY,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0BpB","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * A button element to demo the elements library\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n  render() {\n    return html`\n      <button>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --primary-background-color--: var(--primary-cta-fill);\n          --primary-text-color--: var(--primary-cta-text-color);\n        }\n\n        button {\n          padding: 8px 16px;\n          background-color: var(--primary-background-color--);\n          color: var(--primary-text-color--);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+/**
+ * Renders an SVG indicator, which defualts to an animated circular indicator
+ */
+export declare class IAStatusIndicator extends LitElement {
+    loadingTitle: string;
+    successTitle: string;
+    errorTitle: string;
+    loadingStyle: 'ring' | 'ring-dots';
+    mode: 'loading' | 'success' | 'error';
+    render(): TemplateResult;
+    /** A circular loading indicator to render when processing */
+    private get loadingIndicatorTemplate();
+    /** A check mark to render on success */
+    private get successIndicatorTemplate();
+    /** An "!" to render on error */
+    private get errorIndicatorTemplate();
+    private get shouldShowLoadingDots();
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-status-indicator.d.ts.map

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5E;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,SAAqB;IAGjC,YAAY,SAAkB;IAG9B,UAAU,SAAgB;IAG1B,YAAY,EAAE,MAAM,GAAG,WAAW,CAAe;IAGjD,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE9E,MAAM,IAAI,cAAc;IAQxB,6DAA6D;IAC7D,OAAO,KAAK,wBAAwB,GA4BnC;IAED,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAGD,OAAO,KAAK,qBAAqB,GAIhC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAqFlC;CACF"}

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js

@@ -0,0 +1,220 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { choose } from 'lit/directives/choose.js';
+import themeStyles from '../../themes/theme-styles';
+/**
+ * Renders an SVG indicator, which defualts to an animated circular indicator
+ */
+let IAStatusIndicator = class IAStatusIndicator extends LitElement {
+    constructor() {
+        super(...arguments);
+        /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */
+        this.loadingTitle = msg('Loading...');
+        /* An optional title to use for the success state of the indicator. Will be used for screen readers. */
+        this.successTitle = msg('Success');
+        /* An optional title to use for the error state of the indicator. Will be used for screen readers. */
+        this.errorTitle = msg('Error');
+        /* Which type of loading indicator to display */
+        this.loadingStyle = 'ring-dots';
+        /* The state of the indicator that should be shown */
+        this.mode = 'loading';
+    }
+    render() {
+        return html `${choose(this.mode, [
+            ['loading', () => this.loadingIndicatorTemplate],
+            ['success', () => this.successIndicatorTemplate],
+            ['error', () => this.errorIndicatorTemplate],
+        ])}`;
+    }
+    /** A circular loading indicator to render when processing */
+    get loadingIndicatorTemplate() {
+        return html `
+      <svg
+        class="loading-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.loadingTitle}</title>
+        <g stroke="none" stroke-width="1" fill-rule="evenodd">
+          <path
+            class="loading-ring"
+            d="M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
+          ></path>
+          <g
+            class="loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}"
+            transform="translate(40.000000, 55.000000)"
+          >
+            <circle id="left-dot" cx="5" cy="5" r="5"></circle>
+            <circle id="middle-dot" cx="20" cy="5" r="5"></circle>
+            <circle id="right-dot" cx="35" cy="5" r="5"></circle>
+          </g>
+        </g>
+      </svg>
+    `;
+    }
+    /** A check mark to render on success */
+    get successIndicatorTemplate() {
+        return html `
+      <svg
+        class="success-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.successTitle}</title>
+        <g stroke="none" stroke-width="1" fill-rule="evenodd">
+          <path
+            class="success-icon"
+            d="M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
+          ></path>
+          <polygon
+            class="success-icon"
+            transform="translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) "
+            points="96 85 54 85 54 65 76 64.999 76 -2 96 -2"
+          ></polygon>
+        </g>
+      </svg>
+    `;
+    }
+    /** An "!" to render on error */
+    get errorIndicatorTemplate() {
+        return html `
+      <svg
+        class="error-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.errorTitle}</title>
+        <path
+          class="error-icon"
+          d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z"
+        />
+      </svg>
+    `;
+    }
+    /* Whether to include the dots in the loading indicator */
+    get shouldShowLoadingDots() {
+        if (this.loadingStyle === 'ring')
+            return false;
+        return true;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --indicator-width--: var(--icon-width);
+
+          /* Loading */
+          --loading-ring-color--: var(--primary-text-color);
+          --loading-dot-color--: var(--primary-text-color);
+
+          /* Success */
+          --success-icon-color--: var(--color-success);
+
+          /* Error */
+          --error-icon-color--: var(--color-danger);
+
+          display: inline-block;
+          width: var(--indicator-width--);
+        }
+
+        .success-icon {
+          fill: var(--success-icon-color--);
+        }
+
+        .error-icon {
+          fill: var(--error-icon-color--);
+        }
+
+        .loading-ring {
+          fill: var(--loading-ring-color--);
+          animation: rotate 1.3s infinite linear;
+          transform-origin: 50px 50px;
+          transform-box: fill-box;
+        }
+
+        .loading-dots {
+          fill: var(--loading-dot-color--);
+          transition: opacity 0.25s ease-out;
+        }
+
+        .loading-dots.hidden {
+          display: none;
+        }
+
+        .loading-dots > * {
+          opacity: 0;
+          animation: dot 1.3s infinite;
+        }
+
+        .loading-dots #left-dot {
+          animation-delay: 0.2s;
+        }
+
+        .loading-dots #middle-dot {
+          animation-delay: 0.4s;
+        }
+
+        .loading-dots #right-dot {
+          animation-delay: 0.6s;
+        }
+
+        @keyframes rotate {
+          0% {
+            transform: rotate(-360deg);
+          }
+          100% {
+            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */
+            transform: rotate(0deg);
+          }
+        }
+
+        @keyframes dot {
+          0% {
+            opacity: 0;
+          }
+          25% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "loadingTitle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "successTitle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "errorTitle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "loadingStyle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "mode", void 0);
+IAStatusIndicator = __decorate([
+    customElement('ia-status-indicator')
+], IAStatusIndicator);
+export { IAStatusIndicator };
+//# sourceMappingURL=ia-status-indicator.js.map

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;GAEG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACL,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;QAE7D,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1D,qGAAqG;QACzE,eAAU,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;QAEtD,gDAAgD;QACpB,iBAAY,GAAyB,WAAW,CAAC;QAE7E,qDAAqD;QACzB,SAAI,GAAoC,SAAS,CAAC;IAuLhF,CAAC;IArLC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE;YAC9B,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC;SAC7C,CAAC,EAAE,CAAC;IACP,CAAC;IAED,6DAA6D;IAC7D,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;kCAOA,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;KASxE,CAAC;IACJ,CAAC;IAED,wCAAwC;IACxC,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;;;;;;;KAa7B,CAAC;IACJ,CAAC;IAED,gCAAgC;IAChC,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,UAAU;;;;;;KAM3B,CAAC;IACJ,CAAC;IAED,0DAA0D;IAC1D,IAAY,qBAAqB;QAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM;YAAE,OAAO,KAAK,CAAC;QAE/C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgFF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAnM6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkC;AAGjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA+B;AAG9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA2B;AAG1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkD;AAGjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmD;AAdnE,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAqM7B","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { choose } from 'lit/directives/choose.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Renders an SVG indicator, which defualts to an animated circular indicator\n */\n@customElement('ia-status-indicator')\nexport class IAStatusIndicator extends LitElement {\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) loadingTitle = msg('Loading...');\n\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) successTitle = msg('Success');\n\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) errorTitle = msg('Error');\n\n  /* Which type of loading indicator to display */\n  @property({ type: String }) loadingStyle: 'ring' | 'ring-dots' = 'ring-dots';\n\n  /* The state of the indicator that should be shown */\n  @property({ type: String }) mode: 'loading' | 'success' | 'error' = 'loading';\n\n  render(): TemplateResult {\n    return html`${choose(this.mode, [\n      ['loading', () => this.loadingIndicatorTemplate],\n      ['success', () => this.successIndicatorTemplate],\n      ['error', () => this.errorIndicatorTemplate],\n    ])}`;\n  }\n\n  /** A circular loading indicator to render when processing */\n  private get loadingIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"loading-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.loadingTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <g\n            class=\"loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}\"\n            transform=\"translate(40.000000, 55.000000)\"\n          >\n            <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\n          </g>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** A check mark to render on success */\n  private get successIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"success-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.successTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"success-icon\"\n            d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <polygon\n            class=\"success-icon\"\n            transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\n            points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\n          ></polygon>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** An \"!\" to render on error */\n  private get errorIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"error-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.errorTitle}</title>\n        <path\n          class=\"error-icon\"\n          d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\n        />\n      </svg>\n    `;\n  }\n\n  /* Whether to include the dots in the loading indicator */\n  private get shouldShowLoadingDots(): boolean {\n    if (this.loadingStyle === 'ring') return false;\n\n    return true;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --indicator-width--: var(--icon-width);\n\n          /* Loading */\n          --loading-ring-color--: var(--primary-text-color);\n          --loading-dot-color--: var(--primary-text-color);\n\n          /* Success */\n          --success-icon-color--: var(--color-success);\n\n          /* Error */\n          --error-icon-color--: var(--color-danger);\n\n          display: inline-block;\n          width: var(--indicator-width--);\n        }\n\n        .success-icon {\n          fill: var(--success-icon-color--);\n        }\n\n        .error-icon {\n          fill: var(--error-icon-color--);\n        }\n\n        .loading-ring {\n          fill: var(--loading-ring-color--);\n          animation: rotate 1.3s infinite linear;\n          transform-origin: 50px 50px;\n          transform-box: fill-box;\n        }\n\n        .loading-dots {\n          fill: var(--loading-dot-color--);\n          transition: opacity 0.25s ease-out;\n        }\n\n        .loading-dots.hidden {\n          display: none;\n        }\n\n        .loading-dots > * {\n          opacity: 0;\n          animation: dot 1.3s infinite;\n        }\n\n        .loading-dots #left-dot {\n          animation-delay: 0.2s;\n        }\n\n        .loading-dots #middle-dot {\n          animation-delay: 0.4s;\n        }\n\n        .loading-dots #right-dot {\n          animation-delay: 0.6s;\n        }\n\n        @keyframes rotate {\n          0% {\n            transform: rotate(-360deg);\n          }\n          100% {\n            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\n            transform: rotate(0deg);\n          }\n        }\n\n        @keyframes dot {\n          0% {\n            opacity: 0;\n          }\n          25% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/labs/ia-snow/ia-snow.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, type CSSResultGroup, type PropertyValues } from 'lit';
-import { type SnowflakesParams } from 'magic-snowflakes';
-import '../../elements/ia-button/ia-button';
+import type { SnowflakesParams } from 'magic-snowflakes';
 /**
  * An element that shows snowflakes to demo the elements library
  */
@@ -10,6 +9,8 @@ export declare class IASnow extends LitElement {
     private snowflakes?;
     render(): import("lit-html").TemplateResult<1>;
     protected willUpdate(_changedProperties: PropertyValues): void;
+    private get startButtonTemplate();
+    private get clearButtonTemplate();
     private startSnowing;
     private stopSnowing;
     static get styles(): CSSResultGroup;

package/dist/src/labs/ia-snow/ia-snow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-snow.d.ts","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAErE,OAAO,mCAAmC,CAAC;AAI3C;;GAEG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAG1D,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAC,CAAa;IAEhC,MAAM;IA4BN,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ9D,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAKnB,MAAM,KAAK,MAAM,IAAI,cAAc,CAQlC;CACF"}
+{"version":3,"file":"ia-snow.d.ts","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQzD;;GAEG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAG1D,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAC,CAAa;IAEhC,MAAM;IAON,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAc9D,OAAO,KAAK,mBAAmB,GAmB9B;IAED,OAAO,KAAK,mBAAmB,GAe9B;YAEa,YAAY;IAW1B,OAAO,CAAC,WAAW;IAKnB,MAAM,KAAK,MAAM,IAAI,cAAc,CAQlC;CACF"}

package/dist/src/labs/ia-snow/ia-snow.js

@@ -3,9 +3,8 @@ import { css, html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { state } from 'lit/decorators/state.js';
-import Snowflakes from 'magic-snowflakes';
-import '../../elements/ia-button/ia-button';
 import flakeIcon from './flake.svg';
+import { lazyLoadTemplate, } from '../../util/lazy-load-template';
 /**
  * An element that shows snowflakes to demo the elements library
  */
@@ -16,29 +15,7 @@ let IASnow = class IASnow extends LitElement {
     }
     render() {
         return html `
-      <ia-button
-        @click=${() => {
-            if (this.snowing) {
-                this.stopSnowing();
-            }
-            else {
-                this.startSnowing();
-            }
-        }}
-      >
-        ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}
-      </ia-button>
-
-      <ia-button
-        @click=${() => {
-            this.stopSnowing();
-            this.snowflakes?.destroy();
-            this.snowflakes = undefined;
-        }}
-      >
-        Clear Snowflakes
-      </ia-button>
-
+      ${this.startButtonTemplate} ${this.clearButtonTemplate}
       <img src=${flakeIcon} alt="Snowflakes icon" />
     `;
     }
@@ -49,8 +26,48 @@ let IASnow = class IASnow extends LitElement {
             this.startSnowing();
         }
     }
-    startSnowing() {
+    // Consider lazy loading external templates if they are large,
+    // below the fold or not needed immediately. This will reduce the initial
+    // bundle size.
+    //
+    // Note: In this case, ia-button is visible immediately so it's not a great
+    // example, but it demonstrates the lazy loading pattern.
+    get startButtonTemplate() {
+        return lazyLoadTemplate(async () => {
+            await import('../../elements/ia-button/ia-button');
+        }, () => html `
+        <ia-button
+          @click=${() => {
+            if (this.snowing) {
+                this.stopSnowing();
+            }
+            else {
+                this.startSnowing();
+            }
+        }}
+        >
+          ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}
+        </ia-button>
+      `);
+    }
+    get clearButtonTemplate() {
+        return lazyLoadTemplate(async () => {
+            await import('../../elements/ia-button/ia-button');
+        }, () => html `
+        <ia-button
+          @click=${() => {
+            this.snowflakes?.destroy();
+        }}
+        >
+          Clear Snowflakes
+        </ia-button>
+      `);
+    }
+    async startSnowing() {
         if (!this.snowflakes) {
+            // lazy load dependencies when possible to reduce initial bundle size
+            const SnowflakesModule = await import('magic-snowflakes');
+            const Snowflakes = SnowflakesModule.default;
             this.snowflakes = new Snowflakes(this.snowConfig);
         }
         this.snowflakes?.start();

package/dist/src/labs/ia-snow/ia-snow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,UAAqC,MAAM,kBAAkB,CAAC;AAErE,OAAO,mCAAmC,CAAC;AAE3C,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAIG,YAAO,GAAG,KAAK,CAAC;IA8D1B,CAAC;IA1DC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE;YACZ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;;UAEC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;;;;iBAI9C,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC9B,CAAC;;;;;iBAKQ,SAAS;KACrB,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,kBAAkC;QACrD,IAAI,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AAjE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAGlD;IADP,KAAK,EAAE;uCACgB;AAJb,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAkElB","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport Snowflakes, { type SnowflakesParams } from 'magic-snowflakes';\n\nimport '@src/elements/ia-button/ia-button';\n\nimport flakeIcon from './flake.svg';\n\n/**\n * An element that shows snowflakes to demo the elements library\n */\n@customElement('ia-snow')\nexport class IASnow extends LitElement {\n  @property({ type: Object }) snowConfig?: SnowflakesParams;\n\n  @state()\n  private snowing = false;\n\n  private snowflakes?: Snowflakes;\n\n  render() {\n    return html`\n      <ia-button\n        @click=${() => {\n          if (this.snowing) {\n            this.stopSnowing();\n          } else {\n            this.startSnowing();\n          }\n        }}\n      >\n        ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}\n      </ia-button>\n\n      <ia-button\n        @click=${() => {\n          this.stopSnowing();\n          this.snowflakes?.destroy();\n          this.snowflakes = undefined;\n        }}\n      >\n        Clear Snowflakes\n      </ia-button>\n\n      <img src=${flakeIcon} alt=\"Snowflakes icon\" />\n    `;\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('snowConfig')) {\n      this.snowflakes?.destroy();\n      this.snowflakes = undefined;\n      this.startSnowing();\n    }\n  }\n\n  private startSnowing() {\n    if (!this.snowflakes) {\n      this.snowflakes = new Snowflakes(this.snowConfig);\n    }\n    this.snowflakes?.start();\n    this.snowing = true;\n  }\n\n  private stopSnowing() {\n    this.snowflakes?.stop();\n    this.snowing = false;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      img {\n        width: 16px;\n        filter: invert(1);\n        vertical-align: middle;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport type Snowflakes from 'magic-snowflakes';\nimport type { SnowflakesParams } from 'magic-snowflakes';\n\nimport flakeIcon from './flake.svg';\nimport {\n  lazyLoadTemplate,\n  type LazyLoadedTemplate,\n} from '@src/util/lazy-load-template';\n\n/**\n * An element that shows snowflakes to demo the elements library\n */\n@customElement('ia-snow')\nexport class IASnow extends LitElement {\n  @property({ type: Object }) snowConfig?: SnowflakesParams;\n\n  @state()\n  private snowing = false;\n\n  private snowflakes?: Snowflakes;\n\n  render() {\n    return html`\n      ${this.startButtonTemplate} ${this.clearButtonTemplate}\n      <img src=${flakeIcon} alt=\"Snowflakes icon\" />\n    `;\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('snowConfig')) {\n      this.snowflakes?.destroy();\n      this.snowflakes = undefined;\n      this.startSnowing();\n    }\n  }\n\n  // Consider lazy loading external templates if they are large,\n  // below the fold or not needed immediately. This will reduce the initial\n  // bundle size.\n  //\n  // Note: In this case, ia-button is visible immediately so it's not a great\n  // example, but it demonstrates the lazy loading pattern.\n  private get startButtonTemplate(): LazyLoadedTemplate {\n    return lazyLoadTemplate(\n      async () => {\n        await import('@src/elements/ia-button/ia-button');\n      },\n      () => html`\n        <ia-button\n          @click=${() => {\n            if (this.snowing) {\n              this.stopSnowing();\n            } else {\n              this.startSnowing();\n            }\n          }}\n        >\n          ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}\n        </ia-button>\n      `,\n    );\n  }\n\n  private get clearButtonTemplate(): LazyLoadedTemplate {\n    return lazyLoadTemplate(\n      async () => {\n        await import('@src/elements/ia-button/ia-button');\n      },\n      () => html`\n        <ia-button\n          @click=${() => {\n            this.snowflakes?.destroy();\n          }}\n        >\n          Clear Snowflakes\n        </ia-button>\n      `,\n    );\n  }\n\n  private async startSnowing() {\n    if (!this.snowflakes) {\n      // lazy load dependencies when possible to reduce initial bundle size\n      const SnowflakesModule = await import('magic-snowflakes');\n      const Snowflakes = SnowflakesModule.default;\n      this.snowflakes = new Snowflakes(this.snowConfig);\n    }\n    this.snowflakes?.start();\n    this.snowing = true;\n  }\n\n  private stopSnowing() {\n    this.snowflakes?.stop();\n    this.snowing = false;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      img {\n        width: 16px;\n        filter: invert(1);\n        vertical-align: middle;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/themes/theme-styles.d.ts

@@ -0,0 +1,3 @@
+declare const themeStyles: import("lit").CSSResult;
+export default themeStyles;
+//# sourceMappingURL=theme-styles.d.ts.map

package/dist/src/themes/theme-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBA+DhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/themes/theme-styles.js

@@ -0,0 +1,67 @@
+import { css } from 'lit';
+const themeStyles = css `
+  :host {
+    /*
+    BASE STYLES
+    Default fallback values for theme styles. Assumes 16px root font size.
+    To adjust values, use theme styles below.
+    */
+
+    /* Typography */
+    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    /* Sizing */
+    --default-icon-width: 1.25rem;
+
+    /* Colors */
+    --true-white: #fff;
+    --off-white: #fbfbfd;
+    --dark-gray: #2c2c2c;
+    --light-gray: #666;
+    --classic-red: #e51c23;
+    --mint-green: #31a481;
+    --navy-blue: #194880;
+    --bright-blue: #4b64ff;
+
+    /*
+    ADJUSTABLE STYLES
+    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
+    */
+
+    /* Text */
+    --base-font-family: var(
+      --ia-theme-base-font-family,
+      var(--default-font-family)
+    );
+    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
+    --secondary-text-color: var(
+      --ia-theme-secondary-text-color,
+      var(--light-gray)
+    );
+    --link-color: var(--ia-theme-link-color, var(--bright-blue));
+
+    /* Sizing */
+    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
+
+    /* Backgrounds and fills */
+    --primary-background-color: var(
+      --ia-theme-primary-background-color,
+      var(--off-white)
+    );
+    --secondary-background-color: var(
+      --ia-theme-secondary-background-color,
+      var(--true-white)
+    );
+
+    /* State colors */
+    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
+    --primary-cta-text-color: var(
+      --ia-theme-primary-cta-text-color,
+      var(--true-white)
+    );
+    --color-success: var(--ia-theme-color-success, var(--mint-green));
+    --color-danger: var(--ia-theme-color-danger, var(--classic-red));
+  }
+`;
+export default themeStyles;
+//# sourceMappingURL=theme-styles.js.map

package/dist/src/themes/theme-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst themeStyles = css`\n  :host {\n    /*\n    BASE STYLES\n    Default fallback values for theme styles. Assumes 16px root font size.\n    To adjust values, use theme styles below.\n    */\n\n    /* Typography */\n    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n    /* Sizing */\n    --default-icon-width: 1.25rem;\n\n    /* Colors */\n    --true-white: #fff;\n    --off-white: #fbfbfd;\n    --dark-gray: #2c2c2c;\n    --light-gray: #666;\n    --classic-red: #e51c23;\n    --mint-green: #31a481;\n    --navy-blue: #194880;\n    --bright-blue: #4b64ff;\n\n    /*\n    ADJUSTABLE STYLES\n    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\n    */\n\n    /* Text */\n    --base-font-family: var(\n      --ia-theme-base-font-family,\n      var(--default-font-family)\n    );\n    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\n    --secondary-text-color: var(\n      --ia-theme-secondary-text-color,\n      var(--light-gray)\n    );\n    --link-color: var(--ia-theme-link-color, var(--bright-blue));\n\n    /* Sizing */\n    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\n\n    /* Backgrounds and fills */\n    --primary-background-color: var(\n      --ia-theme-primary-background-color,\n      var(--off-white)\n    );\n    --secondary-background-color: var(\n      --ia-theme-secondary-background-color,\n      var(--true-white)\n    );\n\n    /* State colors */\n    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\n    --primary-cta-text-color: var(\n      --ia-theme-primary-cta-text-color,\n      var(--true-white)\n    );\n    --color-success: var(--ia-theme-color-success, var(--mint-green));\n    --color-danger: var(--ia-theme-color-danger, var(--classic-red));\n  }\n`;\n\nexport default themeStyles;\n"]}

package/dist/src/util/lazy-load-template.d.ts

@@ -0,0 +1,51 @@
+import type { TemplateResult } from 'lit';
+import { Directive, DirectiveParameters, DirectiveResult, Part, PartInfo } from 'lit/directive.js';
+/**
+ * A LazyLoadedTemplate is a wrapper for a TemplateResult
+ * lazy-loaded with the `lazyLoadTemplate` function.
+ *
+ * It can be used in an html`` block, eg.
+ *
+ * html`
+ *   ${this.radioPlayerTemplate}  <-- see `radioPlayerTemplate` example below
+ * `
+ */
+export type LazyLoadedTemplate = DirectiveResult<typeof LazyLoadTemplate>;
+/**
+ * This utility let's you asynchronously load a webcomponent.
+ *
+ * Derived from an example shown in:
+ * https://www.youtube.com/watch?v=x9YDQUJx2uw
+ *
+ * Example use:
+ *
+ * get radioPlayerTemplate(): LazyLoadedTemplate {
+ *   return lazyLoadTemplate(
+ *     async (): Promise<void> => {
+ *       await import('./players/radio-player');
+ *     },
+ *     (): TemplateResult => {
+ *       return html`
+ *         <radio-player
+ *           .metadataResponse=${this.metadataResponse}
+ *           .browserHistoryHandler=${this.browserHistoryHandler}
+ *         >
+ *         </radio-player>
+ *       `;
+ *     },
+ *   );
+ * }
+ *
+ * ...
+ *
+ * return html`
+ *   ${this.radioPlayerTemplate}
+ * `
+ */
+export declare class LazyLoadTemplate extends Directive {
+    constructor(partInfo: PartInfo);
+    update(part: Part, [importPromise, value]: DirectiveParameters<this>): TemplateResult;
+    render(_importPromise: () => Promise<void>, value: () => TemplateResult): TemplateResult;
+}
+export declare const lazyLoadTemplate: (_importPromise: () => Promise<void>, value: () => TemplateResult) => DirectiveResult<typeof LazyLoadTemplate>;
+//# sourceMappingURL=lazy-load-template.d.ts.map

package/dist/src/util/lazy-load-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-load-template.d.ts","sourceRoot":"","sources":["../../../src/util/lazy-load-template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EACL,SAAS,EAET,mBAAmB,EACnB,eAAe,EACf,IAAI,EACJ,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAI1B;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,gBAAiB,SAAQ,SAAS;gBACjC,QAAQ,EAAE,QAAQ;IAI9B,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC;IAQpE,MAAM,CAAC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,cAAc;CAGxE;AAED,eAAO,MAAM,gBAAgB,yBALE,OAAO,CAAC,IAAI,CAAC,eAAe,cAAc,6CAKd,CAAC"}

package/dist/src/util/lazy-load-template.js

@@ -0,0 +1,50 @@
+import { Directive, directive, } from 'lit/directive.js';
+const resolved = new WeakSet();
+/**
+ * This utility let's you asynchronously load a webcomponent.
+ *
+ * Derived from an example shown in:
+ * https://www.youtube.com/watch?v=x9YDQUJx2uw
+ *
+ * Example use:
+ *
+ * get radioPlayerTemplate(): LazyLoadedTemplate {
+ *   return lazyLoadTemplate(
+ *     async (): Promise<void> => {
+ *       await import('./players/radio-player');
+ *     },
+ *     (): TemplateResult => {
+ *       return html`
+ *         <radio-player
+ *           .metadataResponse=${this.metadataResponse}
+ *           .browserHistoryHandler=${this.browserHistoryHandler}
+ *         >
+ *         </radio-player>
+ *       `;
+ *     },
+ *   );
+ * }
+ *
+ * ...
+ *
+ * return html`
+ *   ${this.radioPlayerTemplate}
+ * `
+ */
+export class LazyLoadTemplate extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+    }
+    update(part, [importPromise, value]) {
+        if (!resolved.has(part)) {
+            importPromise();
+            resolved.add(part);
+        }
+        return this.render(importPromise, value);
+    }
+    render(_importPromise, value) {
+        return value();
+    }
+}
+export const lazyLoadTemplate = directive(LazyLoadTemplate);
+//# sourceMappingURL=lazy-load-template.js.map

package/dist/src/util/lazy-load-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-load-template.js","sourceRoot":"","sources":["../../../src/util/lazy-load-template.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,SAAS,GAKV,MAAM,kBAAkB,CAAC;AAE1B,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAC;AAc/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAC7C,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,CAAC,IAAU,EAAE,CAAC,aAAa,EAAE,KAAK,CAA4B;QAClE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,CAAC,cAAmC,EAAE,KAA2B;QACrE,OAAO,KAAK,EAAE,CAAC;IACjB,CAAC;CACF;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import type { TemplateResult } from 'lit';\nimport {\n  Directive,\n  directive,\n  DirectiveParameters,\n  DirectiveResult,\n  Part,\n  PartInfo,\n} from 'lit/directive.js';\n\nconst resolved = new WeakSet();\n\n/**\n * A LazyLoadedTemplate is a wrapper for a TemplateResult\n * lazy-loaded with the `lazyLoadTemplate` function.\n *\n * It can be used in an html`` block, eg.\n *\n * html`\n *   ${this.radioPlayerTemplate}  <-- see `radioPlayerTemplate` example below\n * `\n */\nexport type LazyLoadedTemplate = DirectiveResult<typeof LazyLoadTemplate>;\n\n/**\n * This utility let's you asynchronously load a webcomponent.\n *\n * Derived from an example shown in:\n * https://www.youtube.com/watch?v=x9YDQUJx2uw\n *\n * Example use:\n *\n * get radioPlayerTemplate(): LazyLoadedTemplate {\n *   return lazyLoadTemplate(\n *     async (): Promise<void> => {\n *       await import('./players/radio-player');\n *     },\n *     (): TemplateResult => {\n *       return html`\n *         <radio-player\n *           .metadataResponse=${this.metadataResponse}\n *           .browserHistoryHandler=${this.browserHistoryHandler}\n *         >\n *         </radio-player>\n *       `;\n *     },\n *   );\n * }\n *\n * ...\n *\n * return html`\n *   ${this.radioPlayerTemplate}\n * `\n */\nexport class LazyLoadTemplate extends Directive {\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n  }\n\n  update(part: Part, [importPromise, value]: DirectiveParameters<this>) {\n    if (!resolved.has(part)) {\n      importPromise();\n      resolved.add(part);\n    }\n    return this.render(importPromise, value);\n  }\n\n  render(_importPromise: () => Promise<void>, value: () => TemplateResult) {\n    return value();\n  }\n}\n\nexport const lazyLoadTemplate = directive(LazyLoadTemplate);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "types": "./dist/src/elements/index.d.ts",
@@ -26,6 +26,7 @@
     "test": "wireit"
   },
   "dependencies": {
+    "@lit/localize": "^0.12.2",
     "lit": "^3.3.1",
     "magic-snowflakes": "^7.0.2",
     "tslib": "^2.8.1"