@internetarchive/elements 0.0.2-webdev-8133.0 → 0.1.1-webdev-8119.0

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

@@ -30,79 +30,79 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     }
     /** 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>
+        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>
+        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>
+        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 */
@@ -114,86 +114,86 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     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;
-          }
-        }
+            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;
+          }
+        }
       `,
         ];
     }

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

@@ -1 +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"]}
+{"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';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { msg } from '@lit/localize';\r\nimport { choose } from 'lit/directives/choose.js';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\n\r\n/**\r\n * Renders an SVG indicator, which defualts to an animated circular indicator\r\n */\r\n@customElement('ia-status-indicator')\r\nexport class IAStatusIndicator extends LitElement {\r\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\r\n  @property({ type: String }) loadingTitle = msg('Loading...');\r\n\r\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\r\n  @property({ type: String }) successTitle = msg('Success');\r\n\r\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\r\n  @property({ type: String }) errorTitle = msg('Error');\r\n\r\n  /* Which type of loading indicator to display */\r\n  @property({ type: String }) loadingStyle: 'ring' | 'ring-dots' = 'ring-dots';\r\n\r\n  /* The state of the indicator that should be shown */\r\n  @property({ type: String }) mode: 'loading' | 'success' | 'error' = 'loading';\r\n\r\n  render(): TemplateResult {\r\n    return html`${choose(this.mode, [\r\n      ['loading', () => this.loadingIndicatorTemplate],\r\n      ['success', () => this.successIndicatorTemplate],\r\n      ['error', () => this.errorIndicatorTemplate],\r\n    ])}`;\r\n  }\r\n\r\n  /** A circular loading indicator to render when processing */\r\n  private get loadingIndicatorTemplate(): TemplateResult {\r\n    return html`\r\n      <svg\r\n        class=\"loading-indicator\"\r\n        viewBox=\"0 0 120 120\"\r\n        preserveAspectRatio=\"none\"\r\n        version=\"1.1\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        role=\"status\"\r\n      >\r\n        <title>${this.loadingTitle}</title>\r\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n          <path\r\n            class=\"loading-ring\"\r\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\"\r\n          ></path>\r\n          <g\r\n            class=\"loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}\"\r\n            transform=\"translate(40.000000, 55.000000)\"\r\n          >\r\n            <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\r\n            <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\r\n            <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\r\n          </g>\r\n        </g>\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  /** A check mark to render on success */\r\n  private get successIndicatorTemplate(): TemplateResult {\r\n    return html`\r\n      <svg\r\n        class=\"success-indicator\"\r\n        viewBox=\"0 0 120 120\"\r\n        preserveAspectRatio=\"none\"\r\n        version=\"1.1\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        role=\"status\"\r\n      >\r\n        <title>${this.successTitle}</title>\r\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n          <path\r\n            class=\"success-icon\"\r\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\"\r\n          ></path>\r\n          <polygon\r\n            class=\"success-icon\"\r\n            transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\r\n            points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\r\n          ></polygon>\r\n        </g>\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  /** An \"!\" to render on error */\r\n  private get errorIndicatorTemplate(): TemplateResult {\r\n    return html`\r\n      <svg\r\n        class=\"error-indicator\"\r\n        viewBox=\"0 0 120 120\"\r\n        preserveAspectRatio=\"none\"\r\n        version=\"1.1\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        role=\"status\"\r\n      >\r\n        <title>${this.errorTitle}</title>\r\n        <path\r\n          class=\"error-icon\"\r\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\"\r\n        />\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  /* Whether to include the dots in the loading indicator */\r\n  private get shouldShowLoadingDots(): boolean {\r\n    if (this.loadingStyle === 'ring') return false;\r\n\r\n    return true;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return [\r\n      themeStyles,\r\n      css`\r\n        :host {\r\n          --indicator-width--: var(--icon-width);\r\n\r\n          /* Loading */\r\n          --loading-ring-color--: var(--primary-text-color);\r\n          --loading-dot-color--: var(--primary-text-color);\r\n\r\n          /* Success */\r\n          --success-icon-color--: var(--color-success);\r\n\r\n          /* Error */\r\n          --error-icon-color--: var(--color-danger);\r\n\r\n          display: inline-block;\r\n          width: var(--indicator-width--);\r\n        }\r\n\r\n        .success-icon {\r\n          fill: var(--success-icon-color--);\r\n        }\r\n\r\n        .error-icon {\r\n          fill: var(--error-icon-color--);\r\n        }\r\n\r\n        .loading-ring {\r\n          fill: var(--loading-ring-color--);\r\n          animation: rotate 1.3s infinite linear;\r\n          transform-origin: 50px 50px;\r\n          transform-box: fill-box;\r\n        }\r\n\r\n        .loading-dots {\r\n          fill: var(--loading-dot-color--);\r\n          transition: opacity 0.25s ease-out;\r\n        }\r\n\r\n        .loading-dots.hidden {\r\n          display: none;\r\n        }\r\n\r\n        .loading-dots > * {\r\n          opacity: 0;\r\n          animation: dot 1.3s infinite;\r\n        }\r\n\r\n        .loading-dots #left-dot {\r\n          animation-delay: 0.2s;\r\n        }\r\n\r\n        .loading-dots #middle-dot {\r\n          animation-delay: 0.4s;\r\n        }\r\n\r\n        .loading-dots #right-dot {\r\n          animation-delay: 0.6s;\r\n        }\r\n\r\n        @keyframes rotate {\r\n          0% {\r\n            transform: rotate(-360deg);\r\n          }\r\n          100% {\r\n            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\r\n            transform: rotate(0deg);\r\n          }\r\n        }\r\n\r\n        @keyframes dot {\r\n          0% {\r\n            opacity: 0;\r\n          }\r\n          25% {\r\n            opacity: 1;\r\n          }\r\n          100% {\r\n            opacity: 0;\r\n          }\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

