@internetarchive/ia-item-navigator 0.0.4 → 0.1.1

package/dist/src/item-navigator.d.ts

@@ -1,5 +1,4 @@
-import { LitElement, PropertyValues, CSSResult } from 'lit-element';
-import { nothing, TemplateResult } from 'lit-html';
+import { LitElement, PropertyValues, CSSResult, TemplateResult, nothing } from 'lit';
 import { MetadataResponse } from '@internetarchive/search-service';
 import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
 import '@internetarchive/ia-menu-slider';
@@ -38,11 +37,10 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
     };
     /** End shared observer */
     get loaderTitle(): "" | "Internet Archive";
-    get readerHeightStyle(): string;
-    get loadingArea(): TemplateResult;
+    get loadingArea(): TemplateResult<1>;
     slotChange(e: Event, type: 'header' | 'main'): void;
     render(): TemplateResult;
-    get noTheaterView(): TemplateResult;
+    get noTheaterView(): TemplateResult<1>;
     get renderViewport(): TemplateResult | typeof nothing;
     loadingStateUpdated(e: loadingStateUpdatedEvent): void;
     /** Fullscreen Management */
@@ -57,7 +55,7 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
     setMenuShortcuts(e: SetSideMenuShortcutsEvent): void;
     /** Toggles Side Menu & Sets viewable subpanel  */
     manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void;
-    get menuToggleButton(): TemplateResult;
+    get menuToggleButton(): TemplateResult<1>;
     get selectedMenuId(): MenuId | '';
     get renderSideMenu(): TemplateResult;
     /** End Side menu */

package/dist/src/item-navigator.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
-import { nothing } from 'lit-html';
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
 import { MetadataResponse } from '@internetarchive/search-service';
 import '@internetarchive/ia-menu-slider';
 import '@internetarchive/icon-ellipses/icon-ellipses';
@@ -66,11 +66,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     get loaderTitle() {
         return this.viewportInFullscreen ? 'Internet Archive' : '';
     }
-    get readerHeightStyle() {
-        var _a, _b;
-        const calcFSHeight = `calc(100% - ${((_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0}px)`;
-        return ((_b = this.headerSlot) === null || _b === void 0 ? void 0 : _b.offsetHeight) > 0 ? `height: ${calcFSHeight}` : '';
-    }
     get loadingArea() {
         return html `
       <div class="loading-area">
@@ -89,14 +84,17 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         this.requestUpdate();
     }
     render() {
+        var _a, _b;
         const displayReaderClass = this.loaded ? '' : 'hidden';
+        const headerHeight = ((_b = (_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.assignedNodes()[0]) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
         return html `
       <div id="frame" class=${this.menuClass}>
         <slot
           name="header"
+          style=${`height: ${headerHeight}px`}
           @slotchange=${(e) => this.slotChange(e, 'header')}
         ></slot>
-        <div class="menu-and-reader" style=${this.readerHeightStyle}>
+        <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
           <div id="reader" class=${displayReaderClass}>
             ${this.renderViewport}
@@ -122,7 +120,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       <div slot="main" style=${slotVisibility}>
         <slot
           name="main"
-          style=${this.readerHeightStyle}
           @slotchange=${(e) => this.slotChange(e, 'main')}
         ></slot>
       </div>
@@ -236,7 +233,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     /** End Menu Shortcuts */
     /** Misc Render */
     get menuClass() {
-        const drawerState = this.menuOpened ? 'open' : '';
+        var _a, _b;
+        const hasMenuOrShortcuts = ((_a = this.menuContents) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.menuShortcuts) === null || _b === void 0 ? void 0 : _b.length);
+        const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
         const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
         return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
     }
@@ -250,8 +249,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       :host,
       #frame,
       .menu-and-reader {
-        min-height: inherit;
-        height: inherit;
         position: relative;
         overflow: hidden;
         display: block;
@@ -259,7 +256,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
 
       :host,
       #frame,
-      .menu-and-reader,
       .loading-area,
       .loading-view {
         min-height: inherit;
@@ -268,7 +264,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
 
       slot {
         display: block;
-        overflow: hidden;
         width: 100%;
       }
 
@@ -280,6 +275,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
+        display: flex;
+        flex-direction: column;
       }
 
       #frame.fullscreen {
@@ -292,18 +289,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       }
 
       .loading-view {
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
       }
 
