@internetarchive/elements 0.2.14-webdev-8969.0 → 0.2.14-webdev-9022.0

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

@@ -1,11 +1,40 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, LitElement, nothing, svg, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import { choose } from 'lit/directives/choose.js';
 import themeStyles from '../../themes/theme-styles.js';
+import { maskedIcon } from '../../util/masked-icon.js';
+import audioIcon from './icons/audio.svg';
+import collectionIcon from './icons/collection.svg';
+import etreeIcon from './icons/etree.svg';
+import imagesIcon from './icons/images.svg';
+import searchIcon from './icons/search.svg';
+import softwareIcon from './icons/software.svg';
+import textsIcon from './icons/texts.svg';
+import tvIcon from './icons/tv.svg';
+import videoIcon from './icons/video.svg';
+import webIcon from './icons/web.svg';
+const MEDIATYPE_ICONS = {
+    audio: audioIcon,
+    collection: collectionIcon,
+    etree: etreeIcon,
+    images: imagesIcon,
+    search: searchIcon,
+    software: softwareIcon,
+    texts: textsIcon,
+    tv: tvIcon,
+    video: videoIcon,
+    web: webIcon,
+};
 /**
- * Renders an SVG indicator, which defualts to an animated circular indicator
+ * Renders an SVG indicator, which defaults to an animated circular indicator.
+ *
+ * In `loading` mode the middle of the ring resolves in this order:
+ *   1. slotted `icon` content
+ *   2. the `mediatype` glyph
+ *   3. nothing, when `hideDots` is set
+ *   4. three animated dots (the default)
  */
 let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     constructor() {
@@ -16,10 +45,12 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
         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';
+        /* Renders a bare ring, with no dots in the middle. Ignored when a center icon is present. */
+        this.hideDots = false;
+        /* Whether a consumer has slotted their own center icon */
+        this.hasSlottedIcon = false;
     }
     render() {
         return html `${choose(this.mode, [
@@ -29,13 +60,51 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
             ['error', () => this.errorIndicatorTemplate],
         ])}`;
     }
-    /** A placeholder to render before loading begins, if desired */
+    /**
+     * The `ready` state: reserves the indicator's space without drawing, so a
+     * consumer's layout doesn't shift once the indicator appears.
+     */
     get placeholderTemplate() {
         return html `<div class="placeholder"></div>`;
     }
-    /** A circular loading indicator to render when processing */
+    /**
+     * The asset URL for the current mediatype, if it maps to a glyph we ship.
+     *
+     * Unmapped values (e.g. archive.org's `account` or `data`) resolve to
+     * undefined and degrade to the default dots rather than a broken mask.
+     */
+    get mediatypeIconUrl() {
+        if (!this.mediatype)
+            return undefined;
+        return MEDIATYPE_ICONS[this.mediatype];
+    }
+    /** Whether the middle of the ring is occupied by a glyph rather than dots */
+    get hasCenterIcon() {
+        return this.hasSlottedIcon || !!this.mediatypeIconUrl;
+    }
+    /**
+     * A circular loading indicator to render when processing.
+     *
+     * Two ring geometries are kept deliberately: the original 120x120 ring is
+     * tuned for the dots, and the roomier 100x100 ring leaves space for a center
+     * glyph. Keeping both means existing consumers see no visual change.
+     */
     get loadingIndicatorTemplate() {
+        const hasCenterIcon = this.hasCenterIcon;
         return html `
+      <div class="indicator">
+        ${hasCenterIcon ? this.iconRingSvg : this.dottedRingSvg}
+        <span class="center" ?hidden=${!hasCenterIcon}>
+          <slot name="icon" @slotchange=${this.handleIconSlotChange}>
+            ${this.mediatypeIconTemplate}
+          </slot>
+        </span>
+      </div>
+    `;
+    }
+    /** The original ring, with the three animated dots in the middle */
+    get dottedRingSvg() {
+        return svg `
       <svg
         class="loading-indicator"
         viewBox="0 0 120 120"
@@ -52,7 +121,7 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
             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' : ''}"
+            class="loading-dots ${this.hideDots ? 'hidden' : ''}"
             transform="translate(40.000000, 55.000000)"
           >
             <circle id="left-dot" cx="5" cy="5" r="5"></circle>
@@ -63,6 +132,42 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
       </svg>
     `;
     }