package/dist/src/elements/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ia-button/ia-button';
+export * from './ia-combo-box/ia-combo-box';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/elements/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC"}

package/dist/src/elements/index.js

@@ -1,2 +1,3 @@
 export * from './ia-button/ia-button';
+export * from './ia-combo-box/ia-combo-box';
 //# sourceMappingURL=index.js.map

package/dist/src/elements/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './ia-button/ia-button';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';"]}

package/dist/src/labs/ia-snow/flake.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>

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

@@ -1 +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"}
+{"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBAmEhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,67 +1,71 @@
 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));
-  }
+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;
+    --default-padding-sm: 5px;
+    --default-combo-box-width: auto;
+
+    /* 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));
+    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
+    --combo-box-width: var(--ia-theme-combo-box-width, var(--default-combo-box-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

@@ -1 +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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nconst themeStyles = css`\r\n  :host {\r\n    /*\r\n    BASE STYLES\r\n    Default fallback values for theme styles. Assumes 16px root font size.\r\n    To adjust values, use theme styles below.\r\n    */\r\n\r\n    /* Typography */\r\n    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n\r\n    /* Sizing */\r\n    --default-icon-width: 1.25rem;\r\n    --default-padding-sm: 5px;\r\n    --default-combo-box-width: auto;\r\n\r\n    /* Colors */\r\n    --true-white: #fff;\r\n    --off-white: #fbfbfd;\r\n    --dark-gray: #2c2c2c;\r\n    --light-gray: #666;\r\n    --classic-red: #e51c23;\r\n    --mint-green: #31a481;\r\n    --navy-blue: #194880;\r\n    --bright-blue: #4b64ff;\r\n\r\n    /*\r\n    ADJUSTABLE STYLES\r\n    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\r\n    */\r\n\r\n    /* Text */\r\n    --base-font-family: var(\r\n      --ia-theme-base-font-family,\r\n      var(--default-font-family)\r\n    );\r\n    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\r\n    --secondary-text-color: var(\r\n      --ia-theme-secondary-text-color,\r\n      var(--light-gray)\r\n    );\r\n    --link-color: var(--ia-theme-link-color, var(--bright-blue));\r\n\r\n    /* Sizing */\r\n    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\r\n    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\r\n    --combo-box-width: var(--ia-theme-combo-box-width, var(--default-combo-box-width));\r\n\r\n    /* Backgrounds and fills */\r\n    --primary-background-color: var(\r\n      --ia-theme-primary-background-color,\r\n      var(--off-white)\r\n    );\r\n    --secondary-background-color: var(\r\n      --ia-theme-secondary-background-color,\r\n      var(--true-white)\r\n    );\r\n\r\n    /* State colors */\r\n    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\r\n    --primary-cta-text-color: var(\r\n      --ia-theme-primary-cta-text-color,\r\n      var(--true-white)\r\n    );\r\n    --color-success: var(--ia-theme-color-success, var(--mint-green));\r\n    --color-danger: var(--ia-theme-color-danger, var(--classic-red));\r\n  }\r\n`;\r\n\r\nexport default themeStyles;\r\n"]}