@internetarchive/collection-browser 1.14.17-beta.5 → 1.14.18-alpha.0

package/dist/src/tiles/item-image.js

@@ -1,110 +1,135 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { baseItemImageStyles, waveformGradientStyles, } from '../styles/item-image-styles';
-import { searchIcon } from '../assets/img/icons/mediatype/search';
-let ItemImage = class ItemImage extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isListTile = false;
-        this.isCompactTile = false;
-        this.loggedIn = false;
-        this.isWaveform = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { baseItemImageStyles, waveformGradientStyles, } from '../styles/item-image-styles';
+import { searchIcon } from '../assets/img/icons/mediatype/search';
+let ItemImage = class ItemImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isListTile = false;
+        this.isCompactTile = false;
+        this.loggedIn = false;
+        this.isWaveform = false;
+        this.isNotFound = false;
+    }
+    render() {
         return html `
       <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>
-    `;
-    }
-    get imageTemplate() {
-        var _a;
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'search') {
-            return html `${searchIcon}`;
-        }
+    `;
+    }
+    get imageTemplate() {
+        var _a;
+        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'search') {
+            return html `${searchIcon}`;
+        }
         return html `
       <img
         class=${classMap(this.itemImageClass)}
         src="${this.imageSrc}"
         alt=""
         @load=${this.onLoad}
+        @error=${this.onError}
       />