+    /** The roomier ring, used when a glyph occupies the middle */
+    get iconRingSvg() {
+        return svg `
+      <svg
+        class="loading-indicator icon-ring"
+        viewBox="0 0 100 100"
+        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 fill-rule="evenodd">
+          <path
+            class="loading-ring"
+            fill-rule="nonzero"
+            d="m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z"
+          ></path>
+        </g>
+      </svg>
+    `;
+    }
+    /**
+     * The bundled mediatype glyph. `maskedIcon` supplies the mask geometry and
+     * the decorative `aria-hidden`; this component supplies the size and paint.
+     */
+    get mediatypeIconTemplate() {
+        const url = this.mediatypeIconUrl;
+        if (!url)
+            return nothing;
+        return maskedIcon(url);
+    }
+    handleIconSlotChange(e) {
+        const slot = e.target;
+        this.hasSlottedIcon = slot.assignedNodes({ flatten: false }).length > 0;
+    }
     /** A check mark to render on success */
     get successIndicatorTemplate() {
         return html `
@@ -110,12 +215,6 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
       </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,
@@ -126,6 +225,7 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
           /* Loading */
           --loading-ring-color--: var(--primary-text-color);
           --loading-dot-color--: var(--primary-text-color);
+          --loading-icon-color--: var(--primary-text-color);
 
           /* Success */
           --success-icon-color--: var(--color-success);
@@ -141,6 +241,40 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
           height: var(--indicator-width--);
         }
 
+        /* Stacks the center glyph over the ring */
+        .indicator {
+          position: relative;
+          display: block;
+        }
+
+        .indicator svg {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+
+        .center {
+          position: absolute;
+          inset: 0;
+          display: grid;
+          place-items: center;
+        }
+
+        .center[hidden] {
+          display: none;
+        }
+
+        /*
+         * Sized to fit within the icon ring's inner diameter. maskedIcon sets
+         * the mask itself; background-color is what paints the glyph, so it
+         * recolors with the ring.
+         */
+        .ia-icon {
+          width: 50%;
+          height: 50%;
+          background-color: var(--loading-icon-color--);
+        }
+
         .success-icon {
           fill: var(--success-icon-color--);
         }
@@ -218,10 +352,16 @@ __decorate([
 ], IAStatusIndicator.prototype, "errorTitle", void 0);
 __decorate([
     property({ type: String })
-], IAStatusIndicator.prototype, "loadingStyle", void 0);
+], IAStatusIndicator.prototype, "mode", void 0);
 __decorate([
     property({ type: String })
-], IAStatusIndicator.prototype, "mode", void 0);
+], IAStatusIndicator.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAStatusIndicator.prototype, "hideDots", void 0);
+__decorate([
+    state()
+], IAStatusIndicator.prototype, "hasSlottedIcon", void 0);
 IAStatusIndicator = __decorate([
     customElement('ia-status-indicator')
 ], IAStatusIndicator);

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":"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","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\nexport type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';\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: LoadingStatus = 'loading';\n\n  render(): TemplateResult {\n    return html`${choose(this.mode, [\n      ['ready', () => this.placeholderTemplate],\n      ['loading', () => this.loadingIndicatorTemplate],\n      ['success', () => this.successIndicatorTemplate],\n      ['error', () => this.errorIndicatorTemplate],\n    ])}`;\n  }\n\n  /** A placeholder to render before loading begins, if desired */\n  private get placeholderTemplate(): TemplateResult {\n    return html`<div class=\"placeholder\"></div>`;\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        .placeholder {\n          height: 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":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  svg,\n  SVGTemplateResult,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { choose } from 'lit/directives/choose.js';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\n\nimport audioIcon from './icons/audio.svg';\nimport collectionIcon from './icons/collection.svg';\nimport etreeIcon from './icons/etree.svg';\nimport imagesIcon from './icons/images.svg';\nimport searchIcon from './icons/search.svg';\nimport softwareIcon from './icons/software.svg';\nimport textsIcon from './icons/texts.svg';\nimport tvIcon from './icons/tv.svg';\nimport videoIcon from './icons/video.svg';\nimport webIcon from './icons/web.svg';\n\nexport type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';\n\n/**\n * The mediatype glyphs this element ships. These are *icon* names, which do not\n * map one-to-one onto archive.org mediatype values — a consumer holding a\n * `MediaType` translates at its own call site (e.g. `movies` -> `video`).\n */\nexport type MediaTypeIcon =\n  | 'audio'\n  | 'collection'\n  | 'etree'\n  | 'images'\n  | 'search'\n  | 'software'\n  | 'texts'\n  | 'tv'\n  | 'video'\n  | 'web';\n\nconst MEDIATYPE_ICONS: Record<MediaTypeIcon, string> = {\n  audio: audioIcon,\n  collection: collectionIcon,\n  etree: etreeIcon,\n  images: imagesIcon,\n  search: searchIcon,\n  software: softwareIcon,\n  texts: textsIcon,\n  tv: tvIcon,\n  video: videoIcon,\n  web: webIcon,\n};\n\n/**\n * Renders an SVG indicator, which defaults to an animated circular indicator.\n *\n * In `loading` mode the middle of the ring resolves in this order:\n *   1. slotted `icon` content\n *   2. the `mediatype` glyph\n *   3. nothing, when `hideDots` is set\n *   4. three animated dots (the default)\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  /* The state of the indicator that should be shown */\n  @property({ type: String }) mode: LoadingStatus = 'loading';\n\n  /* An optional mediatype glyph to render in the middle of the loading ring */\n  @property({ type: String }) mediatype?: MediaTypeIcon;\n\n  /* Renders a bare ring, with no dots in the middle. Ignored when a center icon is present. */\n  @property({ type: Boolean }) hideDots = false;\n\n  /* Whether a consumer has slotted their own center icon */\n  @state() private hasSlottedIcon = false;\n\n  render(): TemplateResult {\n    return html`${choose(this.mode, [\n      ['ready', () => this.placeholderTemplate],\n      ['loading', () => this.loadingIndicatorTemplate],\n      ['success', () => this.successIndicatorTemplate],\n      ['error', () => this.errorIndicatorTemplate],\n    ])}`;\n  }\n\n  /**\n   * The `ready` state: reserves the indicator's space without drawing, so a\n   * consumer's layout doesn't shift once the indicator appears.\n   */\n  private get placeholderTemplate(): TemplateResult {\n    return html`<div class=\"placeholder\"></div>`;\n  }\n\n  /**\n   * The asset URL for the current mediatype, if it maps to a glyph we ship.\n   *\n   * Unmapped values (e.g. archive.org's `account` or `data`) resolve to\n   * undefined and degrade to the default dots rather than a broken mask.\n   */\n  private get mediatypeIconUrl(): string | undefined {\n    if (!this.mediatype) return undefined;\n    return MEDIATYPE_ICONS[this.mediatype];\n  }\n\n  /** Whether the middle of the ring is occupied by a glyph rather than dots */\n  private get hasCenterIcon(): boolean {\n    return this.hasSlottedIcon || !!this.mediatypeIconUrl;\n  }\n\n  /**\n   * A circular loading indicator to render when processing.\n   *\n   * Two ring geometries are kept deliberately: the original 120x120 ring is\n   * tuned for the dots, and the roomier 100x100 ring leaves space for a center\n   * glyph. Keeping both means existing consumers see no visual change.\n   */\n  private get loadingIndicatorTemplate(): TemplateResult {\n    const hasCenterIcon = this.hasCenterIcon;\n    return html`\n      <div class=\"indicator\">\n        ${hasCenterIcon ? this.iconRingSvg : this.dottedRingSvg}\n        <span class=\"center\" ?hidden=${!hasCenterIcon}>\n          <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}>\n            ${this.mediatypeIconTemplate}\n          </slot>\n        </span>\n      </div>\n    `;\n  }\n\n  /** The original ring, with the three animated dots in the middle */\n  private get dottedRingSvg(): SVGTemplateResult {\n    return svg`\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.hideDots ? '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  /** The roomier ring, used when a glyph occupies the middle */\n  private get iconRingSvg(): SVGTemplateResult {\n    return svg`\n      <svg\n        class=\"loading-indicator icon-ring\"\n        viewBox=\"0 0 100 100\"\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 fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            fill-rule=\"nonzero\"\n            d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n          ></path>\n        </g>\n      </svg>\n    `;\n  }\n\n  /**\n   * The bundled mediatype glyph. `maskedIcon` supplies the mask geometry and\n   * the decorative `aria-hidden`; this component supplies the size and paint.\n   */\n  private get mediatypeIconTemplate(): TemplateResult | typeof nothing {\n    const url = this.mediatypeIconUrl;\n    if (!url) return nothing;\n\n    return maskedIcon(url);\n  }\n\n  private handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasSlottedIcon = slot.assignedNodes({ flatten: false }).length > 0;\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  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          --loading-icon-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        .placeholder {\n          height: var(--indicator-width--);\n        }\n\n        /* Stacks the center glyph over the ring */\n        .indicator {\n          position: relative;\n          display: block;\n        }\n\n        .indicator svg {\n          display: block;\n          width: 100%;\n          height: auto;\n        }\n\n        .center {\n          position: absolute;\n          inset: 0;\n          display: grid;\n          place-items: center;\n        }\n\n        .center[hidden] {\n          display: none;\n        }\n\n        /*\n         * Sized to fit within the icon ring's inner diameter. maskedIcon sets\n         * the mask itself; background-color is what paints the glyph, so it\n         * recolors with the ring.\n         */\n        .ia-icon {\n          width: 50%;\n          height: 50%;\n          background-color: var(--loading-icon-color--);\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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-status-indicator': IAStatusIndicator;\n  }\n}\n"]}

