@internetarchive/elements 1.1.3-l10n-demo.0 → 1.1.3-webdev-9107.0

package/dist/src/elements/ia-reviews/utils/sanitize-review-body.js

@@ -0,0 +1,29 @@
+import DOMPurify from 'dompurify';
+const ALLOWED_TAGS = ['a'];
+/**
+ * Uses DOMpurify to sanitize a given review body.
+ * Currently only allows a tags.
+ *
+ * @param {string} reviewBody The review to be sanitized
+ * @returns {string} The sanitized review
+ */
+export default function sanitizeReviewBody(reviewBody) {
+    // DOMPurify is a shared singleton, so the hook is added around this one call
+    // and taken off again. Leaving it registered would stack up another copy per
+    // review and force these attributes onto every other caller's anchors too.
+    DOMPurify.addHook('afterSanitizeAttributes', forceExternalLinkAttributes);
+    try {
+        return DOMPurify.sanitize(reviewBody, { ALLOWED_TAGS: ALLOWED_TAGS });
+    }
+    finally {
+        DOMPurify.removeHook('afterSanitizeAttributes');
+    }
+}
+/** Marks links as untrusted user content and opens them away from the page. */
+function forceExternalLinkAttributes(node) {
+    if (node.nodeName.toLowerCase() !== 'a')
+        return;
+    node.setAttribute('rel', 'ugc nofollow');
+    node.setAttribute('target', '_blank');
+}
+//# sourceMappingURL=sanitize-review-body.js.map

