@internetarchive/ia-item-navigator 1.0.4-a1 → 1.0.4

package/dist/src/menu-slider/ia-menu-slider.d.ts

@@ -1,30 +1,30 @@
-import { LitElement } from 'lit';
-import '@internetarchive/icon-collapse-sidebar';
-import './menu-button';
-export declare class IaMenuSlider extends LitElement {
-    static get styles(): import("lit").CSSResult;
-    menus: never[];
-    open: boolean;
-    manuallyHandleClose: boolean;
-    selectedMenu: string;
-    selectedMenuAction: symbol;
-    animateMenuOpen: boolean;
-    updated(): void;
-    /**
-     * Event handler, captures state of selected menu
-     */
-    setSelectedMenu({ detail }: CustomEvent): void;
-    /**
-     * closes menu drawer
-     */
-    closeMenu(): void;
-    get selectedMenuDetails(): undefined;
-    get selectedMenuComponent(): any;
-    get sliderDetailsClass(): string;
-    get selectedMenuClass(): "" | "open";
-    get menuItems(): import("lit-html").TemplateResult<1>[];
-    get renderMenuHeader(): import("lit-html").TemplateResult<1>;
-    get closeButton(): import("lit-html").TemplateResult<1>;
-    /** @inheritdoc */
-    render(): import("lit-html").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import '@internetarchive/icon-collapse-sidebar';
+import './menu-button';
+export declare class IaMenuSlider extends LitElement {
+    static get styles(): import("lit").CSSResult;
+    menus: never[];
+    open: boolean;
+    manuallyHandleClose: boolean;
+    selectedMenu: string;
+    selectedMenuAction: symbol;
+    animateMenuOpen: boolean;
+    updated(): void;
+    /**
+     * Event handler, captures state of selected menu
+     */
+    setSelectedMenu({ detail }: CustomEvent): void;
+    /**
+     * closes menu drawer
+     */
+    closeMenu(): void;
+    get selectedMenuDetails(): undefined;
+    get selectedMenuComponent(): any;
+    get sliderDetailsClass(): string;
+    get selectedMenuClass(): "" | "open";
+    get menuItems(): import("lit-html").TemplateResult<1>[];
+    get renderMenuHeader(): import("lit-html").TemplateResult<1>;
+    get closeButton(): import("lit-html").TemplateResult<1>;
+    /** @inheritdoc */
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/menu-slider/ia-menu-slider.js

@@ -1,75 +1,75 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import menuSliderCSS from './styles/menu-slider';
-import '@internetarchive/icon-collapse-sidebar';
-import './menu-button';
-const sliderEvents = {
-    closeDrawer: 'menuSliderClosed',
-};
-let IaMenuSlider = class IaMenuSlider extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.menus = [];
-        this.open = false;
-        this.manuallyHandleClose = false;
-        this.selectedMenu = '';
-        this.selectedMenuAction = nothing;
-        this.animateMenuOpen = false;
-    }
-    static get styles() {
-        return menuSliderCSS;
-    }
-    updated() {
-        const { actionButton } = this.selectedMenuDetails || {};
-        const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
-        if (actionButtonHasChanged) {
-            this.selectedMenuAction = actionButton || nothing;
-        }
-    }
-    /**
-     * Event handler, captures state of selected menu
-     */
-    setSelectedMenu({ detail }) {
-        const { id } = detail;
-        this.selectedMenu = this.selectedMenu === id ? '' : id;
-        const { actionButton } = this.selectedMenuDetails || {};
-        this.selectedMenuAction = actionButton || nothing;
-    }
-    /**
-     * closes menu drawer
-     */
-    closeMenu() {
-        if (!this.manuallyHandleClose) {
-            this.open = false;
-        }
-        const { closeDrawer } = sliderEvents;
-        const drawerClosed = new CustomEvent(closeDrawer, {
-            detail: this.selectedMenuDetails,
-        });
-        this.dispatchEvent(drawerClosed);
-    }
-    get selectedMenuDetails() {
-        const selectedMenu = this.menus.find(menu => menu.id === this.selectedMenu);
-        return selectedMenu;
-    }
-    get selectedMenuComponent() {
-        var _a;
-        const menuItem = this.selectedMenuDetails;
-        return menuItem && ((_a = menuItem) === null || _a === void 0 ? void 0 : _a.component)
-            ? menuItem.component
-            : html ``;
-    }
-    /* render */
-    get sliderDetailsClass() {
-        const animate = this.animateMenuOpen ? 'animate' : '';
-        const state = this.open ? 'open' : '';
-        return `${animate} ${state}`;
-    }
-    get selectedMenuClass() {
-        return this.selectedMenu ? 'open' : '';
-    }
-    get menuItems() {
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import menuSliderCSS from './styles/menu-slider';
+import '@internetarchive/icon-collapse-sidebar';
+import './menu-button';
+const sliderEvents = {
+    closeDrawer: 'menuSliderClosed',
+};
+let IaMenuSlider = class IaMenuSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.menus = [];
+        this.open = false;
+        this.manuallyHandleClose = false;
+        this.selectedMenu = '';
+        this.selectedMenuAction = nothing;
+        this.animateMenuOpen = false;
+    }
+    static get styles() {
+        return menuSliderCSS;
+    }
+    updated() {
+        const { actionButton } = this.selectedMenuDetails || {};
+        const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
+        if (actionButtonHasChanged) {
+            this.selectedMenuAction = actionButton || nothing;
+        }
+    }
+    /**
+     * Event handler, captures state of selected menu
+     */
+    setSelectedMenu({ detail }) {
+        const { id } = detail;
+        this.selectedMenu = this.selectedMenu === id ? '' : id;
+        const { actionButton } = this.selectedMenuDetails || {};
+        this.selectedMenuAction = actionButton || nothing;
+    }
+    /**
+     * closes menu drawer
+     */
+    closeMenu() {
+        if (!this.manuallyHandleClose) {
+            this.open = false;
+        }
+        const { closeDrawer } = sliderEvents;
+        const drawerClosed = new CustomEvent(closeDrawer, {
+            detail: this.selectedMenuDetails,
+        });
+        this.dispatchEvent(drawerClosed);
+    }
+    get selectedMenuDetails() {
+        const selectedMenu = this.menus.find(menu => menu.id === this.selectedMenu);
+        return selectedMenu;
+    }
+    get selectedMenuComponent() {
+        var _a;
+        const menuItem = this.selectedMenuDetails;
+        return menuItem && ((_a = menuItem) === null || _a === void 0 ? void 0 : _a.component)
+            ? menuItem.component
+            : html ``;
+    }
+    /* render */
+    get sliderDetailsClass() {
+        const animate = this.animateMenuOpen ? 'animate' : '';
+        const state = this.open ? 'open' : '';
+        return `${animate} ${state}`;
+    }
+    get selectedMenuClass() {
+        return this.selectedMenu ? 'open' : '';
+    }
+    get menuItems() {
         return this.menus.map((menu) => html `
           <li>
             <menu-button
@@ -83,14 +83,14 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
               .href=${menu.href}
             ></menu-button>
           </li>
-        `);
-    }
-    get renderMenuHeader() {
-        const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};
-        const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
-        const actionBlock = this.selectedMenuAction
-            ? html `<span class="custom-action">${this.selectedMenuAction}</span>`
-            : nothing;
+        `);
+    }
+    get renderMenuHeader() {
+        const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};
+        const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
+        const actionBlock = this.selectedMenuAction
+            ? html `<span class="custom-action">${this.selectedMenuAction}</span>`
+            : nothing;
         return html `
       <header class="${headerClass}">
         <div class="details">
@@ -99,9 +99,9 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
         </div>
         ${actionBlock} ${this.closeButton}
       </header>
-    `;
-    }
-    get closeButton() {
+    `;
+    }
+    get closeButton() {
         return html `
       <button
         class="close"
@@ -110,10 +110,10 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
       >
         <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
       </button>
-    `;
-    }
-    /** @inheritdoc */
-    render() {
+    `;
+    }
+    /** @inheritdoc */
+    render() {
         return html `
       <div class="main">
         <div class="menu ${this.sliderDetailsClass}">
@@ -132,29 +132,29 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
           </div>
         </div>
       </div>
-    `;
-    }
-};
-__decorate([
-    property({ type: Array })
-], IaMenuSlider.prototype, "menus", void 0);
-__decorate([
-    property({ type: Boolean })
-], IaMenuSlider.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], IaMenuSlider.prototype, "manuallyHandleClose", void 0);
-__decorate([
-    property({ type: String })
-], IaMenuSlider.prototype, "selectedMenu", void 0);
-__decorate([
-    property({ type: Object })
-], IaMenuSlider.prototype, "selectedMenuAction", void 0);
-__decorate([
-    property({ type: Boolean })
-], IaMenuSlider.prototype, "animateMenuOpen", void 0);
-IaMenuSlider = __decorate([
-    customElement('ia-menu-slider')
-], IaMenuSlider);
-export { IaMenuSlider };
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], IaMenuSlider.prototype, "menus", void 0);
+__decorate([
+    property({ type: Boolean })
+], IaMenuSlider.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], IaMenuSlider.prototype, "manuallyHandleClose", void 0);
+__decorate([
+    property({ type: String })
+], IaMenuSlider.prototype, "selectedMenu", void 0);
+__decorate([
+    property({ type: Object })
+], IaMenuSlider.prototype, "selectedMenuAction", void 0);
+__decorate([
+    property({ type: Boolean })
+], IaMenuSlider.prototype, "animateMenuOpen", void 0);
+IaMenuSlider = __decorate([
+    customElement('ia-menu-slider')
+], IaMenuSlider);
+export { IaMenuSlider };
 //# sourceMappingURL=ia-menu-slider.js.map

package/dist/src/menu-slider/menu-button.d.ts

@@ -1,19 +1,19 @@
-import { LitElement } from 'lit';
-export declare class MenuButton extends LitElement {
-    static get styles(): import("lit").CSSResult;
-    icon: string;
-    href: string;
-    label: string;
-    menuDetails: string;
-    id: string;
-    selected: boolean;
-    followable: boolean;
-    onClick(e: Event): void;
-    dispatchMenuTypeSelectedEvent(): void;
-    get buttonClass(): "" | "selected";
-    get iconClass(): "active" | "";
-    get menuItem(): import("lit-html").TemplateResult<1>;
-    get linkButton(): import("lit-html").TemplateResult<1>;
-    get clickButton(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+export declare class MenuButton extends LitElement {
+    static get styles(): import("lit").CSSResult;
+    icon: string;
+    href: string;
+    label: string;
+    menuDetails: string;
+    id: string;
+    selected: boolean;
+    followable: boolean;
+    onClick(e: Event): void;
+    dispatchMenuTypeSelectedEvent(): void;
+    get buttonClass(): "" | "selected";
+    get iconClass(): "active" | "";
+    get menuItem(): import("lit-html").TemplateResult<1>;
+    get linkButton(): import("lit-html").TemplateResult<1>;
+    get clickButton(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/menu-slider/menu-button.js

@@ -1,48 +1,48 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import menuButtonCSS from './styles/menu-button';
-let MenuButton = class MenuButton extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.icon = '';
-        this.href = '';
-        this.label = '';
-        this.menuDetails = '';
-        this.id = '';
-        this.selected = false;
-        this.followable = false;
-    }
-    static get styles() {
-        return menuButtonCSS;
-    }
-    onClick(e) {
-        e.preventDefault();
-        this.dispatchMenuTypeSelectedEvent();
-    }
-    dispatchMenuTypeSelectedEvent() {
-        this.dispatchEvent(new CustomEvent('menuTypeSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                id: this.id,
-            },
-        }));
-    }
-    get buttonClass() {
-        return this.selected ? 'selected' : '';
-    }
-    get iconClass() {
-        return this.selected ? 'active' : '';
-    }
-    get menuItem() {
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import menuButtonCSS from './styles/menu-button';
+let MenuButton = class MenuButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = '';
+        this.href = '';
+        this.label = '';
+        this.menuDetails = '';
+        this.id = '';
+        this.selected = false;
+        this.followable = false;
+    }
+    static get styles() {
+        return menuButtonCSS;
+    }
+    onClick(e) {
+        e.preventDefault();
+        this.dispatchMenuTypeSelectedEvent();
+    }
+    dispatchMenuTypeSelectedEvent() {
+        this.dispatchEvent(new CustomEvent('menuTypeSelected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                id: this.id,
+            },
+        }));
+    }
+    get buttonClass() {
+        return this.selected ? 'selected' : '';
+    }
+    get iconClass() {
+        return this.selected ? 'active' : '';
+    }
+    get menuItem() {
         return html `
       <span class="icon ${this.iconClass}"> ${this.icon} </span>
       <span class="label">${this.label}</span>
       <span class="menu-details">${this.menuDetails}</span>
-    `;
-    }
-    get linkButton() {
+    `;
+    }
+    get linkButton() {
         return html `
       <a
         href="${this.href}"
@@ -50,42 +50,42 @@ let MenuButton = class MenuButton extends LitElement {
         @click=${this.followable ? undefined : this.onClick}
         >${this.menuItem}</a
       >
-    `;
-    }
-    get clickButton() {
+    `;
+    }
+    get clickButton() {
         return html `
       <button class="menu-item ${this.buttonClass}" @click=${this.onClick}>
         ${this.menuItem}
       </button>
-    `;
-    }
-    render() {
-        return this.href ? this.linkButton : this.clickButton;
-    }
-};
-__decorate([
-    property({ type: String })
-], MenuButton.prototype, "icon", void 0);
-__decorate([
-    property({ type: String })
-], MenuButton.prototype, "href", void 0);
-__decorate([
-    property({ type: String })
-], MenuButton.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], MenuButton.prototype, "menuDetails", void 0);
-__decorate([
-    property({ type: String })
-], MenuButton.prototype, "id", void 0);
-__decorate([
-    property({ type: Boolean })
-], MenuButton.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean })
-], MenuButton.prototype, "followable", void 0);
-MenuButton = __decorate([
-    customElement('menu-button')
-], MenuButton);
-export { MenuButton };
+    `;
+    }
+    render() {
+        return this.href ? this.linkButton : this.clickButton;
+    }
+};
+__decorate([
+    property({ type: String })
+], MenuButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], MenuButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], MenuButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], MenuButton.prototype, "menuDetails", void 0);
+__decorate([
+    property({ type: String })
+], MenuButton.prototype, "id", void 0);
+__decorate([
+    property({ type: Boolean })
+], MenuButton.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], MenuButton.prototype, "followable", void 0);
+MenuButton = __decorate([
+    customElement('menu-button')
+], MenuButton);
+export { MenuButton };
 //# sourceMappingURL=menu-button.js.map