package/dist/src/elements/ia-status-indicator/icons/audio.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m225.568345 20c20.949641 0 28.431655 8.5714286 28.431655 28.5714286-.928802 21.2807881-.704608 42.5615763-.400898 63.8423644l.153512 10.640394c.13351 9.458128.247386 18.916256.247386 28.374384v100c0 18.571429-5.985612 28.571429-28.431655 28.571429-50.877698-1.428571-100.258992-1.428571-151.1366903 0-20.9496403 0-28.4316547-8.571429-28.4316547-28.571429v-202.8571424c0-18.5714286 5.9856115-28.5714286 28.4316547-28.5714286 50.8776983 1.4285714 100.2589923 1.4285714 151.1366903 0zm-74.268345 127.4c-30.251351 0-53.3 24.489189-53.3 53.3 0 30.251351 24.489189 53.3 53.3 53.3 30.251351 0 53.3-24.489189 53.3-53.3s-24.489189-53.3-53.3-53.3zm0 39c7.897672 0 14.3 6.402328 14.3 14.3s-6.402328 14.3-14.3 14.3-14.3-6.402328-14.3-14.3 6.402328-14.3 14.3-14.3zm-1.3-137.8c-20.384 0-36.4 16.016-36.4 36.4s16.016 36.4 36.4 36.4 36.4-16.016 36.4-36.4-17.472-36.4-36.4-36.4z" fill="black" fill-rule="evenodd"/>
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/collection.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 67 300 233"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m280 262.122891v-156.834044c0-4.877026-2.063112-9.1444235-6.189337-12.8021929s-8.220563-5.4866541-12.283013-5.4866541h-225.4946834c-4.4642309 0-8.2524498 1.726748-11.3646565 5.1802441s-4.6683101 7.8230299-4.6683101 13.1086029v156.834044c0 5.279189 1.5210273 9.578505 4.5630818 12.897946 3.0420545 3.319442 6.8653495 4.979163 11.4698848 4.979163h225.4946834c4.06245 0 8.156788-1.726748 12.283013-5.180244s6.189337-7.685784 6.189337-12.696865zm-200.9382244-131.440315v7.918783c0 1.487366-.7780516 3.00984-2.334155 4.567424-1.5561034 1.557585-3.1472828 2.336377-4.7735384 2.336377h-14.8180581c-1.7601825 0-3.4183254-.743683-4.9744288-2.231048-1.5561033-1.487365-2.334155-3.044949-2.334155-4.672753v-7.918783c0-1.761858.8131278-3.964179 2.4393834-6.606966 1.6262555-2.642786 3.2493223-3.964179 4.8692004-3.964179h14.8180581c1.4859512 0 3.0420545 1.321393 4.6683101 3.964179 1.6262556 2.642787 2.4393833 4.845108 2.4393833 6.606966zm169.2740724 0v7.918783c0 1.627804-.711089 3.185388-2.133265 4.672753-1.422177 1.487365-3.080319 2.231048-4.974429 2.231048h-131.114463c-2.028037 0-3.753143-.743683-5.175319-2.231048-1.422177-1.487365-2.133265-3.044949-2.133265-4.672753v-7.918783c0-1.895912.742975-4.130152 2.228927-6.702719 1.485951-2.572567 3.175981-3.858851 5.070091-3.858851h131.114463c1.760182 0 3.383249 1.286284 4.8692 3.858851 1.485952 2.572567 2.228927 4.806807 2.228927 6.702719zm-169.2740724 50.988539v7.918784c0 1.487365-.7780516 2.977922-2.334155 4.471671s-3.1472828 2.237431-4.7735384 2.231088h-14.8180581c-1.7601825 0-3.4183254-.743723-4.9744288-2.231088-1.5561033-1.487365-2.334155-2.977922-2.334155-4.471671v-7.918784c0-1.895912.8131278-4.165261 2.4393834-6.808047 1.6262555-2.642786 3.2493223-3.964179 4.8692004-3.964179h14.8180581c1.4859512 0 3.0420545 1.353311 4.6683101 4.059932 1.6262556 2.706622 2.4393833 4.940861 2.4393833 6.702719zm169.2740724 0v7.918784c0 1.487365-.711089 2.977922-2.133265 4.471671-1.422177 1.493749-3.080319 2.237431-4.974429 2.231088h-131.114463c-2.028037 0-3.753143-.743723-5.175319-2.231088-1.422177-1.487365-2.133265-2.977922-2.133265-4.471671v-7.918784c0-2.029966.742975-4.331233 2.228927-6.9038 1.485951-2.572567 3.175981-3.858851 5.070091-3.858851h131.114463c1.760182 0 3.383249 1.321393 4.8692 3.964179 1.485952 2.642787 2.228927 4.912136 2.228927 6.808048zm-169.2740724 51.400278v6.9038c0 1.761858-.7780516 3.421579-2.334155 4.979163s-3.1472828 2.336376-4.7735384 2.336376h-14.8180581c-1.7601825 0-3.4183254-.778792-4.9744288-2.336376-1.5561033-1.557584-2.334155-3.217305-2.334155-4.979163v-6.9038c0-2.029966.7780517-4.366342 2.334155-7.009129 1.5561034-2.642786 3.2142463-3.964179 4.9744288-3.964179h14.8180581c1.4859512 0 3.0420545 1.321393 4.6683101 3.964179 1.6262556 2.642787 2.4393833 4.979163 2.4393833 7.009129zm169.2740724 0v6.9038c0 1.761858-.711089 3.421579-2.133265 4.979163-1.422177 1.557584-3.080319 2.336376-4.974429 2.336376h-131.114463c-2.028037 0-3.753143-.778792-5.175319-2.336376-1.422177-1.557584-2.133265-3.217305-2.133265-4.979163v-6.9038c0-2.170404.742975-4.54189 2.228927-7.114457 1.485951-2.572567 3.175981-3.858851 5.070091-3.858851h131.114463c1.760182 0 3.383249 1.321393 4.8692 3.964179 1.485952 2.642787 2.228927 4.979163 2.228927 7.009129z" fill="black"/>
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/etree.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m136.125893 117.288073c14.41013-4.850562 27.83316-2.109766 39.480173 7.796632 10.335962 8.792594 14.330094 20.428621 14.288498 33.809481-.091795 25.476855-.015572 50.965113-.049872 76.441968-.003811 2.805419-.034301 5.648851-.457344 8.401051-3.376719 21.854139-21.133078 36.299386-43.127486 35.204588-20.210769-1.003564-37.307792-18.132586-37.799436-38.393946-.346818-14.513672-.060979-29.057755-.301084-43.586633 0-12.597776-.06479-25.191751.034301-37.789527.0343-3.656928.16007-7.401288.903253-10.963182 3.18997-15.36138 12.272049-25.963431 27.028997-30.920432zm69.082871-95.288073v20.8201628h-42.6892v27.2482979s2.61448.5740085 3.574902.8363038c23.797103 6.5155667 41.073252 15.8669636 55.262332 37.0824705 8.594246 12.852468 11.643202 31.380398 11.643202 46.760785v15.304359h-20.889162c0-5.538611.099091-10.750305-.038112-15.961998-.099091-3.896415-.167692-7.857454-.842274-11.689246-5.328051-30.262793-30.775402-49.8170956-57.026916-51.5315184-29.311903-1.9120945-57.1907972 18.1858064-64.1500399 46.8520184-1.6657464 6.843753-1.7799637 13.736569-1.7780383 20.63947l.0023262 1.88283c.0030489 1.883022.0050308 3.76653-.0231721 5.649734-.0228671 1.364696 0 2.72559 0 4.052272h-20.5918884c-5.5529117-51.542923 24.3078039-93.7420516 70.1221835-99.8660762v-27.3889489h-42.6205979v-20.6909159z" fill="black" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 301)"/>
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/images.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m43.0952612 181.159979c2.1744514 0 21.7161099 3.336499 21.7161099 3.336499v21.030628l-44.8113711-6.289709c4.5382599-51.29161 9.6729948-105.5332879 14.6089046-156.237397 66.1329874 6.484496 144.5110704 16.1138469 211.0385514 22.4035567-.987813 6.4876377-1.581132 21.8160564-1.972471 28.3005524-4.939065-.5906421-15.599873 0-20.535783-.5906421v-9.0418506c-56.065498-5.3032118-112.326666-12.180422-168.3953197-17.6847035 0 0-7.7005244 74.2858081-11.6486211 114.7730661zm31.7867547-81.562016h205.1179841v158.402037h-205.1179841zm18.9514955 140.126691h167.8051566v-64.461671l-21.122791 35.963191-28.428821-67.408598-24.2819 28.891194-66.530637-54.634392h-27.4410076zm64.5550106-40.487257c0-11.394994-9.082832-20.436845-20.731453-20.436845-11.250971 0-20.923965 9.041851-20.923965 20.436845 0 11.203349 9.672994 20.439986 20.923965 20.439986 11.648621 0 20.731453-9.236637 20.731453-20.439986z" fill="black" transform="matrix(1 0 0 -1 0 301)"/>
+
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/search.svg

