@internetarchive/elements 0.2.14-webdev-8969.0 → 0.3.0

package/dist/src/elements/ia-item-navigator/ia-item-navigator.js

@@ -0,0 +1,588 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import themeStyles from '../../themes/theme-styles.js';
+import { ellipsesIcon } from './icons.js';
+import './ia-itemnav-menu-slider.js';
+import './ia-itemnav-no-theater-available.js';
+/**
+ * A fullscreen-capable frame that hosts an Archive.org item's theater. The
+ * consumer projects a header bar and the theater itself into the `header` and
+ * `main` slots; a collapsible left drawer (`ia-itemnav-menu-slider`) is driven by a
+ * data array of menu providers, and a minimized rail shows shortcut icons.
+ *
+ * The navigator is a shell — it does not know how to render any particular
+ * viewer. Menu panel bodies are opaque `TemplateResult`s supplied by the
+ * consumer via `menuContents`.
+ */
+let IAItemNavigator = class IAItemNavigator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.viewAvailable = true;
+        this.baseHost = 'archive.org';
+        this.signedIn = false;
+        this.menuContents = [];
+        this.menuShortcuts = [];
+        this.viewportInFullscreen = null;
+        this.menuOpened = false;
+        /**
+         * Whether the slotted theater is ready. While false the reader stays
+         * hidden and the frame is empty.
+         *
+         * The navigator used to fill that gap with its own spinner, but a shell
+         * shouldn't decide what loading looks like — and its glyph and fullscreen
+         * caption were branding a consumer couldn't override. An indicator returns
+         * once WEBDEV-8951 moves the shared status indicators into elements, so the
+         * navigator can use that one instead of carrying its own.
+         */
+        this.loaded = false;
+        /**
+         * Set for the render where the drawer opens straight to a panel, so the
+         * panel holds still and rides in. Every other path clears it, rather
+         * than waiting for the drawer's `transitionend` — that never fires when
+         * animations are disabled, which would strand the flag on.
+         */
+        this.drawerEntering = false;
+    }
+    slotChange(e, type) {
+        const slottedContent = e.target.assignedNodes()?.[0];
+        this.dispatchEvent(new CustomEvent('slotChange', {
+            detail: { slot: slottedContent, type },
+        }));
+        this.requestUpdate();
+    }
+    render() {
+        const displayReaderClass = this.loaded ? '' : 'hidden';
+        return html `
+      <div id="frame" class=${this.menuClass}>
+        <slot
+          name="header"
+          @slotchange=${(e) => this.slotChange(e, 'header')}
+        ></slot>
+        <div class="menu-and-reader">
+          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
+          <div id="reader" class=${displayReaderClass}>
+            ${this.renderViewport}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    get noTheaterView() {
+        return html `<ia-itemnav-no-theater-available
+      .identifier=${this.identifier}
+      @loadingStateUpdated=${this.loadingStateUpdated}
+    ></ia-itemnav-no-theater-available>`;
+    }
+    get renderViewport() {
+        if (!this.viewAvailable) {
+            return this.noTheaterView;
+        }
+        const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
+        return html `
+      <div slot="main" style=${slotVisibility}>
+        <slot
+          name="main"
+          @slotchange=${(e) => this.slotChange(e, 'main')}
+        ></slot>
+      </div>
+    `;
+    }
+    loadingStateUpdated(e) {
+        const { loaded } = e.detail;
+        this.loaded = loaded ?? false;
+    }
+    /** Fullscreen Management */
+    manageViewportFullscreen(e) {
+        const fullscreenStatus = !!e.detail.isFullScreen;
+        this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
+        const event = new CustomEvent('fullscreenToggled', {
+            detail: e.detail,
+        });
+        this.dispatchEvent(event);
+    }
+    /** End Fullscreen Management */
+    /** Side menu */
+    get shouldRenderMenu() {
+        return !!this.menuContents?.length;
+    }
+    toggleMenu(forceValue = undefined) {
+        this.drawerEntering = false;
+        this.menuOpened = forceValue !== undefined ? forceValue : !this.menuOpened;
+        this.moveFocusForDrawer();
+    }
+    /**
+     * Opening the drawer moves focus into it; closing hands focus back to the
+     * toggle. Without this, opening from the shortcut rail would leave focus on
+     * a button that is about to be hidden, dropping it to the document.
+     */
+    moveFocusForDrawer() {
+        this.updateComplete.then(() => {
+            if (this.menuOpened) {
+                this.menuSlider?.focusDrawer();
+            }
+            else {
+                this.toggleMenuButton?.focus();
+            }
+        });
+    }
+    /**
+     * Closing the drawer also closes whatever panel was open inside it, so the
+     * two can't disagree and a stale panel can't reappear on the next open.
+     */
+    closeMenu() {
+        this.openMenu = undefined;
+        this.toggleMenu(false);
+    }
+    setOpenMenu(e) {
+        this.drawerEntering = false;
+        const { id } = e.detail;
+        this.openMenu = id !== this.openMenu ? id : undefined;
+    }
+    /**
+     * Clears the open channel when the slider closes its sub-panel, without
+     * closing the drawer. Keeps `openMenu` in sync with the slider so the same
+     * channel can be reopened afterwards.
+     */
+    closeSidePanel() {
+        this.drawerEntering = false;
+        this.openMenu = undefined;
+    }
+    setMenuContents(e) {
+        const updatedContents = [...e.detail];
+        this.menuContents = updatedContents;
+    }
+    setMenuShortcuts(e) {
+        this.menuShortcuts = [...e.detail];
+    }
+    /** Toggles Side Menu & Sets viewable subpanel  */
+    manageSideMenuEvents(e) {
+        const { menuId, action } = e.detail;
+        if (!menuId) {
+            return;
+        }
+        if (action === 'open') {
+            this.openShortcut(menuId);
+        }
+        else if (action === 'toggle') {
+            this.openMenu = menuId;
+            this.toggleMenu();
+        }
+    }
+    get menuToggleButton() {
+        const label = this.menuOpened ? 'Close side panel' : 'Open side panel';
+        return html `
+      <button
+        class="toggle-menu"
+        @click=${() => this.toggleMenu()}
+        title=${label}
+        aria-label=${label}
+        aria-expanded=${this.menuOpened}
+        aria-controls="menu"
+      >
+        ${ellipsesIcon}
+      </button>
+    `;
+    }
+    get selectedMenuId() {
+        return this.openMenu || '';
+    }
+    get renderSideMenu() {
+        return html `
+      <nav aria-label="Item navigation">
+        <div
+          class="minimized ${classMap({ hidden: this.menuOpened })}"
+          part="minimized-menu"
+        >
+          ${this.shortcuts} ${this.menuToggleButton}
+        </div>
+        <!-- Closed drawers are inert, so what is off-screen is also out of
+             the tab order and the accessibility tree. -->
+        <div
+          id="menu"
+          role="group"
+          aria-label="Item navigation menu"
+          ?inert=${!this.menuOpened}
+        >
+          <ia-itemnav-menu-slider
+            .menus=${this.menuContents}
+            .selectedMenu=${this.selectedMenuId}
+            @menuTypeSelected=${this.setOpenMenu}
+            @menuPanelClosed=${this.closeSidePanel}
+            @menuSliderClosed=${this.closeMenu}
+          ></ia-itemnav-menu-slider>
+        </div>
+      </nav>
+    `;
+    }
+    /** End Side menu */
+    /** Menu Shortcuts */
+    openShortcut(selectedMenuId = '') {
+        // Opening straight to a panel is one movement: the drawer carries the
+        // panel in, so the panel must not also slide (see `.drawer-entering`).
+        // Only when the drawer is actually closed — switching shortcuts while it
+        // is already open should still animate the panel across.
+        this.drawerEntering = !this.menuOpened;
+        this.openMenu = selectedMenuId;
+        this.menuOpened = true;
+        // The rail hides itself once the drawer opens, taking the focused
+        // shortcut with it, so focus has to be placed deliberately.
+        this.moveFocusForDrawer();
+    }
+    get shortcuts() {
+        const shortcuts = this.menuShortcuts.map(({ icon, id, label }) => {
+            if (id === 'fullscreen') {
+                return html `${icon}`;
+            }
+            return html `
+        <li>
+          <button
+            class="shortcut ${id}"
+            @click=${() => this.openShortcut(id)}
+            title=${label}
+            aria-label=${label}
+            aria-expanded=${this.menuOpened && this.openMenu === id}
+          >
+            ${icon}
+          </button>
+        </li>
+      `;
+        });
+        return html `<ul class="shortcuts" role="list">
+      ${shortcuts}
+    </ul>`;
+    }
+    /** End Menu Shortcuts */
+    /** Misc Render */
+    get menuClass() {
+        const hasMenuOrShortcuts = this.menuContents?.length || this.menuShortcuts?.length;
+        const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
+        const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
+        // When the side menu renders, the minimized rail floats over the left edge;
+        // `has-menu` lets the reader reserve its width so the theater isn't covered.
+        const railState = this.shouldRenderMenu ? 'has-menu' : '';
+        const enteringState = this.drawerEntering ? 'drawer-entering' : '';
+        return `${drawerState} ${fullscreenState} ${railState} ${enteringState}`;
+    }
+    static get styles() {
+        const subnavWidth = css `var(--item-navigator-menu-width--)`;
+        const transitionTiming = css `var(--item-navigator-animation-timing--)`;
+        const transitionEffect = css `transform ${transitionTiming} ease-out`;
+        const menuMargin = css `var(--item-navigator-menu-margin--)`;
+        const theaterBg = css `var(--item-navigator-theater-bg-color--)`;
+        const iconSize = css `var(--item-navigator-icon-size--)`;
+        return [
+            themeStyles,
+            css `
+        :host {
+          --item-navigator-menu-width--: var(
+            --item-navigator-menu-width,
+            320px
+          );
+          --item-navigator-animation-timing--: var(
+            --item-navigator-animation-timing,
+            200ms
+          );
+          --item-navigator-menu-margin--: var(
+            --item-navigator-menu-margin,
+            42px
+          );
+          --item-navigator-theater-bg-color--: var(
+            --item-navigator-theater-bg-color,
+            #000
+          );
+          /* Every glyph is square, so one knob sizes both axes. */
+          --item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);
+          /* Icons follow the adjustable text color by default. */
+          --item-navigator-icon-color--: var(
+            --item-navigator-icon-color,
+            var(--item-navigator-text-color, var(--true-white))
+          );
+
+          /*
+           * The component's internal sizing is expressed in em against this
+           * base (10px matches petabox's base font size, which the upstream
+           * demo set on the document root). Anchoring it here makes the
+           * navigator self-contained — its scale no longer depends on the
+           * consumer's root font-size. Override to rescale everything.
+           */
+          --item-navigator-base-font-size--: var(
+            --item-navigator-base-font-size,
+            10px
+          );
+          font-size: var(--item-navigator-base-font-size--);
+        }
+
+        :host,
+        #frame,
+        .menu-and-reader {
+          position: relative;
+          overflow: hidden;
+          display: block;
+        }
+
+        :host,
+        #frame {
+          min-height: inherit;
+          height: inherit;
+        }
+
+        slot {
+          display: block;
+          width: 100%;
+        }
+
+        slot * {
+          display: block;
+          height: inherit;
+        }
+
+        #frame {
+          background-color: ${theaterBg};
+          color-scheme: dark;
+          display: flex;
+          flex-direction: column;
+          /*
+           * The overlay/shift breakpoint keys off the navigator's own width,
+           * not the viewport's, so the frame is the query container. This
+           * replaces a host-injected resize observer that set the class from
+           * JS: layout drives it now, so there is nothing to inject, register
+           * or tear down. The inline-size type contains width only, leaving the
+           * flex column's height behaviour alone.
+           */
+          container-type: inline-size;
+          container-name: navframe;
+        }
+
+        #frame.fullscreen {
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 9;
+          /*
+           * Override the inherited height/min-height from the base #frame rule:
+           * on a fixed element an explicit height wins over top/bottom, so the
+           * inset (0 on all sides) can't fill the viewport unless height is
+           * released back to auto.
+           */
+          height: auto;
+          min-height: 0;
+        }
+
+        .hidden {
+          display: none !important;
+        }
+
+        button {
+          /* Buttons don't inherit font-size from the UA stylesheet; inherit it
+             so em-sized icons resolve against the component's base, not the
+             browser's default button font-size. */
+          font: inherit;
+          cursor: pointer;
+          padding: 0;
+          border: 0;
+        }
+
+        .menu-and-reader {
+          position: relative;
+          display: flex;
+          flex: 1;
+        }
+
+        nav button {
+          background: none;
+        }
+
+        nav .minimized {
+          background: rgba(0, 0, 0, 0.7);
+          padding-top: 6px;
+          position: absolute;
+          width: ${menuMargin};
+          z-index: 2;
+          left: 0;
+          border-bottom-right-radius: 5%;
+        }
+
+        nav .minimized button {
+          margin-bottom: 0.2em;
+          margin: auto;
+          display: inline-flex;
+          vertical-align: middle;
+          align-items: center;
+          justify-content: center;
+          width: ${menuMargin};
+          height: ${menuMargin};
+        }
+
+        nav .minimized button > * {
+          /** Prevent the icon's SVG description from stealing tooltip message */
+          pointer-events: none;
+        }
+
+        nav .minimized button.toggle-menu > * {
+          border: 2px solid var(--item-navigator-icon-color--);
+          border-radius: ${iconSize};
+          width: ${iconSize};
+          height: ${iconSize};
+          margin: auto;
+        }
+
+        /* The rail is a list for assistive tech; strip the list chrome so it
+           still reads as a row of icons. */
+        .shortcuts,
+        .shortcuts li {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        .toggle-menu .ia-icon,
+        .shortcuts .ia-icon {
+          width: ${iconSize};
+          height: ${iconSize};
+        }
+
+        /* Our glyphs are masked spans: the mask supplies the shape, this
+           supplies the paint. */
+        span.ia-icon {
+          background-color: var(--item-navigator-icon-color--);
+        }
+
+        /* Host-supplied icons may still be inline svg, so keep theming those
+           the original way. */
+        .ia-icon .fill-color {
+          fill: var(--item-navigator-icon-color--);
+        }
+
+        #menu {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          z-index: 3;
+          overflow: hidden;
+          width: ${subnavWidth};
+          transform: translateX(calc(${subnavWidth} * -1));
+          transition: ${transitionEffect};
+        }
+
+        #reader {
+          position: relative;
+          z-index: 1;
+          transform: translateX(0);
+          width: 100%;
+          display: flex;
+          /*
+           * Ease the reader's size/position changes so the slotted theater
+           * glides in sync with the sliding drawer (shift mode) and settles
+           * smoothly on resize, rather than snapping. Overlay mode opts out
+           * below so the full-width theater tracks resizes instantly.
+           */
+          transition:
+            width ${transitionTiming} ease-out,
+            margin-left ${transitionTiming} ease-out,
+            transform ${transitionTiming} ease-out;
+        }
+
+        #reader > * {
+          width: 100%;
+          display: flex;
+          flex: 1;
+        }
+
+        /*
+         * The minimized rail floats over the frame's left edge while the drawer
+         * is closed, so pad the theater content by its width to avoid overlap.
+         * This lives on the reader's content (not the reader box) and isn't
+         * transitioned, so it snaps away on open — letting the reader box track
+         * the drawer's edge exactly during the shift, rather than trailing it.
+         */
+        .has-menu:not(.open) #reader > * {
+          box-sizing: border-box;
+          padding-left: ${menuMargin};
+        }
+
+        /* Opening straight to a panel is one movement. The panel is nested in
+           #menu, so its own slide would compose with the drawer's transform
+           and send it twice the distance in the same time — arriving late and
+           travelling at double speed. Holding it still lets the drawer carry
+           it in. */
+        .drawer-entering #menu {
+          --item-navigator-panel-transition--: none;
+        }
+
+        .open #menu {
+          width: ${subnavWidth};
+          transform: translateX(0);
+          transition: ${transitionEffect};
+        }
+
+        /* Shift: the drawer pushes the theater aside. */
+        .open #reader {
+          width: calc(100% - ${subnavWidth});
+          margin-left: ${subnavWidth};
+        }
+
+        /*
+         * Overlay: too narrow to give the drawer its own column, so it covers
+         * a full-width theater. The transition is dropped here so the theater
+         * tracks resizes instantly instead of easing behind them.
+         */
+        @container navframe (max-width: 600px) {
+          .open #reader {
+            width: 100%;
+            margin-left: 0;
+            transition: none;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IAItemNavigator.prototype, "identifier", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IAItemNavigator.prototype, "viewAvailable", void 0);
+__decorate([
+    property({ type: String })
+], IAItemNavigator.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAItemNavigator.prototype, "signedIn", void 0);
+__decorate([
+    property({ type: Array })
+], IAItemNavigator.prototype, "menuContents", void 0);
+__decorate([
+    property({ type: Array })
+], IAItemNavigator.prototype, "menuShortcuts", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], IAItemNavigator.prototype, "viewportInFullscreen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IAItemNavigator.prototype, "menuOpened", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], IAItemNavigator.prototype, "openMenu", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], IAItemNavigator.prototype, "loaded", void 0);
+__decorate([
+    state()
+], IAItemNavigator.prototype, "drawerEntering", void 0);
+__decorate([
+    query('ia-itemnav-menu-slider')
+], IAItemNavigator.prototype, "menuSlider", void 0);
+__decorate([
+    query('button.toggle-menu')
+], IAItemNavigator.prototype, "toggleMenuButton", void 0);
+IAItemNavigator = __decorate([
+    customElement('ia-item-navigator')
+], IAItemNavigator);
+export { IAItemNavigator };
+//# sourceMappingURL=ia-item-navigator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-item-navigator.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  nothing,\n  type CSSResultGroup,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport { ellipsesIcon } from './icons';\nimport './ia-itemnav-menu-slider';\nimport './ia-itemnav-no-theater-available';\nimport type { IAItemNavMenuSlider } from './ia-itemnav-menu-slider';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  LoadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\n\n/**\n * A fullscreen-capable frame that hosts an Archive.org item's theater. The\n * consumer projects a header bar and the theater itself into the `header` and\n * `main` slots; a collapsible left drawer (`ia-itemnav-menu-slider`) is driven by a\n * data array of menu providers, and a minimized rail shows shortcut icons.\n *\n * The navigator is a shell — it does not know how to render any particular\n * viewer. Menu panel bodies are opaque `TemplateResult`s supplied by the\n * consumer via `menuContents`.\n */\n@customElement('ia-item-navigator')\nexport class IAItemNavigator extends LitElement {\n  /** archive.org item identifier. */\n  @property({ type: String }) identifier?: string;\n\n  @property({ type: Boolean, reflect: true }) viewAvailable: boolean = true;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({ type: Boolean }) 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, reflect: true }) menuOpened = false;\n\n  @property({ type: String, reflect: true }) openMenu?: MenuId;\n\n  /**\n   * Whether the slotted theater is ready. While false the reader stays\n   * hidden and the frame is empty.\n   *\n   * The navigator used to fill that gap with its own spinner, but a shell\n   * shouldn't decide what loading looks like — and its glyph and fullscreen\n   * caption were branding a consumer couldn't override. An indicator returns\n   * once WEBDEV-8951 moves the shared status indicators into elements, so the\n   * navigator can use that one instead of carrying its own.\n   */\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded: boolean =\n    false;\n\n  /**\n   * Set for the render where the drawer opens straight to a panel, so the\n   * panel holds still and rides in. Every other path clears it, rather\n   * than waiting for the drawer's `transitionend` — that never fires when\n   * animations are disabled, which would strand the flag on.\n   */\n  @state() private drawerEntering = false;\n\n  @query('ia-itemnav-menu-slider') private menuSlider!: IAItemNavMenuSlider;\n\n  @query('button.toggle-menu') private toggleMenuButton!: HTMLButtonElement;\n\n  slotChange(e: Event, type: 'header' | 'main'): void {\n    const slottedContent = (\n      e.target as HTMLSlotElement\n    ).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\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <div id=\"reader\" class=${displayReaderClass}>\n            ${this.renderViewport}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView(): TemplateResult {\n    return html`<ia-itemnav-no-theater-available\n      .identifier=${this.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-itemnav-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 ?? false;\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(forceValue: boolean | undefined = undefined): void {\n    this.drawerEntering = false;\n    this.menuOpened = forceValue !== undefined ? forceValue : !this.menuOpened;\n    this.moveFocusForDrawer();\n  }\n\n  /**\n   * Opening the drawer moves focus into it; closing hands focus back to the\n   * toggle. Without this, opening from the shortcut rail would leave focus on\n   * a button that is about to be hidden, dropping it to the document.\n   */\n  private moveFocusForDrawer(): void {\n    this.updateComplete.then(() => {\n      if (this.menuOpened) {\n        this.menuSlider?.focusDrawer();\n      } else {\n        this.toggleMenuButton?.focus();\n      }\n    });\n  }\n\n  /**\n   * Closing the drawer also closes whatever panel was open inside it, so the\n   * two can't disagree and a stale panel can't reappear on the next open.\n   */\n  closeMenu(): void {\n    this.openMenu = undefined;\n    this.toggleMenu(false);\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    this.drawerEntering = false;\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  /**\n   * Clears the open channel when the slider closes its sub-panel, without\n   * closing the drawer. Keeps `openMenu` in sync with the slider so the same\n   * channel can be reopened afterwards.\n   */\n  closeSidePanel(): void {\n    this.drawerEntering = false;\n    this.openMenu = undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent): void {\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(): TemplateResult {\n    const label = this.menuOpened ? 'Close side panel' : 'Open side panel';\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${() => this.toggleMenu()}\n        title=${label}\n        aria-label=${label}\n        aria-expanded=${this.menuOpened}\n        aria-controls=\"menu\"\n      >\n        ${ellipsesIcon}\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    return html`\n      <nav aria-label=\"Item navigation\">\n        <div\n          class=\"minimized ${classMap({ hidden: this.menuOpened })}\"\n          part=\"minimized-menu\"\n        >\n          ${this.shortcuts} ${this.menuToggleButton}\n        </div>\n        <!-- Closed drawers are inert, so what is off-screen is also out of\n             the tab order and the accessibility tree. -->\n        <div\n          id=\"menu\"\n          role=\"group\"\n          aria-label=\"Item navigation menu\"\n          ?inert=${!this.menuOpened}\n        >\n          <ia-itemnav-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuPanelClosed=${this.closeSidePanel}\n            @menuSliderClosed=${this.closeMenu}\n          ></ia-itemnav-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    // Opening straight to a panel is one movement: the drawer carries the\n    // panel in, so the panel must not also slide (see `.drawer-entering`).\n    // Only when the drawer is actually closed — switching shortcuts while it\n    // is already open should still animate the panel across.\n    this.drawerEntering = !this.menuOpened;\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n    // The rail hides itself once the drawer opens, taking the focused\n    // shortcut with it, so focus has to be placed deliberately.\n    this.moveFocusForDrawer();\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id, label }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <li>\n          <button\n            class=\"shortcut ${id}\"\n            @click=${() => this.openShortcut(id)}\n            title=${label}\n            aria-label=${label}\n            aria-expanded=${this.menuOpened && this.openMenu === id}\n          >\n            ${icon}\n          </button>\n        </li>\n      `;\n    });\n    return html`<ul class=\"shortcuts\" role=\"list\">\n      ${shortcuts}\n    </ul>`;\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    // When the side menu renders, the minimized rail floats over the left edge;\n    // `has-menu` lets the reader reserve its width so the theater isn't covered.\n    const railState = this.shouldRenderMenu ? 'has-menu' : '';\n    const enteringState = this.drawerEntering ? 'drawer-entering' : '';\n    return `${drawerState} ${fullscreenState} ${railState} ${enteringState}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    const subnavWidth = css`var(--item-navigator-menu-width--)`;\n    const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--item-navigator-menu-margin--)`;\n    const theaterBg = css`var(--item-navigator-theater-bg-color--)`;\n    const iconSize = css`var(--item-navigator-icon-size--)`;\n\n    return [\n      themeStyles,\n      css`\n        :host {\n          --item-navigator-menu-width--: var(\n            --item-navigator-menu-width,\n            320px\n          );\n          --item-navigator-animation-timing--: var(\n            --item-navigator-animation-timing,\n            200ms\n          );\n          --item-navigator-menu-margin--: var(\n            --item-navigator-menu-margin,\n            42px\n          );\n          --item-navigator-theater-bg-color--: var(\n            --item-navigator-theater-bg-color,\n            #000\n          );\n          /* Every glyph is square, so one knob sizes both axes. */\n          --item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);\n          /* Icons follow the adjustable text color by default. */\n          --item-navigator-icon-color--: var(\n            --item-navigator-icon-color,\n            var(--item-navigator-text-color, var(--true-white))\n          );\n\n          /*\n           * The component's internal sizing is expressed in em against this\n           * base (10px matches petabox's base font size, which the upstream\n           * demo set on the document root). Anchoring it here makes the\n           * navigator self-contained — its scale no longer depends on the\n           * consumer's root font-size. Override to rescale everything.\n           */\n          --item-navigator-base-font-size--: var(\n            --item-navigator-base-font-size,\n            10px\n          );\n          font-size: var(--item-navigator-base-font-size--);\n        }\n\n        :host,\n        #frame,\n        .menu-and-reader {\n          position: relative;\n          overflow: hidden;\n          display: block;\n        }\n\n        :host,\n        #frame {\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           * The overlay/shift breakpoint keys off the navigator's own width,\n           * not the viewport's, so the frame is the query container. This\n           * replaces a host-injected resize observer that set the class from\n           * JS: layout drives it now, so there is nothing to inject, register\n           * or tear down. The inline-size type contains width only, leaving the\n           * flex column's height behaviour alone.\n           */\n          container-type: inline-size;\n          container-name: navframe;\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           * Override the inherited height/min-height from the base #frame rule:\n           * on a fixed element an explicit height wins over top/bottom, so the\n           * inset (0 on all sides) can't fill the viewport unless height is\n           * released back to auto.\n           */\n          height: auto;\n          min-height: 0;\n        }\n\n        .hidden {\n          display: none !important;\n        }\n\n        button {\n          /* Buttons don't inherit font-size from the UA stylesheet; inherit it\n             so em-sized icons resolve against the component's base, not the\n             browser's default button font-size. */\n          font: inherit;\n          cursor: pointer;\n          padding: 0;\n          border: 0;\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          margin-bottom: 0.2em;\n          margin: auto;\n          display: inline-flex;\n          vertical-align: middle;\n          align-items: center;\n          justify-content: center;\n          width: ${menuMargin};\n          height: ${menuMargin};\n        }\n\n        nav .minimized button > * {\n          /** Prevent the icon's SVG description from stealing tooltip message */\n          pointer-events: none;\n        }\n\n        nav .minimized button.toggle-menu > * {\n          border: 2px solid var(--item-navigator-icon-color--);\n          border-radius: ${iconSize};\n          width: ${iconSize};\n          height: ${iconSize};\n          margin: auto;\n        }\n\n        /* The rail is a list for assistive tech; strip the list chrome so it\n           still reads as a row of icons. */\n        .shortcuts,\n        .shortcuts li {\n          list-style: none;\n          padding: 0;\n          margin: 0;\n        }\n\n        .toggle-menu .ia-icon,\n        .shortcuts .ia-icon {\n          width: ${iconSize};\n          height: ${iconSize};\n        }\n\n        /* Our glyphs are masked spans: the mask supplies the shape, this\n           supplies the paint. */\n        span.ia-icon {\n          background-color: var(--item-navigator-icon-color--);\n        }\n\n        /* Host-supplied icons may still be inline svg, so keep theming those\n           the original way. */\n        .ia-icon .fill-color {\n          fill: var(--item-navigator-icon-color--);\n        }\n\n        #menu {\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          left: 0;\n          z-index: 3;\n          overflow: hidden;\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           * Ease the reader's size/position changes so the slotted theater\n           * glides in sync with the sliding drawer (shift mode) and settles\n           * smoothly on resize, rather than snapping. Overlay mode opts out\n           * below so the full-width theater tracks resizes instantly.\n           */\n          transition:\n            width ${transitionTiming} ease-out,\n            margin-left ${transitionTiming} ease-out,\n            transform ${transitionTiming} ease-out;\n        }\n\n        #reader > * {\n          width: 100%;\n          display: flex;\n          flex: 1;\n        }\n\n        /*\n         * The minimized rail floats over the frame's left edge while the drawer\n         * is closed, so pad the theater content by its width to avoid overlap.\n         * This lives on the reader's content (not the reader box) and isn't\n         * transitioned, so it snaps away on open — letting the reader box track\n         * the drawer's edge exactly during the shift, rather than trailing it.\n         */\n        .has-menu:not(.open) #reader > * {\n          box-sizing: border-box;\n          padding-left: ${menuMargin};\n        }\n\n        /* Opening straight to a panel is one movement. The panel is nested in\n           #menu, so its own slide would compose with the drawer's transform\n           and send it twice the distance in the same time — arriving late and\n           travelling at double speed. Holding it still lets the drawer carry\n           it in. */\n        .drawer-entering #menu {\n          --item-navigator-panel-transition--: none;\n        }\n\n        .open #menu {\n          width: ${subnavWidth};\n          transform: translateX(0);\n          transition: ${transitionEffect};\n        }\n\n        /* Shift: the drawer pushes the theater aside. */\n        .open #reader {\n          width: calc(100% - ${subnavWidth});\n          margin-left: ${subnavWidth};\n        }\n\n        /*\n         * Overlay: too narrow to give the drawer its own column, so it covers\n         * a full-width theater. The transition is dropped here so the theater\n         * tracks resizes instantly instead of easing behind them.\n         */\n        @container navframe (max-width: 600px) {\n          .open #reader {\n            width: 100%;\n            margin-left: 0;\n            transition: none;\n          }\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-item-navigator': IAItemNavigator;\n  }\n}\n"]}

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, TemplateResult, type CSSResultGroup } from 'lit';
+/**
+ * A single entry in the item navigator's side menu. Renders either a button
+ * (default) or a link (when `href` is set) with an icon, label and optional
+ * detail text, and emits `menuTypeSelected` when activated.
+ */
+export declare class IAItemNavMenuButton extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    icon: TemplateResult | string;
+    href: string;
+    label: string;
+    menuDetails: TemplateResult | string;
+    buttonId: string;
+    selected: boolean;
+    followable: boolean;
+    onClick(e: Event): void;
+    dispatchMenuTypeSelectedEvent(): void;
+    get iconClass(): string;
+    get menuItem(): TemplateResult;
+    get linkButton(): TemplateResult;
+    get clickButton(): TemplateResult;
+    render(): TemplateResult;
+    static get styles(): CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ia-itemnav-menu-button': IAItemNavMenuButton;
+    }
+}
+//# sourceMappingURL=ia-itemnav-menu-button.d.ts.map