+      .loading-area {
+        width: 100%;
+      }
+
       ia-itemnav-loader {
         display: block;
         width: 100%;
       }
 
       .hidden {
-        display: none;
+        display: none !important;
       }
 
       button {
@@ -319,6 +321,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
 
       .menu-and-reader {
         position: relative;
+        display: flex;
+        flex: 1;
       }
 
       nav button {
@@ -381,13 +385,13 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         z-index: 1;
         transform: translateX(0);
         width: 100%;
-        height: 100%;
+        display: flex;
       }
 
       #reader > * {
         width: 100%;
         display: flex;
-        height: 100%;
+        flex: 1;
       }
 
       .open.overlay #reader {
@@ -401,8 +405,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       }
 
       .open.shift #reader {
-        width: calc(100% - var(--menuWidth));
-        float: right;
+        width: calc(100% - ${subnavWidth});
+        margin-left: ${subnavWidth};
         transition: ${transitionEffect};
       }
     `;

package/dist/src/item-navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  customElement,\n  property,\n  state,\n  query,\n  PropertyValues,\n  CSSResult,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface {\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: Boolean }) viewAvailable: Boolean = true;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n  @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n    this.sharedObserver?.addObserver({\n      target: this.headerSlot,\n      handler: {\n        handleResize: ({ contentRect }) => {\n          if (contentRect.height) {\n            this.requestUpdate();\n          }\n        },\n      },\n    });\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get readerHeightStyle(): string {\n    const calcFSHeight = `calc(100% - ${this.headerSlot?.offsetHeight || 0}px)`;\n\n    return this.headerSlot?.offsetHeight > 0 ? `height: ${calcFSHeight}` : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  slotChange(e: Event, type: 'header' | 'main'): void {\n    const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n    this.dispatchEvent(\n      new CustomEvent('slotChange', {\n        detail: { slot: slottedContent, type },\n      })\n    );\n    this.requestUpdate();\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    return html`\n      <div id=\"frame\" class=${this.menuClass}>\n        <slot\n          name=\"header\"\n          @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n        ></slot>\n        <div class=\"menu-and-reader\" style=${this.readerHeightStyle}>\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <div id=\"reader\" class=${displayReaderClass}>\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.viewAvailable) {\n      return this.noTheaterView;\n    }\n\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n    return html`\n      <div slot=\"main\" style=${slotVisibility}>\n        <slot\n          name=\"main\"\n          style=${this.readerHeightStyle}\n          @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n        ></slot>\n      </div>\n    `;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents?.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const drawerState = this.menuOpened ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        min-height: inherit;\n        height: inherit;\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .menu-and-reader,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        overflow: hidden;\n        width: 100%;\n      }\n\n      slot * {\n        display: block;\n        height: inherit;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        transform: translateX(0);\n        width: 100%;\n        height: 100%;\n      }\n\n      #reader > * {\n        width: 100%;\n        display: flex;\n        height: 100%;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift #reader {\n        width: calc(100% - var(--menuWidth));\n        float: right;\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  CSSResult,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface {\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: Boolean }) viewAvailable: Boolean = true;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n  @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n    this.sharedObserver?.addObserver({\n      target: this.headerSlot,\n      handler: {\n        handleResize: ({ contentRect }) => {\n          if (contentRect.height) {\n            this.requestUpdate();\n          }\n        },\n      },\n    });\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  slotChange(e: Event, type: 'header' | 'main'): void {\n    const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n    this.dispatchEvent(\n      new CustomEvent('slotChange', {\n        detail: { slot: slottedContent, type },\n      })\n    );\n    this.requestUpdate();\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    const headerHeight =\n      (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;\n    return html`\n      <div id=\"frame\" class=${this.menuClass}>\n        <slot\n          name=\"header\"\n          style=${`height: ${headerHeight}px`}\n          @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n        ></slot>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <div id=\"reader\" class=${displayReaderClass}>\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.viewAvailable) {\n      return this.noTheaterView;\n    }\n\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n    return html`\n      <div slot=\"main\" style=${slotVisibility}>\n        <slot\n          name=\"main\"\n          @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n        ></slot>\n      </div>\n    `;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents?.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const hasMenuOrShortcuts =\n      this.menuContents?.length || this.menuShortcuts?.length;\n    const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        width: 100%;\n      }\n\n      slot * {\n        display: block;\n        height: inherit;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .loading-area {\n        width: 100%;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none !important;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n        display: flex;\n        flex: 1;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        transform: translateX(0);\n        width: 100%;\n        display: flex;\n      }\n\n      #reader > * {\n        width: 100%;\n        display: flex;\n        flex: 1;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift #reader {\n        width: calc(100% - ${subnavWidth});\n        margin-left: ${subnavWidth};\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}