@@ -0,0 +1,10 @@
+<svg
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    class="fill-color"
+    d="m17.0555551 41.3194459c0-12.7430552 10.3541664-23.1027772 23.0847216-23.1027772 12.7166664 0 23.0777773 10.359722 23.0777773 23.1027772 0 12.7361108-10.3611109 23.0986106-23.0777773 23.0986106-12.7305552 0-23.0847216-10.3624998-23.0847216-23.0986106zm-17.24305512 0c0 22.2916661 18.04583292 40.3472213 40.32777672 40.3472213 8.9208332 0 17.145833-2.9319449 23.8194439-7.8527776l24.1513883 24.0777771c1.2125 1.1402778 2.8430555 1.8430556 4.6374999 1.8430556 3.7444443 0 6.7805554-3.0361111 6.7805554-6.7791665 0-2.0652778-.9222222-3.9069444-2.3736111-5.1499999l-23.718055-23.7458328c4.4152777-6.4791665 7.0152776-14.3055552 7.0152776-22.7402772 0-22.2791661-18.0458328-40.34861006-40.312499-40.34861006-22.2819438 0-40.32777672 18.06944396-40.32777672 40.34861006z"
+    fill="#2c2c2c"
+    fill-rule="evenodd"
+  />
+</svg>

package/dist/src/elements/ia-status-indicator/icons/software.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m266.443951 20c8.716971 0 13.539477 4.8435881 13.556049 13.5985084v116.3828466 116.072094c0 9.214834-4.702358 13.946551-13.854348 13.946551h-232.4332033c-8.9489808 0-13.6969123-4.793868-13.6969123-13.768386-.0207152-77.476694-.0207152-154.961674 0-232.4590845 0-8.9662316 4.7479315-13.7725295 13.672054-13.7725295zm-197.7807608 138.512534c-2.3822518 0-5.1000904 1.052413-7.0887528 2.444582-4.1223314 2.871349-5.2575262 7.383468-5.2575262 12.227056l.0000647 20.524783c.0000093.952732.0000199 1.902825.0000319 2.850655l.0008306 25.31649c.0000546.937648.0001123 1.876427.0001735 2.816715l.0009089 11.379992c.0000914.958389.0001869 1.919795.0002867 2.884595l.0006526 5.832546c.0003539 2.939654.0007502 5.916643.0011941 8.941148 0 1.052413.0952901 2.092397.1574358 3.298115h183.648829l.28587-1.143568c.016572-29.633312.111862-55.119121-.033144-84.760721-.041431-7.391754-5.522681-12.703542-12.350422-12.703542-53.113858-.008287-106.236002-.045577-159.3664328.091154zm146.0755388-113.992128h-129.8596542l-.2444397 1.1601409c-.0082861 22.2001243-.0662888 44.3961053.0331443 66.6003731.0207153 5.676403 4.0228983 9.264553 9.7485888 9.264553 36.5333858.008287 73.0460558.008287 109.5835838.008287 7.391195 0 10.734634-3.372695 10.738777-10.876321zm-20.434335 9.1887301v53.7103789h-32.709353v-53.7103789z" fill="black" fill-rule="evenodd"/>
+
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/texts.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 66 300 234"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m30.7264159 91.3202111 1.6974686 166.4298289s93.0569425-.896348 99.7147175 6.469589c4.752251 5.262329 29.15749 5.35494 31.185205 2.06061 5.607591-9.099099 85.824537-7.696693 102.729871-8.530199l1.905524-164.9480418 12.040798 4.2865984v175.2610164s-105.576598-1.796006-108.707338 4.190679c-.369876.714433-11.030243 3.459708-17.354469 3.459708l-.365424-.000017-.751764-.000432c-7.778071-.009122-19.543206-.203741-22.971013-4.355608-5.663733-6.863188-109.849992-4.187372-109.849992-4.187372v-175.5388508zm222.4119701-5.3202111v146.683693s-1.32429 4.845576-4.61685 8.004297c-2.777376 2.665893-8.834102 2.768428-8.834102 2.768428h-59.100966s-15.366384 3.883076-18.041383 8.146521l-7.21259-.046306v-156.044089c4.785276-5.1035658 12.024286-9.512544 22.929035-9.512544zm-132.891971 0c10.736323 0 17.929098 4.2766757 22.714375 9.2909375v156.2656955l-7.001233.046306c-5.165059-5.067182-18.044684-8.146521-18.044684-8.146521l-61.8453708-.000141c-.1987476-.00456-4.8027407-.135182-7.8201913-2.503683-2.7517631-2.168142-2.8740636-6.281222-2.8794992-6.642546l-.0002528-148.310048z" fill="black" fill-rule="evenodd"/>
+
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/tv.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m237.917039 64.413845c0-9.2252653-7.280839-16.7597371-16.145202-16.7597371h-143.5076619c-8.8913162 0-16.1755245 7.5344718-16.1755245 16.7597371v90.110532c0 9.218529 7.2842083 16.756369 16.1755245 16.756369h143.5076619c8.864363 0 16.145202-7.53784 16.145202-16.756369zm26.070862 112.508493c.347027 17.780275-6.761982 22.667409-22.50288 21.923056-19.861428-.943072-39.773394-.2324-59.668515-.2324h-3.584827c0 .121252.067384.222296.067384.343548 0 5.530444-3.416368 10.161601-8.163569 11.970278l34.729703 56.607899c2.368547 3.859859 1.165743 8.905294-2.712205 11.246134-3.867841 2.37452-8.894686 1.175471-11.243017-2.684388l-39.436475-64.283831h-7.280839l-37.556461 61.255897c-2.378655 3.856491-7.3987611 5.055539-11.2666016 2.687755-3.8577329-2.35768-5.0639061-7.403116-2.708836-11.259607l34.0558636-55.503156c-2.951418-2.344208-5.003261-5.884096-5.003261-10.036981 0-.134725.064015-.242504.064015-.370493-26.0169545-.07073-45.1472665-.740985-64.1124877.296394-16.711227.879078-21.9402239-6.069342-21.653842-22.839183.8153462-44.310913.7917618-88.6218257.033692-132.9327384-.2931203-16.5138648 4.4945115-23.3275602 21.3775677-23.1052646 61.993262.7544576 124.003369.6332055 186.023585.0505217 15.302902-.1481971 20.723943 5.6011742 20.477991 21.3572132-.636778 45.1563095-.808608 90.3564041.064015 135.5093461z" fill="black" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 300)"/>
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/video.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m272 280h-9.268431c.276116-.74734.440961-1.53597.440961-2.365889v-6.775607c0-3.831666-3.082608-6.920121-6.882294-6.920121h-12.701336c-3.795565 0-6.882294 3.100842-6.882294 6.920121v6.775607c0 .829919.164845 1.626807.432719 2.365889h-172.3623223c.2678738-.74734.4368403-1.53597.4368403-2.365889v-6.775607c0-3.831666-3.0826085-6.920121-6.8864155-6.920121h-12.6930937c-3.803807 0-6.8905366 3.100842-6.8905366 6.920121v6.775607c0 .829919.1689665 1.626807.4368402 2.365889h-11.1806374v-260h11.1806374c-.2678737.74734-.4368402 1.5359695-.4368402 2.3700175v6.7673495c0 3.8399238 3.0826085 6.9242496 6.8905366 6.9242496h12.6930937c3.7955647 0 6.8864155-3.0967127 6.8864155-6.9242496v-6.7673495c0-.8381769-.1689665-1.6309354-.4368403-2.3700175h172.3664433c-.271995.74734-.43684 1.5359695-.43684 2.3700175v6.7673495c0 3.8399238 3.078487 6.9242496 6.882294 6.9242496h12.701336c3.795565 0 6.882294-3.0967127 6.882294-6.9242496v-6.7673495c0-.8381769-.164845-1.6309354-.43684-2.3700175h9.26431zm-206.786157-222.1333969c0-3.8357948-3.0826085-6.9242496-6.8864155-6.9242496h-12.6930937c-3.803807 0-6.8905366 3.1008417-6.8905366 6.9242496v6.7714785c0 3.8399238 3.0826085 6.9283786 6.8905366 6.9283786h12.6930937c3.7955647 0 6.8864155-3.1008417 6.8864155-6.9283786zm0 35.5007147c0-3.8357949-3.0826085-6.9242497-6.8864155-6.9242497h-12.6930937c-3.803807 0-6.8905366 3.1008417-6.8905366 6.9242497v6.7714782c0 3.835795 3.0826085 6.920121 6.8905366 6.920121h12.6930937c3.7955647 0 6.8864155-3.096713 6.8864155-6.920121zm0 35.4965852c0-3.839923-3.0826085-6.924249-6.8864155-6.924249h-12.6930937c-3.803807 0-6.8905366 3.100841-6.8905366 6.924249v6.771479c0 3.839924 3.0826085 6.92425 6.8905366 6.92425h12.6930937c3.7955647 0 6.8864155-3.100842 6.8864155-6.92425zm0 35.500715c0-3.839924-3.0826085-6.92425-6.8864155-6.92425h-12.6930937c-3.803807 0-6.8905366 3.096713-6.8905366 6.92425v6.771479c0 3.839923 3.0826085 6.928378 6.8905366 6.928378h12.6930937c3.7955647 0 6.8864155-3.10497 6.8864155-6.928378zm0 35.496586c0-3.827537-3.0826085-6.92425-6.8864155-6.92425h-12.6930937c-3.803807 0-6.8905366 3.104971-6.8905366 6.92425v6.771478c0 3.839924 3.0826085 6.928379 6.8905366 6.928379h12.6930937c3.7955647 0 6.8864155-3.104971 6.8864155-6.928379zm0 35.500714c0-3.835794-3.0826085-6.924249-6.8864155-6.924249h-12.6930937c-3.803807 0-6.8905366 3.10497-6.8905366 6.924249v6.771479c0 3.835795 3.0826085 6.928378 6.8905366 6.928378h12.6930937c3.7955647 0 6.8864155-3.10497 6.8864155-6.928378zm155.247251-186.2734632c0-5.8672383-4.805242-10.6692075-10.673738-10.6692075h-119.5788334c-5.8684952 0-10.6737379 4.8019692-10.6737379 10.6692075v74.7009692c0 5.867238 4.8052427 10.665078 10.6737379 10.665078h119.5788334c5.868496 0 10.673738-4.79784 10.673738-10.665078zm.366781 121.3663652c0-5.90027-4.83409-10.727013-10.731434-10.727013h-120.1970034c-5.8973433 0-10.7273127 4.826743-10.7273127 10.727013v75.084961c0 5.896141 4.8299694 10.718755 10.7273127 10.718755h120.1970034c5.897344 0 10.731434-4.822614 10.731434-10.718755zm42.344655-112.5882169c0-3.8357948-3.082608-6.9242496-6.882294-6.9242496h-12.701336c-3.795565 0-6.882294 3.1008417-6.882294 6.9242496v6.7714785c0 3.8399238 3.078487 6.9283786 6.882294 6.9283786h12.701336c3.795565 0 6.882294-3.1008417 6.882294-6.9283786zm0 35.5007147c0-3.8357949-3.082608-6.9242497-6.882294-6.9242497h-12.701336c-3.795565 0-6.882294 3.1008417-6.882294 6.9242497v6.7714782c0 3.835795 3.078487 6.920121 6.882294 6.920121h12.701336c3.795565 0 6.882294-3.096713 6.882294-6.920121zm0 35.4965852c0-3.839923-3.082608-6.924249-6.882294-6.924249h-12.701336c-3.795565 0-6.882294 3.100841-6.882294 6.924249v6.771479c0 3.839924 3.078487 6.92425 6.882294 6.92425h12.701336c3.795565 0 6.882294-3.100842 6.882294-6.92425zm0 35.500715c0-3.839924-3.082608-6.92425-6.882294-6.92425h-12.701336c-3.795565 0-6.882294 3.096713-6.882294 6.92425v6.771479c0 3.839923 3.078487 6.928378 6.882294 6.928378h12.701336c3.795565 0 6.882294-3.10497 6.882294-6.928378zm0 35.496586c0-3.827537-3.082608-6.92425-6.882294-6.92425h-12.701336c-3.795565 0-6.882294 3.104971-6.882294 6.92425v6.771478c0 3.839924 3.078487 6.928379 6.882294 6.928379h12.701336c3.795565 0 6.882294-3.104971 6.882294-6.928379zm0 35.500714c0-3.835794-3.082608-6.924249-6.882294-6.924249h-12.701336c-3.795565 0-6.882294 3.10497-6.882294 6.924249v6.771479c0 3.835795 3.078487 6.928378 6.882294 6.928378h12.701336c3.795565 0 6.882294-3.10497 6.882294-6.928378z" fill="black" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 300)"/>
+
+
+</svg>