package/dist/src/menu-slider/styles/menu-button.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/src/menu-slider/styles/menu-button.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'lit';
 export default css `
   a {
     display: inline-block;
@@ -75,5 +75,5 @@ export default css `
   .icon.active .fill-color {
     fill: #fff;
   }
-`;
+`;
 //# sourceMappingURL=menu-button.js.map

package/dist/src/menu-slider/styles/menu-slider.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/src/menu-slider/styles/menu-slider.js

@@ -1,7 +1,7 @@
-import { css } from 'lit';
-const menuButtonWidth = css `42px`;
-const sliderWidth = css `var(--menuWidth, 320px)`;
-const transitionTiming = css `var(--animationTiming, 200ms)`;
+import { css } from 'lit';
+const menuButtonWidth = css `42px`;
+const sliderWidth = css `var(--menuWidth, 320px)`;
+const transitionTiming = css `var(--animationTiming, 200ms)`;
 export default css `
   .main {
     overflow: hidden;
@@ -92,6 +92,8 @@ export default css `
     border-right: 0.2rem solid;
     border-color: var(--subpanelRightBorderColor);
     padding: 0.5rem 0 0 0.5rem;
+    display: flex;
+    flex-direction: column;
   }
 
   .open {
@@ -108,22 +110,9 @@ export default css `
     margin-bottom: 0.2rem;
   }
 
-  .content section {
-    height: 100%;
-    position: relative;
-    width: 100%;
-  }
-
-  .content .selected-menu {
+  .content > section {
     overflow: auto;
-    height: inherit;
-    position: relative;
-  }
-
-  .content .selected-menu > * {
-    display: block;
-    padding-bottom: 3rem;
-    position: relative;
+    overscroll-behavior: contain;
   }
-`;
+`;
 //# sourceMappingURL=menu-slider.js.map

package/dist/src/menu-slider/styles/menu-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4DhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuButtonWidth = css`42px`;\nconst sliderWidth = css`var(--menuWidth, 320px)`;\nconst transitionTiming = css`var(--animationTiming, 200ms)`;\n\nexport default css`\n  .main {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  .animate {\n    transition: transform ${transitionTiming} ease-out;\n  }\n\n  .menu {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: ${sliderWidth};\n    padding: 0.5rem 0.5rem 0 0;\n    box-sizing: border-box;\n    font-size: 1.4rem;\n    color: var(--primaryTextColor);\n    background: var(--menuSliderBg);\n    transform: translateX(calc(${sliderWidth} * -1));\n  }\n\n  .menu > button.close {\n    right: 0.7rem;\n  }\n\n  button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header {\n    margin: 0 0 0.5rem 0;\n  }\n\n  header * {\n    margin: 0;\n    display: inline-block;\n  }\n  header button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header.with-secondary-action .details {\n    width: 80%;\n  }\n\n  header .details {\n    font-weight: bold;\n    width: 88%;\n  }\n\n  header .custom-action > *,\n  button.close {\n    padding: 0;\n    background-color: transparent;\n    border: 0;\n    --iconWidth: var(--menuSliderHeaderIconWidth);\n    --iconHeight: var(--menuSliderHeaderIconHeight);\n  }\n\n  header .custom-action,\n  button.close {\n    position: absolute;\n  }\n  button.close {\n    right: 0.5rem;\n  }\n\n  button.close * {\n    float: right;\n  }\n\n  .content {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: ${menuButtonWidth};\n    z-index: 1;\n    transform: translateX(calc(${sliderWidth} * -1));\n    transition: transform ${transitionTiming} ease-out;\n    background: var(--activeButtonBg);\n    border-right: 0.2rem solid;\n    border-color: var(--subpanelRightBorderColor);\n    padding: 0.5rem 0 0 0.5rem;\n  }\n\n  .open {\n    transform: translateX(0);\n  }\n\n  .menu-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    background: var(--menuSliderBg);\n  }\n  .menu-list li {\n    margin-bottom: 0.2rem;\n  }\n\n  .content section {\n    height: 100%;\n    position: relative;\n    width: 100%;\n  }\n\n  .content .selected-menu {\n    overflow: auto;\n    height: inherit;\n    position: relative;\n  }\n\n  .content .selected-menu > * {\n    display: block;\n    padding-bottom: 3rem;\n    position: relative;\n  }\n`;\n"]}
+{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4DhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuButtonWidth = css`42px`;\nconst sliderWidth = css`var(--menuWidth, 320px)`;\nconst transitionTiming = css`var(--animationTiming, 200ms)`;\n\nexport default css`\n  .main {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  .animate {\n    transition: transform ${transitionTiming} ease-out;\n  }\n\n  .menu {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: ${sliderWidth};\n    padding: 0.5rem 0.5rem 0 0;\n    box-sizing: border-box;\n    font-size: 1.4rem;\n    color: var(--primaryTextColor);\n    background: var(--menuSliderBg);\n    transform: translateX(calc(${sliderWidth} * -1));\n  }\n\n  .menu > button.close {\n    right: 0.7rem;\n  }\n\n  button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header {\n    margin: 0 0 0.5rem 0;\n  }\n\n  header * {\n    margin: 0;\n    display: inline-block;\n  }\n  header button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header.with-secondary-action .details {\n    width: 80%;\n  }\n\n  header .details {\n    font-weight: bold;\n    width: 88%;\n  }\n\n  header .custom-action > *,\n  button.close {\n    padding: 0;\n    background-color: transparent;\n    border: 0;\n    --iconWidth: var(--menuSliderHeaderIconWidth);\n    --iconHeight: var(--menuSliderHeaderIconHeight);\n  }\n\n  header .custom-action,\n  button.close {\n    position: absolute;\n  }\n  button.close {\n    right: 0.5rem;\n  }\n\n  button.close * {\n    float: right;\n  }\n\n  .content {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: ${menuButtonWidth};\n    z-index: 1;\n    transform: translateX(calc(${sliderWidth} * -1));\n    transition: transform ${transitionTiming} ease-out;\n    background: var(--activeButtonBg);\n    border-right: 0.2rem solid;\n    border-color: var(--subpanelRightBorderColor);\n    padding: 0.5rem 0 0 0.5rem;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .open {\n    transform: translateX(0);\n  }\n\n  .menu-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    background: var(--menuSliderBg);\n  }\n  .menu-list li {\n    margin-bottom: 0.2rem;\n  }\n\n  .content > section {\n    overflow: auto;\n    overscroll-behavior: contain;\n  }\n`;\n"]}

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

@@ -1,9 +1,9 @@
-import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
-export declare class IANoTheaterAvailable extends LitElement {
-    identifier?: string;
-    emitLoaded(): void;
-    updated(changed: PropertyValues): void;
-    get downloadUrl(): string;
-    render(): TemplateResult;
-    static get styles(): CSSResult;
-}
+import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
+export declare class IANoTheaterAvailable extends LitElement {
+    identifier?: string;
+    emitLoaded(): void;
+    updated(changed: PropertyValues): void;
+    get downloadUrl(): string;
+    render(): TemplateResult;
+    static get styles(): CSSResult;
+}