-    `;
-    }
-    /**
-     * Helpers
-     */
-    get imageSrc() {
-        var _a;
-        // Don't try to load invalid image URLs
-        return this.baseImageUrl && ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)
-            ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
-            : nothing;
-    }
-    get hashBasedGradient() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
-            return 'waveform-grad0';
-        }
-        const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
-        return `waveform-grad${gradient}`;
-    }
-    hashStrToInt(str) {
-        return str
-            .split('')
-            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-    }
-    /**
-     * Classes
-     */
-    get itemBaseClass() {
-        var _a;
-        return {
-            'drop-shadow': true,
-            'list-box': this.isListTile,
-            'search-image': ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'search',
-            [this.hashBasedGradient]: this.isWaveform,
-        };
-    }
-    get itemImageClass() {
-        var _a, _b, _c;
-        const toBlur = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) || ((_b = this.model) === null || _b === void 0 ? void 0 : _b.loginRequired);
-        return {
-            contain: !this.isCompactTile && !this.isWaveform,
-            cover: this.isCompactTile,
-            blur: toBlur || false,
-            waveform: this.isWaveform,
-            'account-image': this.isAccountImage,
-            'collection-image': ((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'collection', // for collection tile image
-        };
-    }
-    /**
-     * Helper function to determine if account tile image
-     */
-    get isAccountImage() {
-        var _a;
-        return (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account' &&
-            !this.isCompactTile &&
-            !this.isListTile);
-    }
-    /**
-     * Event listener sets isWaveform true if image is waveform
-     */
-    onLoad() {
-        var _a, _b;
-        if ((((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio' ||
-            ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'etree') &&
-            this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4) {
-            this.isWaveform = true;
-        }
-    }
-    /**
-     * CSS
-     */
-    static get styles() {
-        return [
-            baseItemImageStyles,
-            waveformGradientStyles,
+    `;
+    }
+    /**
+     * Helpers
+     */
+    get imageSrc() {
+        var _a, _b;
+        if (this.isNotFound)
+            return this.notFoundSrc;
+        // Use the correct image for web capture tiles, if possible
+        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) && this.model.identifier) {
+            try {
+                const url = new URL(this.model.identifier);
+                const domain = encodeURIComponent(url.hostname);
+                return this.baseImageUrl
+                    ? `https://web.archive.org/thumb/${domain}?generate=1`
+                    : nothing;
+            }
+            catch (err) {
+                return `${this.baseImageUrl}/images/notfound.png`;
+            }
+        }
+        // Don't try to load invalid image URLs
+        return this.baseImageUrl && ((_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier)
+            ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
+            : nothing;
+    }
+    get notFoundSrc() {
+        return this.baseImageUrl
+            ? `${this.baseImageUrl}/images/notfound.png`
+            : nothing;
+    }
+    get hashBasedGradient() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+            return 'waveform-grad0';
+        }
+        const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
+        return `waveform-grad${gradient}`;
+    }
+    hashStrToInt(str) {
+        return str
+            .split('')
+            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    }
+    /**
+     * Classes
+     */
+    get itemBaseClass() {
+        var _a;
+        return {
+            'drop-shadow': true,
+            'list-box': this.isListTile,
+            'search-image': ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'search',
+            [this.hashBasedGradient]: this.isWaveform,
+        };
+    }
+    get itemImageClass() {
+        var _a, _b, _c;
+        const toBlur = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) || ((_b = this.model) === null || _b === void 0 ? void 0 : _b.loginRequired);
+        return {
+            contain: !this.isCompactTile && !this.isWaveform,
+            cover: this.isCompactTile,
+            blur: toBlur || false,
+            waveform: this.isWaveform,
+            'account-image': this.isAccountImage,
+            'collection-image': ((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'collection', // for collection tile image
+        };
+    }
+    /**
+     * Helper function to determine if account tile image
+     */
+    get isAccountImage() {
+        var _a;
+        return (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account' &&
+            !this.isCompactTile &&
+            !this.isListTile);
+    }
+    /**
+     * Event listener sets isWaveform true if image is waveform
+     */
+    onLoad() {
+        var _a, _b;
+        if ((((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio' ||
+            ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'etree') &&
+            this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4) {
+            this.isWaveform = true;
+        }
+    }
+    onError() {
+        this.isNotFound = true;
+    }
+    /**
+     * CSS
+     */
+    static get styles() {
+        return [
+            baseItemImageStyles,
+            waveformGradientStyles,
             css `
         img {
           height: var(--imgHeight, 16rem);
@@ -123,33 +148,36 @@ let ItemImage = class ItemImage extends LitElement {
           height: 10rem;
           width: 10rem;
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], ItemImage.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], ItemImage.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "isListTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "isCompactTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "loggedIn", void 0);
-__decorate([
-    state()
-], ItemImage.prototype, "isWaveform", void 0);
-__decorate([
-    query('img')
-], ItemImage.prototype, "baseImage", void 0);
-ItemImage = __decorate([
-    customElement('item-image')
-], ItemImage);
-export { ItemImage };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], ItemImage.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ItemImage.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isListTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isCompactTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "loggedIn", void 0);
+__decorate([
+    state()
+], ItemImage.prototype, "isWaveform", void 0);
+__decorate([
+    state()
+], ItemImage.prototype, "isNotFound", void 0);
+__decorate([
+    query('img')
+], ItemImage.prototype, "baseImage", void 0);
+ItemImage = __decorate([
+    customElement('item-image')
+], ItemImage);
+export { ItemImage };
 //# sourceMappingURL=item-image.js.map

package/dist/src/tiles/item-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (this.model?.mediatype === 'search') {\n      return html`${searchIcon}`;\n    }\n\n    return html`\n      <img\n        class=${classMap(this.itemImageClass)}\n        src=\"${this.imageSrc}\"\n        alt=\"\"\n        @load=${this.onLoad}\n      />\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      'search-image': this.model?.mediatype === 'search',\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n      'account-image': this.isAccountImage, // for account tile image\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\n    };\n  }\n\n  /**\n   * Helper function to determine if account tile image\n   */\n  private get isAccountImage() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n\n        .search-image {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: rgb(245, 245, 247);\n          border-radius: 4px;\n        }\n\n        svg {\n          height: 10rem;\n          width: 10rem;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @state() private isNotFound = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (this.model?.mediatype === 'search') {\n      return html`${searchIcon}`;\n    }\n\n    return html`\n      <img\n        class=${classMap(this.itemImageClass)}\n        src=\"${this.imageSrc}\"\n        alt=\"\"\n        @load=${this.onLoad}\n        @error=${this.onError}\n      />\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    if (this.isNotFound) return this.notFoundSrc;\n\n    // Use the correct image for web capture tiles, if possible\n    if (this.model?.captureDates && this.model.identifier) {\n      try {\n        const url = new URL(this.model.identifier);\n        const domain = encodeURIComponent(url.hostname);\n        return this.baseImageUrl\n          ? `https://web.archive.org/thumb/${domain}?generate=1`\n          : nothing;\n      } catch (err) {\n        return `${this.baseImageUrl}/images/notfound.png`;\n      }\n    }\n\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get notFoundSrc() {\n    return this.baseImageUrl\n      ? `${this.baseImageUrl}/images/notfound.png`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      'search-image': this.model?.mediatype === 'search',\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n      'account-image': this.isAccountImage, // for account tile image\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\n    };\n  }\n\n  /**\n   * Helper function to determine if account tile image\n   */\n  private get isAccountImage() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  private onError() {\n    this.isNotFound = true;\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n\n        .search-image {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: rgb(245, 245, 247);\n          border-radius: 4px;\n        }\n\n        svg {\n          height: 10rem;\n          width: 10rem;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/list/tile-list-compact-header.d.ts

@@ -1,6 +1,6 @@
-import { BaseTileComponent } from '../base-tile-component';
-export declare class TileListCompactHeader extends BaseTileComponent {
-    render(): import("lit-html").TemplateResult<1>;
-    private get classSize();
-    static get styles(): import("lit").CSSResult;
-}
+import { BaseTileComponent } from '../base-tile-component';
+export declare class TileListCompactHeader extends BaseTileComponent {
+    render(): import("lit-html").TemplateResult<1>;
+    private get classSize();
+    static get styles(): import("lit").CSSResult;
+}

package/dist/src/tiles/list/tile-list-compact-header.js

@@ -1,23 +1,23 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { BaseTileComponent } from '../base-tile-component';
-let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponent {
-    /*
-     * Reactive properties inherited from BaseTileComponent:
-     *  - model?: TileModel;
-     *  - currentWidth?: number;
-     *  - currentHeight?: number;
-     *  - baseNavigationUrl?: string;
-     *  - baseImageUrl?: string;
-     *  - collectionPagePath?: string;
-     *  - sortParam: SortParam | null = null;
-     *  - creatorFilter?: string;
-     *  - mobileBreakpoint?: number;
-     *  - loggedIn = false;
-     */
-    render() {
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { BaseTileComponent } from '../base-tile-component';
+let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponent {
+    /*
+     * Reactive properties inherited from BaseTileComponent:
+     *  - model?: TileModel;
+     *  - currentWidth?: number;
+     *  - currentHeight?: number;
+     *  - baseNavigationUrl?: string;
+     *  - baseImageUrl?: string;
+     *  - collectionPagePath?: string;
+     *  - sortParam: SortParam | null = null;
+     *  - creatorFilter?: string;
+     *  - mobileBreakpoint?: number;
+     *  - loggedIn = false;
+     */
+    render() {
         return html `
       <div id="list-line-header" class="${this.classSize}">
         <div id="thumb"></div>
@@ -27,17 +27,17 @@ let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponen
         <div id="icon">${msg('Type')}</div>
         <div id="views">${msg('Views')}</div>
       </div>
-    `;
-    }
-    get classSize() {
-        if (this.mobileBreakpoint &&
-            this.currentWidth &&
-            this.currentWidth < this.mobileBreakpoint) {
-            return 'mobile';
-        }
-        return 'desktop';
-    }
-    static get styles() {
+    `;
+    }
+    get classSize() {
+        if (this.mobileBreakpoint &&
+            this.currentWidth &&
+            this.currentWidth < this.mobileBreakpoint) {
+            return 'mobile';
+        }
+        return 'desktop';
+    }
+    static get styles() {
         return css `
       html {
         font-size: unset;
@@ -72,11 +72,11 @@ let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponen
       #list-line-header.desktop {
         grid-template-columns: 51px 3fr 2fr 95px 30px 60px;
       }
-    `;
-    }
-};
-TileListCompactHeader = __decorate([
-    customElement('tile-list-compact-header')
-], TileListCompactHeader);
-export { TileListCompactHeader };
+    `;
+    }
+};
+TileListCompactHeader = __decorate([
+    customElement('tile-list-compact-header')
+], TileListCompactHeader);
+export { TileListCompactHeader };
 //# sourceMappingURL=tile-list-compact-header.js.map

package/dist/src/tiles/list/tile-list-compact.d.ts

@@ -1,15 +1,15 @@
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-import '../mediatype-icon';
-export declare class TileListCompact extends BaseTileComponent {
-    render(): import("lit-html").TemplateResult<1>;
-    private get href();
-    private get creator();
-    private get date();
-    private get views();
-    private get classSize();
-    private get dateFormatSize();
-    private get formatSize();
-    private get isSortedByDate();
-    static get styles(): import("lit").CSSResult;
-}
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+import '../mediatype-icon';
+export declare class TileListCompact extends BaseTileComponent {
+    render(): import("lit-html").TemplateResult<1>;
+    private get href();
+    private get creator();
+    private get date();
+    private get views();
+    private get classSize();
+    private get dateFormatSize();
+    private get formatSize();
+    private get isSortedByDate();
+    static get styles(): import("lit").CSSResult;
+}