package/dist/src/elements/ia-status-indicator/icons/web.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 72 300 228"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m261.437982 261.890554h-28.778763v-28.083112h28.778763zm-42.442013 0h-28.793735v-28.083112h28.793735zm40.645399-150.356298v75.703472 19.821613h-219.2617757v-19.821613-75.703472zm-84.228262 150.356298h-134.608315v-27.499419h134.608315zm-155.413106-169.890554v87.643734 100.356266h260v-100.356266-87.643734z" fill="black" transform="matrix(1 0 0 -1 0 372)"/>
+
+
+</svg>

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

@@ -1,31 +1,9 @@
-export * from './ia-audio-element/ia-audio-element.js';
-export * from './ia-audio-element/models.js';
 export * from './ia-button/ia-button.js';
 export * from './ia-combo-box/ia-combo-box.js';
 export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
-export * from './ia-expandable-search-bar/ia-expandable-search-bar.js';
-export * from './ia-expandable-search-bar/ia-quick-search.js';
-export * from './ia-expandable-search-bar/models.js';
-export * from './ia-playback-controls/ia-playback-controls.js';
-export * from './ia-playback-controls/models.js';
-export * from './ia-radio-player/ia-radio-player.js';
-export * from './ia-radio-player/ia-search-results-switcher.js';
-export * from './ia-radio-player/models.js';
-export * from './ia-radio-player/search/backends/full-text-search-backend.js';
-export * from './ia-radio-player/search/backends/full-text-search-response.js';
-export * from './ia-radio-player/search/backends/local-search-backend.js';
-export * from './ia-radio-player/search/backends/search-backend.js';
-export * from './ia-radio-player/search/models.js';
-export * from './ia-radio-player/search/search-handler.js';
-export * from './ia-radio-player/search/search-helper.js';
-export * from './ia-radio-player/search/transcript-index.js';
-export * from './ia-scrubber-bar/ia-scrubber-bar.js';
-export * from './ia-scrubber-bar/ia-section-marker.js';
-export * from './ia-scrubber-bar/models.js';
-export * from './ia-transcript-view/duration-formatter.js';
-export * from './ia-transcript-view/ia-transcript-entry.js';
-export * from './ia-transcript-view/ia-transcript-view.js';
-export * from './ia-transcript-view/models.js';
-export * from './ia-waveform-progress/ia-waveform-progress.js';
-export * from './ia-waveform-progress/models.js';
+export * from './ia-image-viewer/ia-image-viewer.js';
+export * from './ia-item-navigator/ia-item-navigator.js';
+export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
+export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
+export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
 //# 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,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC"}