package/dist/src/elements/ia-reviews/utils/sanitize-review-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize-review-body.js","sourceRoot":"","sources":["../../../../../src/elements/ia-reviews/utils/sanitize-review-body.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3B;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,UAAkB;IAC3D,6EAA6E;IAC7E,6EAA6E;IAC7E,2EAA2E;IAC3E,SAAS,CAAC,OAAO,CAAC,yBAAyB,EAAE,2BAA2B,CAAC,CAAC;IAC1E,IAAI,CAAC;QACH,OAAO,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC,CAAC;IACxE,CAAC;YAAS,CAAC;QACT,SAAS,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAClD,CAAC;AACH,CAAC;AAED,+EAA+E;AAC/E,SAAS,2BAA2B,CAAC,IAAU;IAC7C,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,GAAG;QAAE,OAAO;IAC/C,IAAgB,CAAC,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;IACrD,IAAgB,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACrD,CAAC","sourcesContent":["import DOMPurify from 'dompurify';\n\nconst ALLOWED_TAGS = ['a'];\n\n/**\n * Uses DOMpurify to sanitize a given review body.\n * Currently only allows a tags.\n *\n * @param {string} reviewBody The review to be sanitized\n * @returns {string} The sanitized review\n */\nexport default function sanitizeReviewBody(reviewBody: string): string {\n  // DOMPurify is a shared singleton, so the hook is added around this one call\n  // and taken off again. Leaving it registered would stack up another copy per\n  // review and force these attributes onto every other caller's anchors too.\n  DOMPurify.addHook('afterSanitizeAttributes', forceExternalLinkAttributes);\n  try {\n    return DOMPurify.sanitize(reviewBody, { ALLOWED_TAGS: ALLOWED_TAGS });\n  } finally {\n    DOMPurify.removeHook('afterSanitizeAttributes');\n  }\n}\n\n/** Marks links as untrusted user content and opens them away from the page. */\nfunction forceExternalLinkAttributes(node: Node): void {\n  if (node.nodeName.toLowerCase() !== 'a') return;\n  (node as Element).setAttribute('rel', 'ugc nofollow');\n  (node as Element).setAttribute('target', '_blank');\n}\n"]}

package/dist/src/elements/ia-reviews/utils/truncate-screenname.d.ts

@@ -0,0 +1,13 @@
+import { HTMLTemplateResult } from 'lit';
+/**
+ * Truncates screenname as needed to ensure we only display the correct
+ * number of chars throughout site. Must be kept in sync with screenname
+ * limit in Account.inc.
+ *
+ * Adds a title tooltip with full screenname if truncated.
+ *
+ * @param {string} screenname Screenname to be truncated
+ * @returns {HTMLTemplateResult} String or HTML to be displayed
+ */
+export declare function truncateScreenname(screenname?: string): HTMLTemplateResult | string;
+//# sourceMappingURL=truncate-screenname.d.ts.map

package/dist/src/elements/ia-reviews/utils/truncate-screenname.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncate-screenname.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-reviews/utils/truncate-screenname.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,GAAE,MAAW,GACtB,kBAAkB,GAAG,MAAM,CAQ7B"}

package/dist/src/elements/ia-reviews/utils/truncate-screenname.js

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+/**
+ * Truncates screenname as needed to ensure we only display the correct
+ * number of chars throughout site. Must be kept in sync with screenname
+ * limit in Account.inc.
+ *
+ * Adds a title tooltip with full screenname if truncated.
+ *
+ * @param {string} screenname Screenname to be truncated
+ * @returns {HTMLTemplateResult} String or HTML to be displayed
+ */
+export function truncateScreenname(screenname = '') {
+    const SCREENNAME_MAX_LENGTH = 40;
+    if (screenname.length <= SCREENNAME_MAX_LENGTH)
+        return screenname;
+    const truncatedScreenname = screenname.substring(0, SCREENNAME_MAX_LENGTH) + '...';
+    return html `<span title="${screenname}">${truncatedScreenname}</span>`;
+}
+//# sourceMappingURL=truncate-screenname.js.map

package/dist/src/elements/ia-reviews/utils/truncate-screenname.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncate-screenname.js","sourceRoot":"","sources":["../../../../../src/elements/ia-reviews/utils/truncate-screenname.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EAAE;IAEvB,MAAM,qBAAqB,GAAG,EAAE,CAAC;IAEjC,IAAI,UAAU,CAAC,MAAM,IAAI,qBAAqB;QAAE,OAAO,UAAU,CAAC;IAElE,MAAM,mBAAmB,GACvB,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC;IACzD,OAAO,IAAI,CAAA,gBAAgB,UAAU,KAAK,mBAAmB,SAAS,CAAC;AACzE,CAAC","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\n\n/**\n * Truncates screenname as needed to ensure we only display the correct\n * number of chars throughout site. Must be kept in sync with screenname\n * limit in Account.inc.\n *\n * Adds a title tooltip with full screenname if truncated.\n *\n * @param {string} screenname Screenname to be truncated\n * @returns {HTMLTemplateResult} String or HTML to be displayed\n */\nexport function truncateScreenname(\n  screenname: string = '',\n): HTMLTemplateResult | string {\n  const SCREENNAME_MAX_LENGTH = 40;\n\n  if (screenname.length <= SCREENNAME_MAX_LENGTH) return screenname;\n\n  const truncatedScreenname =\n    screenname.substring(0, SCREENNAME_MAX_LENGTH) + '...';\n  return html`<span title=\"${screenname}\">${truncatedScreenname}</span>`;\n}\n"]}

package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.d.ts

@@ -17,8 +17,8 @@ export declare class IAScrubberBar extends LitElement {
     sectionMarkerPercentages: number[];
     /** Whether the markers either side of the playhead point towards it */
     expandSectionMarkers: boolean;
-    /** The accessible name for the slider. Defaults to "Playback position". */
-    label?: string;
+    /** The accessible name for the slider */
+    label: string;
     /**
      * The position actually shown.
      *

package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-scrubber-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-scrubber-bar/ia-scrubber-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,qBAAqB,CAAC;AAuC7B;;;GAGG;AACH,qBAEa,aAAc,SAAQ,UAAU;IAC3C,2CAA2C;IACf,KAAK,SAAK;IAEtC,iDAAiD;IACrB,GAAG,SAAK;IAEpC,kDAAkD;IACtB,GAAG,SAAO;IAEtC,2CAA2C;IACf,IAAI,SAAO;IAEvC,oEAAoE;IACzC,wBAAwB,EAAE,MAAM,EAAE,CAAM;IAEnE,uEAAuE;IAC1C,oBAAoB,UAAS;IAE1D,2EAA2E;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C;;;;;;OAMG;IACM,OAAO,CAAC,YAAY,CAAK;IAElC,OAAO,CAAC,iBAAiB,CAAS;IAElC,+DAA+D;IAC/D,IAAI,UAAU,IAAI,MAAM,CAKvB;IAED,MAAM,IAAI,cAAc;IA0CxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;OAKG;IACH,OAAO,KAAK,kBAAkB,GAS7B;IAED;;;;;;OAMG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,kBAAkB;IAK1B;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,WAAW;IAMnB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAMlB;;;;;;OAMG;IACH,OAAO,CAAC,gBAAgB;IAKxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiKlC;CACF"}
+{"version":3,"file":"ia-scrubber-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-scrubber-bar/ia-scrubber-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,qBAAqB,CAAC;AAuC7B;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,2CAA2C;IACf,KAAK,SAAK;IAEtC,iDAAiD;IACrB,GAAG,SAAK;IAEpC,kDAAkD;IACtB,GAAG,SAAO;IAEtC,2CAA2C;IACf,IAAI,SAAO;IAEvC,oEAAoE;IACzC,wBAAwB,EAAE,MAAM,EAAE,CAAM;IAEnE,uEAAuE;IAC1C,oBAAoB,UAAS;IAE1D,yCAAyC;IACb,KAAK,SAA4B;IAE7D;;;;;;OAMG;IACM,OAAO,CAAC,YAAY,CAAK;IAElC,OAAO,CAAC,iBAAiB,CAAS;IAElC,+DAA+D;IAC/D,IAAI,UAAU,IAAI,MAAM,CAKvB;IAED,MAAM,IAAI,cAAc;IA0CxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;OAKG;IACH,OAAO,KAAK,kBAAkB,GAS7B;IAED;;;;;;OAMG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,kBAAkB;IAK1B;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,WAAW;IAMnB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAMlB;;;;;;OAMG;IACH,OAAO,CAAC,gBAAgB;IAKxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiKlC;CACF"}

package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { localized, msg } from '@lit/localize';
+import { msg } from '@lit/localize';
 import { SectionMarkerMode } from './models.js';
 import './ia-section-marker.js';
 /**
@@ -48,6 +48,8 @@ let IAScrubberBar = class IAScrubberBar extends LitElement {
         this.sectionMarkerPercentages = [];
         /** Whether the markers either side of the playhead point towards it */
         this.expandSectionMarkers = false;
+        /** The accessible name for the slider */
+        this.label = msg('Playback position');
         /**
          * The position actually shown.
          *
@@ -84,7 +86,7 @@ let IAScrubberBar = class IAScrubberBar extends LitElement {
         <input
           id="slider"
           type="range"
-          aria-label=${this.label ?? msg('Playback position')}
+          aria-label=${this.label}
           min=${this.min}
           max=${this.max}
           step=${this.step}
@@ -380,8 +382,7 @@ __decorate([
     state()
 ], IAScrubberBar.prototype, "currentValue", void 0);
 IAScrubberBar = __decorate([
-    customElement('ia-scrubber-bar'),
-    localized()
+    customElement('ia-scrubber-bar')
 ], IAScrubberBar);
 export { IAScrubberBar };
 //# sourceMappingURL=ia-scrubber-bar.js.map

package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-scrubber-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-scrubber-bar/ia-scrubber-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg } from '@lit/localize';\n\nimport { SectionMarkerMode } from './models';\n\nimport './ia-section-marker';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  ValueChange: 'valuechange',\n  UserInteractionStarted: 'userInteractionStarted',\n  UserInteractionEnded: 'userInteractionEnded',\n};\n\n/**\n * The keys that move a range input.\n *\n * Only these count as scrubbing. Tab in particular must not, since it takes\n * focus away and its keyup lands on whatever it moved to, never here.\n */\nconst VALUE_KEYS = new Set([\n  'ArrowLeft',\n  'ArrowRight',\n  'ArrowUp',\n  'ArrowDown',\n  'Home',\n  'End',\n  'PageUp',\n  'PageDown',\n]);\n\n/**\n * The section boundaries either side of the playhead.\n *\n * `undefined` where there is no boundary on that side, which is the case at\n * the very start and the very end of the track.\n */\ninterface SurroundingMarkers {\n  lower?: number;\n  upper?: number;\n}\n\n/**\n * A range slider styled as a playback scrubber, with optional section markers\n * laid over the track.\n */\n@customElement('ia-scrubber-bar')\n@localized()\nexport class IAScrubberBar extends LitElement {\n  /** The current position along the track */\n  @property({ type: Number }) value = 0;\n\n  /** The lowest position the scrubber can reach */\n  @property({ type: Number }) min = 0;\n\n  /** The highest position the scrubber can reach */\n  @property({ type: Number }) max = 100;\n\n  /** How finely the scrubber can be moved */\n  @property({ type: Number }) step = 0.1;\n\n  /** Where to draw section boundaries, as percentages of the track */\n  @property({ type: Array }) sectionMarkerPercentages: number[] = [];\n\n  /** Whether the markers either side of the playhead point towards it */\n  @property({ type: Boolean }) expandSectionMarkers = false;\n\n  /** The accessible name for the slider. Defaults to \"Playback position\". */\n  @property({ type: String }) label?: string;\n\n  /**\n   * The position actually shown.\n   *\n   * `value` is driven from outside by whatever is playing the audio, but while\n   * the listener is scrubbing their position wins. Keeping the two apart is\n   * what stops playback updates fighting the drag.\n   */\n  @state() private currentValue = 0;\n\n  private userIsInteracting = false;\n\n  /** How far along the track the playhead is, as a percentage */\n  get percentage(): number {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n\n    return ((this.currentValue - this.min) / range) * 100;\n  }\n\n  render(): TemplateResult {\n    const surrounding = this.surroundingMarkers;\n\n    return html`\n      <div class=\"container\" style=\"--fill-percent--: ${this.percentage}%\">\n        <div class=\"color-fill\"></div>\n\n        <div class=\"marker-container\">\n          ${this.sectionMarkerPercentages.map(\n            (markerPercent) => html`\n              <ia-section-marker\n                data-location=${markerPercent}\n                style=\"left: ${markerPercent}%\"\n                .markerMode=${this.markerModeFor(markerPercent, surrounding)}\n              ></ia-section-marker>\n            `,\n          )}\n        </div>\n\n        <input\n          id=\"slider\"\n          type=\"range\"\n          aria-label=${this.label ?? msg('Playback position')}\n          min=${this.min}\n          max=${this.max}\n          step=${this.step}\n          .value=${String(this.currentValue)}\n          @mousedown=${this.interactionStarted}\n          @mouseup=${this.interactionEnded}\n          @touchstart=${this.interactionStarted}\n          @touchend=${this.interactionEnded}\n          @touchcancel=${this.interactionEnded}\n          @keydown=${this.handleKeyDown}\n          @keyup=${this.handleKeyUp}\n          @blur=${this.handleBlur}\n          @input=${this.handleSlide}\n          @change=${this.handleSlide}\n        />\n      </div>\n    `;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (this.userIsInteracting || !changedProperties.has('value')) return;\n\n    this.currentValue = this.value;\n  }\n\n  /**\n   * The section boundaries immediately below and above the playhead.\n   *\n   * Returns nothing when the markers aren't meant to react to the playhead, so\n   * every marker falls back to its resting state.\n   */\n  private get surroundingMarkers(): SurroundingMarkers {\n    if (!this.expandSectionMarkers) return {};\n\n    const sorted = this.sortedMarkers;\n\n    return {\n      lower: sorted.filter((percent) => percent <= this.currentValue).pop(),\n      upper: sorted.find((percent) => percent > this.currentValue),\n    };\n  }\n\n  /**\n   * The marker percentages in ascending numeric order.\n   *\n   * Sorted on a copy with an explicit comparator: the default `sort()` orders\n   * lexicographically, which puts 100 before 9, and it sorts in place, which\n   * would reorder the caller's own array.\n   */\n  private get sortedMarkers(): number[] {\n    return [...this.sectionMarkerPercentages].sort((a, b) => a - b);\n  }\n\n  private markerModeFor(\n    markerPercent: number,\n    surrounding: SurroundingMarkers,\n  ): SectionMarkerMode {\n    if (markerPercent === surrounding.upper) return SectionMarkerMode.left;\n    if (markerPercent === surrounding.lower) return SectionMarkerMode.right;\n\n    return SectionMarkerMode.neither;\n  }\n\n  private handleSlide(e: Event): void {\n    this.currentValue = parseFloat((e.target as HTMLInputElement).value);\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number }>(Events.ValueChange, {\n        detail: { value: this.currentValue },\n      }),\n    );\n  }\n\n  private interactionStarted(): void {\n    this.userIsInteracting = true;\n    this.dispatchEvent(new Event(Events.UserInteractionStarted));\n  }\n\n  /**\n   * Starts an interaction when the slider is scrubbed from the keyboard.\n   *\n   * Without this, arrowing along the bar sets the value but leaves\n   * `userIsInteracting` false, so the next playback tick snaps the thumb back\n   * to the playhead mid-scrub.\n   *\n   * Guarded against the auto-repeat that holding a key produces, which would\n   * otherwise emit a fresh `userInteractionStarted` on every repeat.\n   */\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (!VALUE_KEYS.has(e.key) || this.userIsInteracting) return;\n\n    this.interactionStarted();\n  }\n\n  private handleKeyUp(e: KeyboardEvent): void {\n    if (!VALUE_KEYS.has(e.key)) return;\n\n    this.interactionEnded();\n  }\n\n  /**\n   * Releases an interaction that focus left behind.\n   *\n   * A keyup can go missing, e.g. focus moves while the key is still down, and\n   * an interaction left latched on would ignore playback updates for good.\n   */\n  private handleBlur(): void {\n    if (!this.userIsInteracting) return;\n\n    this.interactionEnded();\n  }\n\n  /**\n   * Ends the interaction.\n   *\n   * Bound to `touchcancel` as well as `touchend`, because a touch the system\n   * takes over never delivers `touchend`, and an interaction left latched on\n   * would ignore playback updates from then on.\n   */\n  private interactionEnded(): void {\n    this.userIsInteracting = false;\n    this.dispatchEvent(new Event(Events.UserInteractionEnded));\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --scrubber-bar-height--: var(--ia-theme-scrubber-bar-height, 20px);\n        --scrubber-marker-inset--: var(--ia-theme-scrubber-marker-inset, 10px);\n\n        --scrubber-thumb-color--: var(--ia-theme-scrubber-thumb-color, #fff);\n        --scrubber-thumb-diameter--: var(\n          --ia-theme-scrubber-thumb-diameter,\n          20px\n        );\n        --scrubber-thumb-border--: var(\n          --ia-theme-scrubber-thumb-border,\n          1px solid #000\n        );\n        --scrubber-thumb-border-radius--: var(\n          --ia-theme-scrubber-thumb-border-radius,\n          50%\n        );\n        /*\n          Centres the thumb on the track. The thumb is content-box, so its\n          border adds 1px above and below the diameter, hence the extra -1px.\n          Comes out at -6px for the default track and thumb sizes.\n        */\n        --scrubber-thumb-top-margin--: var(\n          --ia-theme-scrubber-thumb-top-margin,\n          calc(\n            (\n                var(--scrubber-track-height--) - var(\n                    --scrubber-thumb-diameter--\n                  )\n              ) /\n              2 - 1px\n          )\n        );\n\n        --scrubber-track-height--: var(--ia-theme-scrubber-track-height, 10px);\n        --scrubber-track-border--: var(\n          --ia-theme-scrubber-track-border,\n          1px solid #fff\n        );\n        --scrubber-track-border-radius--: var(\n          --ia-theme-scrubber-track-border-radius,\n          5px\n        );\n        --scrubber-track-color--: var(\n          --ia-theme-scrubber-track-color,\n          rgba(0, 0, 0, 0.1)\n        );\n        --scrubber-track-fill-color--: var(\n          --ia-theme-scrubber-track-fill-color,\n          #3272b6\n        );\n\n        /*\n          How far off the bottom the track sits. The fill and the section\n          markers both line up against this, so they follow the track when its\n          height is themed. Comes out at 7px for the default sizes.\n        */\n        --scrubber-track-offset--: calc(\n          (var(--scrubber-bar-height--) - var(--scrubber-track-height--)) / 2 +\n            2px\n        );\n      }\n\n      .container {\n        position: relative;\n        height: var(--scrubber-bar-height--);\n      }\n\n      /*\n        The fill is a plain element rather than a track pseudo-element, so the\n        played portion is just a hard gradient stop driven by a custom property.\n      */\n      .color-fill {\n        height: var(--scrubber-track-height--);\n        border-radius: 1em;\n        position: absolute;\n        bottom: var(--scrubber-track-offset--);\n        left: 2px;\n        right: -2px;\n        background: linear-gradient(\n          to right,\n          var(--scrubber-track-fill-color--) 0%,\n          var(--scrubber-track-fill-color--) var(--fill-percent--),\n          var(--scrubber-track-color--) var(--fill-percent--),\n          var(--scrubber-track-color--) 100%\n        );\n      }\n\n      .marker-container {\n        position: absolute;\n        left: var(--scrubber-marker-inset--);\n        right: var(--scrubber-marker-inset--);\n        height: 100%;\n      }\n\n      ia-section-marker {\n        position: absolute;\n        width: 2rem;\n        height: var(--scrubber-track-height--);\n        bottom: var(--scrubber-track-offset--);\n        /*\n          The left offset puts the marker where it belongs, but the divider runs\n          down the middle of the marker, so it shifts back by half its own width\n          to line the divider up with that point.\n        */\n        transform: translateX(-50%);\n      }\n\n      input[type='range'] {\n        -webkit-appearance: none;\n        appearance: none;\n        height: var(--scrubber-bar-height--);\n        padding: 0;\n        width: 100%;\n        background: none;\n        outline: none;\n        position: absolute;\n        bottom: 0;\n      }\n\n      input[type='range']::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        box-sizing: content-box;\n        margin-top: var(--scrubber-thumb-top-margin--);\n        background-color: var(--scrubber-thumb-color--);\n        height: var(--scrubber-thumb-diameter--);\n        width: var(--scrubber-thumb-diameter--);\n        border-radius: var(--scrubber-thumb-border-radius--);\n        border: var(--scrubber-thumb-border--);\n        cursor: pointer;\n      }\n\n      input[type='range']::-moz-range-thumb {\n        background-color: var(--scrubber-thumb-color--);\n        height: var(--scrubber-thumb-diameter--);\n        width: var(--scrubber-thumb-diameter--);\n        border-radius: var(--scrubber-thumb-border-radius--);\n        border: var(--scrubber-thumb-border--);\n        cursor: pointer;\n      }\n\n      input[type='range']::-webkit-slider-runnable-track {\n        border: var(--scrubber-track-border--);\n        height: var(--scrubber-track-height--);\n        border-radius: var(--scrubber-track-border-radius--);\n      }\n\n      input[type='range']::-moz-range-track {\n        border: var(--scrubber-track-border--);\n        height: var(--scrubber-track-height--);\n        border-radius: var(--scrubber-track-border-radius--);\n      }\n\n      input[type='range']::-moz-range-progress {\n        height: var(--scrubber-track-height--);\n        border-radius: var(--scrubber-track-border-radius--);\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-scrubber-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-scrubber-bar/ia-scrubber-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\n\nimport { SectionMarkerMode } from './models';\n\nimport './ia-section-marker';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  ValueChange: 'valuechange',\n  UserInteractionStarted: 'userInteractionStarted',\n  UserInteractionEnded: 'userInteractionEnded',\n};\n\n/**\n * The keys that move a range input.\n *\n * Only these count as scrubbing. Tab in particular must not, since it takes\n * focus away and its keyup lands on whatever it moved to, never here.\n */\nconst VALUE_KEYS = new Set([\n  'ArrowLeft',\n  'ArrowRight',\n  'ArrowUp',\n  'ArrowDown',\n  'Home',\n  'End',\n  'PageUp',\n  'PageDown',\n]);\n\n/**\n * The section boundaries either side of the playhead.\n *\n * `undefined` where there is no boundary on that side, which is the case at\n * the very start and the very end of the track.\n */\ninterface SurroundingMarkers {\n  lower?: number;\n  upper?: number;\n}\n\n/**\n * A range slider styled as a playback scrubber, with optional section markers\n * laid over the track.\n */\n@customElement('ia-scrubber-bar')\nexport class IAScrubberBar extends LitElement {\n  /** The current position along the track */\n  @property({ type: Number }) value = 0;\n\n  /** The lowest position the scrubber can reach */\n  @property({ type: Number }) min = 0;\n\n  /** The highest position the scrubber can reach */\n  @property({ type: Number }) max = 100;\n\n  /** How finely the scrubber can be moved */\n  @property({ type: Number }) step = 0.1;\n\n  /** Where to draw section boundaries, as percentages of the track */\n  @property({ type: Array }) sectionMarkerPercentages: number[] = [];\n\n  /** Whether the markers either side of the playhead point towards it */\n  @property({ type: Boolean }) expandSectionMarkers = false;\n\n  /** The accessible name for the slider */\n  @property({ type: String }) label = msg('Playback position');\n\n  /**\n   * The position actually shown.\n   *\n   * `value` is driven from outside by whatever is playing the audio, but while\n   * the listener is scrubbing their position wins. Keeping the two apart is\n   * what stops playback updates fighting the drag.\n   */\n  @state() private currentValue = 0;\n\n  private userIsInteracting = false;\n\n  /** How far along the track the playhead is, as a percentage */\n  get percentage(): number {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n\n    return ((this.currentValue - this.min) / range) * 100;\n  }\n\n  render(): TemplateResult {\n    const surrounding = this.surroundingMarkers;\n\n    return html`\n      <div class=\"container\" style=\"--fill-percent--: ${this.percentage}%\">\n        <div class=\"color-fill\"></div>\n\n        <div class=\"marker-container\">\n          ${this.sectionMarkerPercentages.map(\n            (markerPercent) => html`\n              <ia-section-marker\n                data-location=${markerPercent}\n                style=\"left: ${markerPercent}%\"\n                .markerMode=${this.markerModeFor(markerPercent, surrounding)}\n              ></ia-section-marker>\n            `,\n          )}\n        </div>\n\n        <input\n          id=\"slider\"\n          type=\"range\"\n          aria-label=${this.label}\n          min=${this.min}\n          max=${this.max}\n          step=${this.step}\n          .value=${String(this.currentValue)}\n          @mousedown=${this.interactionStarted}\n          @mouseup=${this.interactionEnded}\n          @touchstart=${this.interactionStarted}\n          @touchend=${this.interactionEnded}\n          @touchcancel=${this.interactionEnded}\n          @keydown=${this.handleKeyDown}\n          @keyup=${this.handleKeyUp}\n          @blur=${this.handleBlur}\n          @input=${this.handleSlide}\n          @change=${this.handleSlide}\n        />\n      </div>\n    `;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (this.userIsInteracting || !changedProperties.has('value')) return;\n\n    this.currentValue = this.value;\n  }\n\n  /**\n   * The section boundaries immediately below and above the playhead.\n   *\n   * Returns nothing when the markers aren't meant to react to the playhead, so\n   * every marker falls back to its resting state.\n   */\n  private get surroundingMarkers(): SurroundingMarkers {\n    if (!this.expandSectionMarkers) return {};\n\n    const sorted = this.sortedMarkers;\n\n    return {\n      lower: sorted.filter((percent) => percent <= this.currentValue).pop(),\n      upper: sorted.find((percent) => percent > this.currentValue),\n    };\n  }\n\n  /**\n   * The marker percentages in ascending numeric order.\n   *\n   * Sorted on a copy with an explicit comparator: the default `sort()` orders\n   * lexicographically, which puts 100 before 9, and it sorts in place, which\n   * would reorder the caller's own array.\n   */\n  private get sortedMarkers(): number[] {\n    return [...this.sectionMarkerPercentages].sort((a, b) => a - b);\n  }\n\n  private markerModeFor(\n    markerPercent: number,\n    surrounding: SurroundingMarkers,\n  ): SectionMarkerMode {\n    if (markerPercent === surrounding.upper) return SectionMarkerMode.left;\n    if (markerPercent === surrounding.lower) return SectionMarkerMode.right;\n\n    return SectionMarkerMode.neither;\n  }\n\n  private handleSlide(e: Event): void {\n    this.currentValue = parseFloat((e.target as HTMLInputElement).value);\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number }>(Events.ValueChange, {\n        detail: { value: this.currentValue },\n      }),\n    );\n  }\n\n  private interactionStarted(): void {\n    this.userIsInteracting = true;\n    this.dispatchEvent(new Event(Events.UserInteractionStarted));\n  }\n\n  /**\n   * Starts an interaction when the slider is scrubbed from the keyboard.\n   *\n   * Without this, arrowing along the bar sets the value but leaves\n   * `userIsInteracting` false, so the next playback tick snaps the thumb back\n   * to the playhead mid-scrub.\n   *\n   * Guarded against the auto-repeat that holding a key produces, which would\n   * otherwise emit a fresh `userInteractionStarted` on every repeat.\n   */\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (!VALUE_KEYS.has(e.key) || this.userIsInteracting) return;\n\n    this.interactionStarted();\n  }\n\n  private handleKeyUp(e: KeyboardEvent): void {\n    if (!VALUE_KEYS.has(e.key)) return;\n\n    this.interactionEnded();\n  }\n\n  /**\n   * Releases an interaction that focus left behind.\n   *\n   * A keyup can go missing, e.g. focus moves while the key is still down, and\n   * an interaction left latched on would ignore playback updates for good.\n   */\n  private handleBlur(): void {\n    if (!this.userIsInteracting) return;\n\n    this.interactionEnded();\n  }\n\n  /**\n   * Ends the interaction.\n   *\n   * Bound to `touchcancel` as well as `touchend`, because a touch the system\n   * takes over never delivers `touchend`, and an interaction left latched on\n   * would ignore playback updates from then on.\n   */\n  private interactionEnded(): void {\n    this.userIsInteracting = false;\n    this.dispatchEvent(new Event(Events.UserInteractionEnded));\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --scrubber-bar-height--: var(--ia-theme-scrubber-bar-height, 20px);\n        --scrubber-marker-inset--: var(--ia-theme-scrubber-marker-inset, 10px);\n\n        --scrubber-thumb-color--: var(--ia-theme-scrubber-thumb-color, #fff);\n        --scrubber-thumb-diameter--: var(\n          --ia-theme-scrubber-thumb-diameter,\n          20px\n        );\n        --scrubber-thumb-border--: var(\n          --ia-theme-scrubber-thumb-border,\n          1px solid #000\n        );\n        --scrubber-thumb-border-radius--: var(\n          --ia-theme-scrubber-thumb-border-radius,\n          50%\n        );\n        /*\n          Centres the thumb on the track. The thumb is content-box, so its\n          border adds 1px above and below the diameter, hence the extra -1px.\n          Comes out at -6px for the default track and thumb sizes.\n        */\n        --scrubber-thumb-top-margin--: var(\n          --ia-theme-scrubber-thumb-top-margin,\n          calc(\n            (\n                var(--scrubber-track-height--) - var(\n                    --scrubber-thumb-diameter--\n                  )\n              ) /\n              2 - 1px\n          )\n        );\n\n        --scrubber-track-height--: var(--ia-theme-scrubber-track-height, 10px);\n        --scrubber-track-border--: var(\n          --ia-theme-scrubber-track-border,\n          1px solid #fff\n        );\n        --scrubber-track-border-radius--: var(\n          --ia-theme-scrubber-track-border-radius,\n          5px\n        );\n        --scrubber-track-color--: var(\n          --ia-theme-scrubber-track-color,\n          rgba(0, 0, 0, 0.1)\n        );\n        --scrubber-track-fill-color--: var(\n          --ia-theme-scrubber-track-fill-color,\n          #3272b6\n        );\n\n        /*\n          How far off the bottom the track sits. The fill and the section\n          markers both line up against this, so they follow the track when its\n          height is themed. Comes out at 7px for the default sizes.\n        */\n        --scrubber-track-offset--: calc(\n          (var(--scrubber-bar-height--) - var(--scrubber-track-height--)) / 2 +\n            2px\n        );\n      }\n\n      .container {\n        position: relative;\n        height: var(--scrubber-bar-height--);\n      }\n\n      /*\n        The fill is a plain element rather than a track pseudo-element, so the\n        played portion is just a hard gradient stop driven by a custom property.\n      */\n      .color-fill {\n        height: var(--scrubber-track-height--);\n        border-radius: 1em;\n        position: absolute;\n        bottom: var(--scrubber-track-offset--);\n        left: 2px;\n        right: -2px;\n        background: linear-gradient(\n          to right,\n          var(--scrubber-track-fill-color--) 0%,\n          var(--scrubber-track-fill-color--) var(--fill-percent--),\n          var(--scrubber-track-color--) var(--fill-percent--),\n          var(--scrubber-track-color--) 100%\n        );\n      }\n\n      .marker-container {\n        position: absolute;\n        left: var(--scrubber-marker-inset--);\n        right: var(--scrubber-marker-inset--);\n        height: 100%;\n      }\n\n      ia-section-marker {\n        position: absolute;\n        width: 2rem;\n        height: var(--scrubber-track-height--);\n        bottom: var(--scrubber-track-offset--);\n        /*\n          The left offset puts the marker where it belongs, but the divider runs\n          down the middle of the marker, so it shifts back by half its own width\n          to line the divider up with that point.\n        */\n        transform: translateX(-50%);\n      }\n\n      input[type='range'] {\n        -webkit-appearance: none;\n        appearance: none;\n        height: var(--scrubber-bar-height--);\n        padding: 0;\n        width: 100%;\n        background: none;\n        outline: none;\n        position: absolute;\n        bottom: 0;\n      }\n\n      input[type='range']::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        box-sizing: content-box;\n        margin-top: var(--scrubber-thumb-top-margin--);\n        background-color: var(--scrubber-thumb-color--);\n        height: var(--scrubber-thumb-diameter--);\n        width: var(--scrubber-thumb-diameter--);\n        border-radius: var(--scrubber-thumb-border-radius--);\n        border: var(--scrubber-thumb-border--);\n        cursor: pointer;\n      }\n\n      input[type='range']::-moz-range-thumb {\n        background-color: var(--scrubber-thumb-color--);\n        height: var(--scrubber-thumb-diameter--);\n        width: var(--scrubber-thumb-diameter--);\n        border-radius: var(--scrubber-thumb-border-radius--);\n        border: var(--scrubber-thumb-border--);\n        cursor: pointer;\n      }\n\n      input[type='range']::-webkit-slider-runnable-track {\n        border: var(--scrubber-track-border--);\n        height: var(--scrubber-track-height--);\n        border-radius: var(--scrubber-track-border-radius--);\n      }\n\n      input[type='range']::-moz-range-track {\n        border: var(--scrubber-track-border--);\n        height: var(--scrubber-track-height--);\n        border-radius: var(--scrubber-track-border-radius--);\n      }\n\n      input[type='range']::-moz-range-progress {\n        height: var(--scrubber-track-height--);\n        border-radius: var(--scrubber-track-border-radius--);\n      }\n    `;\n  }\n}\n"]}

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

@@ -16,9 +16,9 @@ export type MediaTypeIcon = 'audio' | 'collection' | 'etree' | 'images' | 'searc
  *   4. three animated dots (the default)
  */
 export declare class IAStatusIndicator extends LitElement {
-    loadingTitle?: string;
-    successTitle?: string;
-    errorTitle?: string;
+    loadingTitle: string;
+    successTitle: string;
+    errorTitle: string;
     mode: LoadingStatus;
     mediatype?: MediaTypeIcon;
     hideDots: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAEd,UAAU,EAIV,cAAc,EACf,MAAM,KAAK,CAAC;AAoBb,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,IAAI,GACJ,OAAO,GACP,KAAK,CAAC;AAeV;;;;;;;;GAQG;AACH,qBAEa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,IAAI,EAAE,aAAa,CAAa;IAGhC,SAAS,CAAC,EAAE,aAAa,CAAC;IAGzB,QAAQ,UAAS;IAGrC,OAAO,CAAC,cAAc,CAAS;IAExC,MAAM,IAAI,cAAc;IASxB;;;OAGG;IACH,OAAO,KAAK,mBAAmB,GAE9B;IAED;;;;;OAKG;IACH,OAAO,KAAK,gBAAgB,GAG3B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,wBAAwB,GAYnC;IAED,oEAAoE;IACpE,OAAO,KAAK,aAAa,GA4BxB;IAED,8DAA8D;IAC9D,OAAO,KAAK,WAAW,GAoBtB;IAED;;;OAGG;IACH,OAAO,KAAK,qBAAqB,GAKhC;IAED,OAAO,CAAC,oBAAoB;IAK5B,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CA4HlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAEd,UAAU,EAIV,cAAc,EACf,MAAM,KAAK,CAAC;AAoBb,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,IAAI,GACJ,OAAO,GACP,KAAK,CAAC;AAeV;;;;;;;;GAQG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,SAAqB;IAGjC,YAAY,SAAkB;IAG9B,UAAU,SAAgB;IAG1B,IAAI,EAAE,aAAa,CAAa;IAGhC,SAAS,CAAC,EAAE,aAAa,CAAC;IAGzB,QAAQ,UAAS;IAGrC,OAAO,CAAC,cAAc,CAAS;IAExC,MAAM,IAAI,cAAc;IASxB;;;OAGG;IACH,OAAO,KAAK,mBAAmB,GAE9B;IAED;;;;;OAKG;IACH,OAAO,KAAK,gBAAgB,GAG3B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,wBAAwB,GAYnC;IAED,oEAAoE;IACpE,OAAO,KAAK,aAAa,GA4BxB;IAED,8DAA8D;IAC9D,OAAO,KAAK,WAAW,GAoBtB;IAED;;;OAGG;IACH,OAAO,KAAK,qBAAqB,GAKhC;IAED,OAAO,CAAC,oBAAoB;IAK5B,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CA4HlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { localized, msg } from '@lit/localize';
+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';
@@ -40,6 +40,12 @@ const MEDIATYPE_ICONS = {
 let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     constructor() {
         super(...arguments);
+        /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */
+        this.loadingTitle = msg('Loading...');
+        /* An optional title to use for the success state of the indicator. Will be used for screen readers. */
+        this.successTitle = msg('Success');
+        /* An optional title to use for the error state of the indicator. Will be used for screen readers. */
+        this.errorTitle = msg('Error');
         /* 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. */
@@ -109,7 +115,7 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
         xmlns:xlink="http://www.w3.org/1999/xlink"
         role="status"
       >
-        <title>${this.loadingTitle ?? msg('Loading...')}</title>
+        <title>${this.loadingTitle}</title>
         <g stroke="none" stroke-width="1" fill-rule="evenodd">
           <path
             class="loading-ring"
@@ -138,7 +144,7 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
         xmlns:xlink="http://www.w3.org/1999/xlink"
         role="status"
       >
-        <title>${this.loadingTitle ?? msg('Loading...')}</title>
+        <title>${this.loadingTitle}</title>
         <g fill-rule="evenodd">
           <path
             class="loading-ring"
@@ -175,7 +181,7 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
         xmlns:xlink="http://www.w3.org/1999/xlink"
         role="status"
       >
-        <title>${this.successTitle ?? msg('Success')}</title>
+        <title>${this.successTitle}</title>
         <g stroke="none" stroke-width="1" fill-rule="evenodd">
           <path
             class="success-icon"
@@ -202,7 +208,7 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
         xmlns:xlink="http://www.w3.org/1999/xlink"
         role="status"
       >
-        <title>${this.errorTitle ?? msg('Error')}</title>
+        <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"
@@ -358,8 +364,7 @@ __decorate([
     state()
 ], IAStatusIndicator.prototype, "hasSlottedIcon", void 0);
 IAStatusIndicator = __decorate([
-    customElement('ia-status-indicator'),
-    localized()
+    customElement('ia-status-indicator')
 ], IAStatusIndicator);
 export { IAStatusIndicator };
 //# sourceMappingURL=ia-status-indicator.js.map

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

@@ -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 {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  svg,\n  SVGTemplateResult,\n  TemplateResult,\n} from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, 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')\n@localized()\nexport class IAStatusIndicator extends LitElement {\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. Defaults to \"Loading...\". */\n  @property({ type: String }) loadingTitle?: string;\n\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. Defaults to \"Success\". */\n  @property({ type: String }) successTitle?: string;\n\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. Defaults to \"Error\". */\n  @property({ type: String }) errorTitle?: string;\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 ?? msg('Loading...')}</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 ?? msg('Loading...')}</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 ?? msg('Success')}</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 ?? msg('Error')}</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"]}
+{"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 { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\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-transcript-view/ia-transcript-entry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-transcript-entry.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/ia-transcript-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD;;;;;;GAMG;AACH,qBAGa,iBAAkB,SAAQ,UAAU;IAC/C,0BAA0B;IACE,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE1D,sDAAsD;IACV,QAAQ,UAAS;IAE7D,kEAAkE;IACtB,UAAU,UAAS;IAE/D,gDAAgD;IACJ,WAAW,UAAS;IAEhE,oDAAoD;IACR,cAAc,UAAS;IAEnE,kEAAkE;IACtB,YAAY,UAAS;IAEjE,MAAM,IAAI,cAAc;CAGzB"}
+{"version":3,"file":"ia-transcript-entry.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/ia-transcript-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD;;;;;;GAMG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,0BAA0B;IACE,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE1D,sDAAsD;IACV,QAAQ,UAAS;IAE7D,kEAAkE;IACtB,UAAU,UAAS;IAE/D,gDAAgD;IACJ,WAAW,UAAS;IAEhE,oDAAoD;IACR,cAAc,UAAS;IAEnE,kEAAkE;IACtB,YAAY,UAAS;IAEjE,MAAM,IAAI,cAAc;CAGzB"}

package/dist/src/elements/ia-transcript-view/ia-transcript-entry.js

@@ -1,6 +1,5 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { localized } from '@lit/localize';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 /**
@@ -48,9 +47,6 @@ __decorate([
 ], IATranscriptEntry.prototype, "isMusicEntry", void 0);
 IATranscriptEntry = __decorate([
     customElement('ia-transcript-entry')
-    // Its text can come from msg() in TranscriptEntryConfig.displayText.
-    ,
-    localized()
 ], IATranscriptEntry);
 export { IATranscriptEntry };
 //# sourceMappingURL=ia-transcript-entry.js.map

package/dist/src/elements/ia-transcript-view/ia-transcript-entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-transcript-entry.js","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/ia-transcript-entry.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD;;;;;;GAMG;AAII,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAIL,sDAAsD;QACV,aAAQ,GAAG,KAAK,CAAC;QAE7D,kEAAkE;QACtB,eAAU,GAAG,KAAK,CAAC;QAE/D,gDAAgD;QACJ,gBAAW,GAAG,KAAK,CAAC;QAEhE,oDAAoD;QACR,mBAAc,GAAG,KAAK,CAAC;QAEnE,kEAAkE;QACtB,iBAAY,GAAG,KAAK,CAAC;IAKnE,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,EAAE,EAAE,CAAC;IAChD,CAAC;CACF,CAAA;AApB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAoB;AAGnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAqB;AAGpB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAwB;AAGvB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAsB;AAjBtD,iBAAiB;IAH7B,aAAa,CAAC,qBAAqB,CAAC;IACrC,qEAAqE;;IACpE,SAAS,EAAE;GACC,iBAAiB,CAsB7B","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { localized } from '@lit/localize';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport type { TranscriptEntryConfig } from './models';\n\n/**\n * One line of the transcript.\n *\n * Carries no styles of its own. Every flag reflects to an attribute so the\n * transcript view around it can style entries from a single stylesheet rather\n * than pushing styles down into each one.\n */\n@customElement('ia-transcript-entry')\n// Its text can come from msg() in TranscriptEntryConfig.displayText.\n@localized()\nexport class IATranscriptEntry extends LitElement {\n  /** The entry to render */\n  @property({ type: Object }) entry?: TranscriptEntryConfig;\n\n  /** Whether playback is currently inside this entry */\n  @property({ type: Boolean, reflect: true }) isActive = false;\n\n  /** Whether this is the search result currently being looked at */\n  @property({ type: Boolean, reflect: true }) isSelected = false;\n\n  /** Whether clicking this entry does anything */\n  @property({ type: Boolean, reflect: true }) isClickable = false;\n\n  /** Whether this entry matched the current search */\n  @property({ type: Boolean, reflect: true }) isSearchResult = false;\n\n  /** Whether this entry is a stretch of music rather than speech */\n  @property({ type: Boolean, reflect: true }) isMusicEntry = false;\n\n  render(): TemplateResult {\n    return html`${this.entry?.displayText ?? ''}`;\n  }\n}\n"]}
+{"version":3,"file":"ia-transcript-entry.js","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/ia-transcript-entry.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD;;;;;;GAMG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAIL,sDAAsD;QACV,aAAQ,GAAG,KAAK,CAAC;QAE7D,kEAAkE;QACtB,eAAU,GAAG,KAAK,CAAC;QAE/D,gDAAgD;QACJ,gBAAW,GAAG,KAAK,CAAC;QAEhE,oDAAoD;QACR,mBAAc,GAAG,KAAK,CAAC;QAEnE,kEAAkE;QACtB,iBAAY,GAAG,KAAK,CAAC;IAKnE,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,EAAE,EAAE,CAAC;IAChD,CAAC;CACF,CAAA;AApB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAoB;AAGnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAqB;AAGpB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAwB;AAGvB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAsB;AAjBtD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAsB7B","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport type { TranscriptEntryConfig } from './models';\n\n/**\n * One line of the transcript.\n *\n * Carries no styles of its own. Every flag reflects to an attribute so the\n * transcript view around it can style entries from a single stylesheet rather\n * than pushing styles down into each one.\n */\n@customElement('ia-transcript-entry')\nexport class IATranscriptEntry extends LitElement {\n  /** The entry to render */\n  @property({ type: Object }) entry?: TranscriptEntryConfig;\n\n  /** Whether playback is currently inside this entry */\n  @property({ type: Boolean, reflect: true }) isActive = false;\n\n  /** Whether this is the search result currently being looked at */\n  @property({ type: Boolean, reflect: true }) isSelected = false;\n\n  /** Whether clicking this entry does anything */\n  @property({ type: Boolean, reflect: true }) isClickable = false;\n\n  /** Whether this entry matched the current search */\n  @property({ type: Boolean, reflect: true }) isSearchResult = false;\n\n  /** Whether this entry is a stretch of music rather than speech */\n  @property({ type: Boolean, reflect: true }) isMusicEntry = false;\n\n  render(): TemplateResult {\n    return html`${this.entry?.displayText ?? ''}`;\n  }\n}\n"]}

package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-transcript-view.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/ia-transcript-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,gBAAgB,EAAyB,MAAM,UAAU,CAAC;AAGxE,OAAO,uBAAuB,CAAC;AAc/B;;;;;GAKG;AACH,qBAEa,gBAAiB,SAAQ,UAAU;IAC9C,+BAA+B;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAEtD,mDAAmD;IACvB,WAAW,SAAK;IAE5C,qEAAqE;IACzC,gBAAgB,SAAM;IAElD,qEAAqE;IACzC,mBAAmB,SAAM;IAErD,8CAA8C;IACjB,UAAU,UAAQ;IAE/C,uDAAuD;IAC3B,yBAAyB,SAAK;IAE1D,yEAAyE;IAC5C,gBAAgB,UAAS;IAEtD,6EAA6E;IACjD,gBAAgB,SAAS;IAE5C,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAElC,OAAO,CAAC,UAAU,CAAC,CAAqB;IAEpE,OAAO,CAAC,mBAAmB,CAAC,CAAgC;IAE5D,OAAO,CAAC,iBAAiB,CAAC,CAAS;IAEnC,oBAAoB,IAAI,IAAI;IAM5B,MAAM,IAAI,cAAc;IAwBxB,oDAAoD;IACpD,4BAA4B,IAAI,IAAI;IAQpC,6EAA6E;IAC7E,4BAA4B,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAkBzD,OAAO,KAAK,wBAAwB,GAUnC;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED,OAAO,CAAC,uBAAuB;IAsB/B,OAAO,KAAK,oBAAoB,GAW/B;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAsBhD,OAAO,CAAC,uBAAuB;IAiB/B;;;;;OAKG;IACH,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAY/B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,oBAAoB;IAQ5B;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IAWjB,8EAA8E;IAC9E,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,KAAK,qBAAqB,GAIhC;IAED,OAAO,KAAK,oBAAoB,GAM/B;IAED,OAAO,KAAK,yBAAyB,GAIpC;IAED,OAAO,CAAC,oBAAoB;IAO5B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,kBAAkB;IAY1B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IA+BtB,OAAO,CAAC,qBAAqB;IAO7B,MAAM,KAAK,MAAM,IAAI,cAAc,CAyMlC;CACF"}
+{"version":3,"file":"ia-transcript-view.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/ia-transcript-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,gBAAgB,EAAyB,MAAM,UAAU,CAAC;AAGxE,OAAO,uBAAuB,CAAC;AAc/B;;;;;GAKG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,+BAA+B;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAEtD,mDAAmD;IACvB,WAAW,SAAK;IAE5C,qEAAqE;IACzC,gBAAgB,SAAM;IAElD,qEAAqE;IACzC,mBAAmB,SAAM;IAErD,8CAA8C;IACjB,UAAU,UAAQ;IAE/C,uDAAuD;IAC3B,yBAAyB,SAAK;IAE1D,yEAAyE;IAC5C,gBAAgB,UAAS;IAEtD,6EAA6E;IACjD,gBAAgB,SAAS;IAE5C,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAElC,OAAO,CAAC,UAAU,CAAC,CAAqB;IAEpE,OAAO,CAAC,mBAAmB,CAAC,CAAgC;IAE5D,OAAO,CAAC,iBAAiB,CAAC,CAAS;IAEnC,oBAAoB,IAAI,IAAI;IAM5B,MAAM,IAAI,cAAc;IAwBxB,oDAAoD;IACpD,4BAA4B,IAAI,IAAI;IAQpC,6EAA6E;IAC7E,4BAA4B,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAkBzD,OAAO,KAAK,wBAAwB,GAUnC;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED,OAAO,CAAC,uBAAuB;IAsB/B,OAAO,KAAK,oBAAoB,GAW/B;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAsBhD,OAAO,CAAC,uBAAuB;IAiB/B;;;;;OAKG;IACH,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAY/B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,oBAAoB;IAQ5B;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IAWjB,8EAA8E;IAC9E,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,KAAK,qBAAqB,GAIhC;IAED,OAAO,KAAK,oBAAoB,GAM/B;IAED,OAAO,KAAK,yBAAyB,GAIpC;IAED,OAAO,CAAC,oBAAoB;IAO5B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,kBAAkB;IAY1B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IA+BtB,OAAO,CAAC,qBAAqB;IAO7B,MAAM,KAAK,MAAM,IAAI,cAAc,CAyMlC;CACF"}

package/dist/src/elements/ia-transcript-view/ia-transcript-view.js

@@ -4,7 +4,7 @@ import { css, html, LitElement, nothing, } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { localized, msg } from '@lit/localize';
+import { msg } from '@lit/localize';
 import { formatDuration } from './duration-formatter.js';
 import './ia-transcript-entry.js';
 /**
@@ -560,8 +560,7 @@ __decorate([
     query('#scroll-container')
 ], IATranscriptView.prototype, "scrollView", void 0);
 IATranscriptView = IATranscriptView_1 = __decorate([
-    customElement('ia-transcript-view'),
-    localized()
+    customElement('ia-transcript-view')
 ], IATranscriptView);
 export { IATranscriptView };
 //# sourceMappingURL=ia-transcript-view.js.map