package/dist/src/loader.d.ts

@@ -1,13 +1,13 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 export declare class IAItemNavLoader extends LitElement {
     static get properties(): {
         title: {
             type: StringConstructor;
         };
     };
-    get bookIconSvg(): import("lit-element").SVGTemplateResult;
-    get icon(): import("lit-element").SVGTemplateResult;
-    get loader(): import("lit-element").SVGTemplateResult;
-    render(): import("lit-element").TemplateResult;
-    static get styles(): import("lit-element").CSSResult;
+    get bookIconSvg(): import("lit").TemplateResult<2>;
+    get icon(): import("lit").TemplateResult<2>;
+    get loader(): import("lit").TemplateResult<2>;
+    render(): import("lit").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult;
 }

package/dist/src/loader.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 /* eslint-disable class-methods-use-this */
-import { css, html, LitElement, customElement } from 'lit-element';
-import { svg, nothing } from 'lit-html';
+import { css, html, LitElement, svg, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
 let IAItemNavLoader = class IAItemNavLoader extends LitElement {
     static get properties() {
         return {

package/dist/src/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAGxC,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QAClE,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA/FY,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA+F3B;SA/FY,eAAe","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, customElement } from 'lit-element';\nimport { svg, nothing } from 'lit-html';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n  static get properties() {\n    return {\n      title: { type: String },\n    };\n  }\n\n  get bookIconSvg() {\n    return svg`\n      <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n        <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n        <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n        <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n      </g>\n    `;\n  }\n\n  get icon() {\n    return this.bookIconSvg;\n  }\n\n  get loader() {\n    return svg`\n    <svg\n      height=\"100\"\n      viewBox=\"0 0 100 100\"\n      width=\"100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-labelledby=\"item-loading\"\n    >\n      <title id=\"item-loading\">Currently loading viewer.</title>\n      <desc>Please wait while we load theater.</desc>\n      <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n        ${this.icon}\n        <path\n          class=\"ring\"\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          fill-rule=\"nonzero\"\n        />\n      </g>\n    </svg>\n    `;\n  }\n\n  render() {\n    const title = this.title ? html`<h2>${this.title}</h2>` : nothing;\n    return html`\n      <div class=\"place-holder\">\n        ${title} ${this.loader}\n        <h3>Loading viewer</h3>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      .place-holder {\n        width: 30%;\n        margin: auto;\n        text-align: center;\n        color: var(--primaryTextColor);\n      }\n\n      .place-holder {\n        position: relative;\n      }\n\n      .place-holder svg {\n        display: block;\n        width: 60%;\n        max-width: 100px;\n        height: auto;\n        margin: auto;\n      }\n\n      svg * {\n        fill: var(--primaryTextColor);\n      }\n\n      svg .ring {\n        animation: rotate 1.3s infinite linear;\n        transform-origin: 50px 50px;\n        transform-box: fill-box;\n        display: block; // transform won't work on inline style\n      }\n\n      @keyframes rotate {\n        0% {\n          -moz-transform: rotate(-360deg);\n          -webkit-transform: rotate(-360deg);\n          transform: rotate(-360deg);\n        }\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QAClE,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA/FY,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA+F3B;SA/FY,eAAe","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, svg, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n  static get properties() {\n    return {\n      title: { type: String },\n    };\n  }\n\n  get bookIconSvg() {\n    return svg`\n      <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n        <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n        <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n        <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n      </g>\n    `;\n  }\n\n  get icon() {\n    return this.bookIconSvg;\n  }\n\n  get loader() {\n    return svg`\n    <svg\n      height=\"100\"\n      viewBox=\"0 0 100 100\"\n      width=\"100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-labelledby=\"item-loading\"\n    >\n      <title id=\"item-loading\">Currently loading viewer.</title>\n      <desc>Please wait while we load theater.</desc>\n      <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n        ${this.icon}\n        <path\n          class=\"ring\"\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          fill-rule=\"nonzero\"\n        />\n      </g>\n    </svg>\n    `;\n  }\n\n  render() {\n    const title = this.title ? html`<h2>${this.title}</h2>` : nothing;\n    return html`\n      <div class=\"place-holder\">\n        ${title} ${this.loader}\n        <h3>Loading viewer</h3>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      .place-holder {\n        width: 30%;\n        margin: auto;\n        text-align: center;\n        color: var(--primaryTextColor);\n      }\n\n      .place-holder {\n        position: relative;\n      }\n\n      .place-holder svg {\n        display: block;\n        width: 60%;\n        max-width: 100px;\n        height: auto;\n        margin: auto;\n      }\n\n      svg * {\n        fill: var(--primaryTextColor);\n      }\n\n      svg .ring {\n        animation: rotate 1.3s infinite linear;\n        transform-origin: 50px 50px;\n        transform-box: fill-box;\n        display: block; // transform won't work on inline style\n      }\n\n      @keyframes rotate {\n        0% {\n          -moz-transform: rotate(-360deg);\n          -webkit-transform: rotate(-360deg);\n          transform: rotate(-360deg);\n        }\n      }\n    `;\n  }\n}\n"]}

package/dist/src/no-theater-available.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit-element';
+import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
 export declare class IANoTheaterAvailable extends LitElement {
     identifier?: string;
     emitLoaded(): void;

package/dist/src/no-theater-available.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
-import { LitElement, customElement, property, html, css, } from 'lit-element';
+import { LitElement, html, css, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
     constructor() {
         super(...arguments);

package/dist/src/no-theater-available.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,QAAQ,EACR,IAAI,EAIJ,GAAG,GACJ,MAAM,aAAa,CAAC;AAGrB,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAC8B,eAAU,GAAY,EAAE,CAAC;IAwEvD,CAAC;IAtEC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCT,CAAC;IACJ,CAAC;CACF,CAAA;AAxE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AAD1C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAyEhC;SAzEY,oBAAoB","sourcesContent":["import {\n  LitElement,\n  customElement,\n  property,\n  html,\n  TemplateResult,\n  PropertyValues,\n  CSSResult,\n  css,\n} from 'lit-element';\n\n@customElement('ia-no-theater-available')\nexport class IANoTheaterAvailable extends LitElement {\n  @property({ type: String }) identifier?: string = '';\n\n  emitLoaded(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n        detail: { loaded: true },\n      })\n    );\n  }\n\n  updated(changed: PropertyValues): void {\n    if (changed.has('identifier')) {\n      this.emitLoaded();\n    }\n  }\n\n  get downloadUrl(): string {\n    return `/download/${this.identifier}`;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <section>\n        <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n        <p>\n          This item does not appear to have any files that can be experienced on\n          Archive.org. <br />\n          Please download files in this item to interact with them on your\n          computer.\n        </p>\n        <a href=${this.downloadUrl}>Show all files</a>\n      </section>\n    `;\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      :host {\n        color: var(--primaryTextColor, #fff);\n        text-align: center;\n      }\n      section {\n        width: 100%;\n        margin: 5%;\n        padding: 0 5%;\n      }\n      p {\n        font-size: 1.4rem;\n      }\n      a {\n        color: var(--primaryTextColor, #fff);\n        background-color: rgb(25, 72, 128);\n        min-height: 35px;\n        outline: none;\n        cursor: pointer;\n        line-height: normal;\n        border-radius: 0.4rem;\n        text-align: center;\n        vertical-align: middle;\n        font-size: 1.4rem;\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        display: inline-block;\n        padding: 0.85rem 1.2rem;\n        border: 1px solid rgb(197, 209, 223);\n        white-space: nowrap;\n        appearance: auto;\n        box-sizing: border-box;\n        user-select: none;\n        text-decoration: none;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAIJ,GAAG,GACJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAC8B,eAAU,GAAY,EAAE,CAAC;IAwEvD,CAAC;IAtEC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCT,CAAC;IACJ,CAAC;CACF,CAAA;AAxE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AAD1C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAyEhC;SAzEY,oBAAoB","sourcesContent":["import {\n  LitElement,\n  html,\n  TemplateResult,\n  PropertyValues,\n  CSSResult,\n  css,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('ia-no-theater-available')\nexport class IANoTheaterAvailable extends LitElement {\n  @property({ type: String }) identifier?: string = '';\n\n  emitLoaded(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n        detail: { loaded: true },\n      })\n    );\n  }\n\n  updated(changed: PropertyValues): void {\n    if (changed.has('identifier')) {\n      this.emitLoaded();\n    }\n  }\n\n  get downloadUrl(): string {\n    return `/download/${this.identifier}`;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <section>\n        <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n        <p>\n          This item does not appear to have any files that can be experienced on\n          Archive.org. <br />\n          Please download files in this item to interact with them on your\n          computer.\n        </p>\n        <a href=${this.downloadUrl}>Show all files</a>\n      </section>\n    `;\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      :host {\n        color: var(--primaryTextColor, #fff);\n        text-align: center;\n      }\n      section {\n        width: 100%;\n        margin: 5%;\n        padding: 0 5%;\n      }\n      p {\n        font-size: 1.4rem;\n      }\n      a {\n        color: var(--primaryTextColor, #fff);\n        background-color: rgb(25, 72, 128);\n        min-height: 35px;\n        outline: none;\n        cursor: pointer;\n        line-height: normal;\n        border-radius: 0.4rem;\n        text-align: center;\n        vertical-align: middle;\n        font-size: 1.4rem;\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        display: inline-block;\n        padding: 0.85rem 1.2rem;\n        border: 1px solid rgb(197, 209, 223);\n        white-space: nowrap;\n        appearance: auto;\n        box-sizing: border-box;\n        user-select: none;\n        text-decoration: none;\n      }\n    `;\n  }\n}\n"]}

package/dist/test/ia-stub.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 export class ItemStub {
     constructor() {
         this.rawResponse = '';

package/dist/test/ia-stub.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-stub.js","sourceRoot":"","sources":["../../test/ia-stub.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAMhC,MAAM,OAAO,QAAQ;IACnB;QACE,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,EAAE,UAAU,EAAE,KAAK,EAAc,CAAC;QAClD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,gBAAgB,GAAG,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;CA+BF;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,EAAE,EAAE,YAAY;IAChB,IAAI,EAAE,IAAI,CAAA,qCAAqC;CACvB,CAAC;AAE3B,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,GAAG,QAAQ;IACX,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,IAAI,CAAA,gBAAgB;IACjC,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,KAAK;IACjB,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,IAAI,QAAQ,EAAE;IACpB,QAAQ,EAAE,qBAAqB;IAC/B,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CACO,CAAC","sourcesContent":["/* eslint-disable camelcase */\nimport {\n  MetadataResponse,\n  Metadata,\n  File,\n  Review,\n  SpeechMusicASREntry,\n} from '@internetarchive/search-service';\nimport { html } from 'lit-html';\nimport {\n  MenuShortcutInterface,\n  MenuProviderInterface,\n} from '../src/interfaces/menu-interfaces';\n\nexport class ItemStub implements MetadataResponse {\n  constructor() {\n    this.rawResponse = '';\n    this.created = 1;\n    this.d1 = 'hello';\n    this.d2 = 'boop';\n    this.dir = 'whee';\n    this.files = [];\n    this.files_count = 0;\n    this.item_last_updated = 2020;\n    this.item_size = 111;\n    this.metadata = { identifier: 'foo' } as Metadata;\n    this.server = 'foo-server';\n    this.uniq = 2;\n    this.workable_servers = ['abc'];\n  }\n\n  rawResponse: any;\n\n  created: number;\n\n  d1: string;\n\n  d2: string;\n\n  dir: string;\n\n  files: File[];\n\n  files_count: number;\n\n  item_last_updated: number;\n\n  item_size: number;\n\n  metadata: Metadata;\n\n  server: string;\n\n  uniq: number;\n\n  workable_servers: string[];\n\n  speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;\n\n  reviews?: Review[] | undefined;\n}\n\nexport const shortcut = {\n  id: 'fullscreen',\n  icon: html`<i class=\"fas fullscreen-test\"></i>`,\n} as MenuShortcutInterface;\n\nexport const menuProvider = {\n  ...shortcut,\n  label: 'foo',\n  menuDetails: html`<div>foo</div>`,\n  selected: true,\n  followable: false,\n  href: 'https://archive.foo',\n  item: new ItemStub(),\n  baseHost: 'https://archive.foo',\n  subPrefix: 'bar',\n  updated: () => {},\n} as MenuProviderInterface;\n"]}
+{"version":3,"file":"ia-stub.js","sourceRoot":"","sources":["../../test/ia-stub.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAM3B,MAAM,OAAO,QAAQ;IACnB;QACE,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,EAAE,UAAU,EAAE,KAAK,EAAc,CAAC;QAClD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,gBAAgB,GAAG,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;CA+BF;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,EAAE,EAAE,YAAY;IAChB,IAAI,EAAE,IAAI,CAAA,qCAAqC;CACvB,CAAC;AAE3B,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,GAAG,QAAQ;IACX,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,IAAI,CAAA,gBAAgB;IACjC,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,KAAK;IACjB,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,IAAI,QAAQ,EAAE;IACpB,QAAQ,EAAE,qBAAqB;IAC/B,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CACO,CAAC","sourcesContent":["/* eslint-disable camelcase */\nimport {\n  MetadataResponse,\n  Metadata,\n  File,\n  Review,\n  SpeechMusicASREntry,\n} from '@internetarchive/search-service';\nimport { html } from 'lit';\nimport {\n  MenuShortcutInterface,\n  MenuProviderInterface,\n} from '../src/interfaces/menu-interfaces';\n\nexport class ItemStub implements MetadataResponse {\n  constructor() {\n    this.rawResponse = '';\n    this.created = 1;\n    this.d1 = 'hello';\n    this.d2 = 'boop';\n    this.dir = 'whee';\n    this.files = [];\n    this.files_count = 0;\n    this.item_last_updated = 2020;\n    this.item_size = 111;\n    this.metadata = { identifier: 'foo' } as Metadata;\n    this.server = 'foo-server';\n    this.uniq = 2;\n    this.workable_servers = ['abc'];\n  }\n\n  rawResponse: any;\n\n  created: number;\n\n  d1: string;\n\n  d2: string;\n\n  dir: string;\n\n  files: File[];\n\n  files_count: number;\n\n  item_last_updated: number;\n\n  item_size: number;\n\n  metadata: Metadata;\n\n  server: string;\n\n  uniq: number;\n\n  workable_servers: string[];\n\n  speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;\n\n  reviews?: Review[] | undefined;\n}\n\nexport const shortcut = {\n  id: 'fullscreen',\n  icon: html`<i class=\"fas fullscreen-test\"></i>`,\n} as MenuShortcutInterface;\n\nexport const menuProvider = {\n  ...shortcut,\n  label: 'foo',\n  menuDetails: html`<div>foo</div>`,\n  selected: true,\n  followable: false,\n  href: 'https://archive.foo',\n  item: new ItemStub(),\n  baseHost: 'https://archive.foo',\n  subPrefix: 'bar',\n  updated: () => {},\n} as MenuProviderInterface;\n"]}

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "0.0.4",
-  "description": "Internet Archive's Item Navigator, visually eplore an item's contents.",
+  "version": "0.1.1",
+  "description": "Internet Archive's Item Navigator, visually explore an item's contents.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/internetarchive/iaux-item-navigator.git"
+  },
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -21,7 +25,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@internetarchive/ia-menu-slider": "^1.1.2",
+    "@internetarchive/ia-menu-slider": "^2.0.0",
     "@internetarchive/ia-sharing-options": "^0.1.4",
     "@internetarchive/icon-ellipses": "^1.1.3",
     "@internetarchive/icon-share": "^1.1.3",
@@ -30,12 +34,12 @@
     "@internetarchive/search-service": "^0.1.2",
     "@internetarchive/shared-resize-observer": "^0.0.1",
     "@types/resize-observer-browser": "^0.1.6",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.1.2"
+    "lit": "^2.1.4"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",
-    "@open-wc/testing": "^2.0.0",
+    "@open-wc/testing": "^3.0.4",
+    "@types/mocha": "^9.1.0",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "@web/dev-server": "^0.1.1",

package/src/interfaces/custom-theater-interface.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { MetadataResponse } from '@internetarchive/search-service';
 import { ModalManager } from '@internetarchive/modal-manager';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';

package/src/interfaces/menu-interfaces.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit-html';
+import { TemplateResult } from 'lit';
 import { MetadataResponse } from '@internetarchive/search-service';
 
 export type MenuId = string;

package/src/item-navigator.ts

@@ -2,14 +2,12 @@ import {
   css,
   html,
   LitElement,
-  customElement,
-  property,
-  state,
-  query,
   PropertyValues,
   CSSResult,
-} from 'lit-element';
-import { nothing, TemplateResult } from 'lit-html';
+  TemplateResult,
+  nothing,
+} from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
 import { MetadataResponse } from '@internetarchive/search-service';
 import {
   SharedResizeObserver,
@@ -148,12 +146,6 @@ export class ItemNavigator
     return this.viewportInFullscreen ? 'Internet Archive' : '';
   }
 
-  get readerHeightStyle(): string {
-    const calcFSHeight = `calc(100% - ${this.headerSlot?.offsetHeight || 0}px)`;
-
-    return this.headerSlot?.offsetHeight > 0 ? `height: ${calcFSHeight}` : '';
-  }
-
   get loadingArea() {
     return html`
       <div class="loading-area">
@@ -177,13 +169,16 @@ export class ItemNavigator
 
   render(): TemplateResult {
     const displayReaderClass = this.loaded ? '' : 'hidden';
+    const headerHeight =
+      (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;
     return html`
       <div id="frame" class=${this.menuClass}>
         <slot
           name="header"
+          style=${`height: ${headerHeight}px`}
           @slotchange=${(e: Event) => this.slotChange(e, 'header')}
         ></slot>
-        <div class="menu-and-reader" style=${this.readerHeightStyle}>
+        <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
           <div id="reader" class=${displayReaderClass}>
             ${this.renderViewport}
@@ -211,7 +206,6 @@ export class ItemNavigator
       <div slot="main" style=${slotVisibility}>
         <slot
           name="main"
-          style=${this.readerHeightStyle}
           @slotchange=${(e: Event) => this.slotChange(e, 'main')}
         ></slot>
       </div>
@@ -342,7 +336,9 @@ export class ItemNavigator
 
   /** Misc Render */
   get menuClass(): string {
-    const drawerState = this.menuOpened ? 'open' : '';
+    const hasMenuOrShortcuts =
+      this.menuContents?.length || this.menuShortcuts?.length;
+    const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
     const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
     return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
   }
@@ -358,8 +354,6 @@ export class ItemNavigator
       :host,
       #frame,
       .menu-and-reader {
-        min-height: inherit;
-        height: inherit;
         position: relative;
         overflow: hidden;
         display: block;
@@ -367,7 +361,6 @@ export class ItemNavigator
 
       :host,
       #frame,
-      .menu-and-reader,
       .loading-area,
       .loading-view {
         min-height: inherit;
@@ -376,7 +369,6 @@ export class ItemNavigator
 
       slot {
         display: block;
-        overflow: hidden;
         width: 100%;
       }
 
@@ -388,6 +380,8 @@ export class ItemNavigator
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
+        display: flex;
+        flex-direction: column;
       }
 
       #frame.fullscreen {
@@ -400,18 +394,23 @@ export class ItemNavigator
       }
 
       .loading-view {
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
       }
 
+      .loading-area {
+        width: 100%;
+      }
+
       ia-itemnav-loader {
         display: block;
         width: 100%;
       }
 
       .hidden {
-        display: none;
+        display: none !important;
       }
 
       button {
@@ -427,6 +426,8 @@ export class ItemNavigator
 
       .menu-and-reader {
         position: relative;
+        display: flex;
+        flex: 1;
       }
 
       nav button {
@@ -489,13 +490,13 @@ export class ItemNavigator
         z-index: 1;
         transform: translateX(0);
         width: 100%;
-        height: 100%;
+        display: flex;
       }
 
       #reader > * {
         width: 100%;
         display: flex;
-        height: 100%;
+        flex: 1;
       }
 
       .open.overlay #reader {
@@ -509,8 +510,8 @@ export class ItemNavigator
       }
 
       .open.shift #reader {
-        width: calc(100% - var(--menuWidth));
-        float: right;
+        width: calc(100% - ${subnavWidth});
+        margin-left: ${subnavWidth};
         transition: ${transitionEffect};
       }
     `;

package/src/loader.ts

@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
-import { css, html, LitElement, customElement } from 'lit-element';
-import { svg, nothing } from 'lit-html';
+import { css, html, LitElement, svg, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
 @customElement('ia-itemnav-loader')
 export class IAItemNavLoader extends LitElement {

package/src/no-theater-available.ts

@@ -1,13 +1,12 @@
 import {
   LitElement,
-  customElement,
-  property,
   html,
   TemplateResult,
   PropertyValues,
   CSSResult,
   css,
-} from 'lit-element';
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 
 @customElement('ia-no-theater-available')
 export class IANoTheaterAvailable extends LitElement {