package/dist/src/elements/index.js

@@ -1,31 +1,9 @@
-export * from './ia-audio-element/ia-audio-element.js';
-export * from './ia-audio-element/models.js';
 export * from './ia-button/ia-button.js';
 export * from './ia-combo-box/ia-combo-box.js';
 export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
-export * from './ia-expandable-search-bar/ia-expandable-search-bar.js';
-export * from './ia-expandable-search-bar/ia-quick-search.js';
-export * from './ia-expandable-search-bar/models.js';
-export * from './ia-playback-controls/ia-playback-controls.js';
-export * from './ia-playback-controls/models.js';
-export * from './ia-radio-player/ia-radio-player.js';
-export * from './ia-radio-player/ia-search-results-switcher.js';
-export * from './ia-radio-player/models.js';
-export * from './ia-radio-player/search/backends/full-text-search-backend.js';
-export * from './ia-radio-player/search/backends/full-text-search-response.js';
-export * from './ia-radio-player/search/backends/local-search-backend.js';
-export * from './ia-radio-player/search/backends/search-backend.js';
-export * from './ia-radio-player/search/models.js';
-export * from './ia-radio-player/search/search-handler.js';
-export * from './ia-radio-player/search/search-helper.js';
-export * from './ia-radio-player/search/transcript-index.js';
-export * from './ia-scrubber-bar/ia-scrubber-bar.js';
-export * from './ia-scrubber-bar/ia-section-marker.js';
-export * from './ia-scrubber-bar/models.js';
-export * from './ia-transcript-view/duration-formatter.js';
-export * from './ia-transcript-view/ia-transcript-entry.js';
-export * from './ia-transcript-view/ia-transcript-view.js';
-export * from './ia-transcript-view/models.js';
-export * from './ia-waveform-progress/ia-waveform-progress.js';
-export * from './ia-waveform-progress/models.js';
+export * from './ia-image-viewer/ia-image-viewer.js';
+export * from './ia-item-navigator/ia-item-navigator.js';
+export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
+export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
+export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
 //# 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,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './ia-audio-element/ia-audio-element';\nexport * from './ia-audio-element/models';\nexport * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\nexport * from './ia-expandable-search-bar/ia-expandable-search-bar';\nexport * from './ia-expandable-search-bar/ia-quick-search';\nexport * from './ia-expandable-search-bar/models';\nexport * from './ia-playback-controls/ia-playback-controls';\nexport * from './ia-playback-controls/models';\nexport * from './ia-radio-player/ia-radio-player';\nexport * from './ia-radio-player/ia-search-results-switcher';\nexport * from './ia-radio-player/models';\nexport * from './ia-radio-player/search/backends/full-text-search-backend';\nexport * from './ia-radio-player/search/backends/full-text-search-response';\nexport * from './ia-radio-player/search/backends/local-search-backend';\nexport * from './ia-radio-player/search/backends/search-backend';\nexport * from './ia-radio-player/search/models';\nexport * from './ia-radio-player/search/search-handler';\nexport * from './ia-radio-player/search/search-helper';\nexport * from './ia-radio-player/search/transcript-index';\nexport * from './ia-scrubber-bar/ia-scrubber-bar';\nexport * from './ia-scrubber-bar/ia-section-marker';\nexport * from './ia-scrubber-bar/models';\nexport * from './ia-transcript-view/duration-formatter';\nexport * from './ia-transcript-view/ia-transcript-entry';\nexport * from './ia-transcript-view/ia-transcript-view';\nexport * from './ia-transcript-view/models';\nexport * from './ia-waveform-progress/ia-waveform-progress';\nexport * from './ia-waveform-progress/models';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\nexport * from './ia-image-viewer/ia-image-viewer';\nexport * from './ia-item-navigator/ia-item-navigator';\nexport * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel';\nexport * from './ia-item-navigator/menus/ia-itemnav-sort-files-button';\nexport * from './ia-item-navigator/menus/ia-itemnav-share-panel';\n"]}

package/dist/src/util/masked-icon.d.ts

@@ -0,0 +1,24 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Renders an icon from a standalone `.svg` file as a CSS-masked element.
+ *
+ * The glyphs live as `.svg` assets rather than inline templates so their path
+ * data stays out of the JS bundle. They are drawn with `mask-image` (not
+ * `<img>`) so host components can still recolor them: the mask supplies the
+ * shape and `background-color` supplies the paint, which keeps the
+ * `--item-navigator-icon-color` theming working.
+ *
+ * The mask geometry is set inline so an icon renders correctly wherever it is
+ * slotted — including inside a consumer's shadow DOM, for the icons this
+ * package exports publicly. Hosts only supply `background-color` and a size,
+ * both of which legitimately vary per host. Icons are decorative (always
+ * labelled by adjacent text or an `aria-label` on the control), so the span is
+ * `aria-hidden`.
+ *
+ * The `url()` is quoted deliberately: bundlers inline small SVGs as `data:`
+ * URIs whose markup contains apostrophes, and an *unquoted* CSS `url()` token
+ * cannot contain them — the whole `mask-image` declaration would be dropped
+ * and the glyph would paint as a solid block.
+ */
+export declare const maskedIcon: (url: string) => TemplateResult;
+//# sourceMappingURL=masked-icon.d.ts.map

package/dist/src/util/masked-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masked-icon.d.ts","sourceRoot":"","sources":["../../../src/util/masked-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,KAAG,cAMxC,CAAC"}

package/dist/src/util/masked-icon.js

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+/**
+ * Renders an icon from a standalone `.svg` file as a CSS-masked element.
+ *
+ * The glyphs live as `.svg` assets rather than inline templates so their path
+ * data stays out of the JS bundle. They are drawn with `mask-image` (not
+ * `<img>`) so host components can still recolor them: the mask supplies the
+ * shape and `background-color` supplies the paint, which keeps the
+ * `--item-navigator-icon-color` theming working.
+ *
+ * The mask geometry is set inline so an icon renders correctly wherever it is
+ * slotted — including inside a consumer's shadow DOM, for the icons this
+ * package exports publicly. Hosts only supply `background-color` and a size,
+ * both of which legitimately vary per host. Icons are decorative (always
+ * labelled by adjacent text or an `aria-label` on the control), so the span is
+ * `aria-hidden`.
+ *
+ * The `url()` is quoted deliberately: bundlers inline small SVGs as `data:`
+ * URIs whose markup contains apostrophes, and an *unquoted* CSS `url()` token
+ * cannot contain them — the whole `mask-image` declaration would be dropped
+ * and the glyph would paint as a solid block.
+ */
+export const maskedIcon = (url) => html `
+  <span
+    class="ia-icon"
+    aria-hidden="true"
+    style='-webkit-mask-image:url("${url}");mask-image:url("${url}");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;display:inline-block'
+  ></span>
+`;
+//# sourceMappingURL=masked-icon.js.map

package/dist/src/util/masked-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masked-icon.js","sourceRoot":"","sources":["../../../src/util/masked-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAkB,EAAE,CAAC,IAAI,CAAA;;;;qCAI1B,GAAG,sBAAsB,GAAG;;CAEhE,CAAC","sourcesContent":["import { html, type TemplateResult } from 'lit';\n\n/**\n * Renders an icon from a standalone `.svg` file as a CSS-masked element.\n *\n * The glyphs live as `.svg` assets rather than inline templates so their path\n * data stays out of the JS bundle. They are drawn with `mask-image` (not\n * `<img>`) so host components can still recolor them: the mask supplies the\n * shape and `background-color` supplies the paint, which keeps the\n * `--item-navigator-icon-color` theming working.\n *\n * The mask geometry is set inline so an icon renders correctly wherever it is\n * slotted — including inside a consumer's shadow DOM, for the icons this\n * package exports publicly. Hosts only supply `background-color` and a size,\n * both of which legitimately vary per host. Icons are decorative (always\n * labelled by adjacent text or an `aria-label` on the control), so the span is\n * `aria-hidden`.\n *\n * The `url()` is quoted deliberately: bundlers inline small SVGs as `data:`\n * URIs whose markup contains apostrophes, and an *unquoted* CSS `url()` token\n * cannot contain them — the whole `mask-image` declaration would be dropped\n * and the glyph would paint as a solid block.\n */\nexport const maskedIcon = (url: string): TemplateResult => html`\n  <span\n    class=\"ia-icon\"\n    aria-hidden=\"true\"\n    style='-webkit-mask-image:url(\"${url}\");mask-image:url(\"${url}\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;display:inline-block'\n  ></span>\n`;\n"]}

package/dist/src/util/prefers-reduced-motion.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether the user has asked the system for reduced motion.
+ *
+ * Read at the moment an animation would start rather than cached, so changing
+ * the system setting takes effect without a reload. CSS handles the purely
+ * decorative animations on its own; this is for the places where JavaScript
+ * schedules or waits on one.
+ */
+export declare function prefersReducedMotion(): boolean;
+//# sourceMappingURL=prefers-reduced-motion.d.ts.map

package/dist/src/util/prefers-reduced-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefers-reduced-motion.d.ts","sourceRoot":"","sources":["../../../src/util/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAI9C"}

package/dist/src/util/prefers-reduced-motion.js

@@ -0,0 +1,12 @@
+/**
+ * Whether the user has asked the system for reduced motion.
+ *
+ * Read at the moment an animation would start rather than cached, so changing
+ * the system setting takes effect without a reload. CSS handles the purely
+ * decorative animations on its own; this is for the places where JavaScript
+ * schedules or waits on one.
+ */
+export function prefersReducedMotion() {
+    return (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
+}
+//# sourceMappingURL=prefers-reduced-motion.js.map

package/dist/src/util/prefers-reduced-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefers-reduced-motion.js","sourceRoot":"","sources":["../../../src/util/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO,CACL,MAAM,CAAC,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO,IAAI,KAAK,CACzE,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Whether the user has asked the system for reduced motion.\n *\n * Read at the moment an animation would start rather than cached, so changing\n * the system setting takes effect without a reload. CSS handles the purely\n * decorative animations on its own; this is for the places where JavaScript\n * schedules or waits on one.\n */\nexport function prefersReducedMotion(): boolean {\n  return (\n    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false\n  );\n}\n"]}