@taprootio/espalier 2.1.3 → 2.3.0

package/dist/flyout/esp-flyout.d.ts

@@ -0,0 +1,393 @@
+import { type PropertyValues } from "lit";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import type { FlyoutCloseReason } from "../shared/flyout-events.js";
+/**
+ * A transient panel for help, more-info, and preview content that
+ * claims designed spare width before ever covering the page.
+ *
+ * Place one `esp-flyout` in an `esp-page`'s `flyout` slot. The panel
+ * lives on the canvas, outside the content surface. The page decides
+ * where it goes, from widest viewport to narrowest:
+ *
+ * 1. **Gutter** — the panel occupies the right canvas gutter. When the
+ *    gutter already has room, it claims existing spare canvas and the
+ *    main content does not move at all, on any alignment.
+ * 2. **Shift** — when the gutter is not quite wide enough, the surface
+ *    slides toward `start` by exactly the shortfall (no more) to free
+ *    the difference.
+ * 3. **Docked sidebar** — once the gutter is gone, the panel competes
+ *    for width with the main well; content narrows but is never
+ *    covered.
+ * 4. **Overlay drawer** — below the mobile threshold (`50em`, the
+ *    same one the `esp-menu` drawer uses) the panel becomes a fixed
+ *    drawer over a vellum backdrop. Set `mode="overlay"` to get this
+ *    presentation at every width.
+ *
+ * The panel is styled as a tear-off piece: a dotted perforation on
+ * its leading edge, rounded trailing corners, and no shadow — all
+ * overridable through the `--esp-flyout-*` tokens below.
+ *
+ * A11y follows the presentation. In the in-grid modes (1–3) the
+ * flyout is a non-modal `complementary` landmark named by its
+ * `heading`, and opening it never steals focus. In the overlay-drawer
+ * mode (4) it is a true modal: `role="dialog"` + `aria-modal`, the
+ * background goes inert, scroll is locked, focus moves into the drawer
+ * and is trapped, and focus is restored on close. `Escape` closes it
+ * in every mode.
+ *
+ * ```html
+ * <style>
+ * esp-page.flyout-demo {
+ *   --esp-page-max-width: 420px;
+ *   --esp-page-canvas-background: var(--esp-color-layer-1);
+ *   &::part(wrapper) {
+ *     min-height: 320px;
+ *     height: 320px;
+ *   }
+ *   > div {
+ *     padding: var(--esp-size-padding);
+ *   }
+ * }
+ * </style>
+ * <esp-page class="flyout-demo" align="center">
+ *   <esp-flyout slot="flyout" heading="More info" id="demo-flyout" standalone>
+ *     <p>Spare width claimed; the well shifted only enough to make room.</p>
+ *   </esp-flyout>
+ *   <div>
+ *     <esp-button id="toggle-flyout" label="Toggle flyout" collapsed></esp-button>
+ *   </div>
+ * </esp-page>
+ * <script>
+ *   const flyout = findById("demo-flyout");
+ *   findById("toggle-flyout").addEventListener("clicked", () => flyout.toggle());
+ * </script>
+ * ```
+ *
+ * By default the panel is a tear-off — a dotted perforation on its
+ * leading edge, rounded trailing corners, no shadow. Add
+ * `match-surface` to lift the trailing edge with the page's surface
+ * edge shadow, so the flyout reads as a raised peer of the content it
+ * flies out from while staying attached at the leading perforation:
+ *
+ * ```html
+ * <style>
+ * esp-page.flyout-match-demo {
+ *   --esp-page-max-width: 420px;
+ *   &::part(wrapper) {
+ *     min-height: 320px;
+ *     height: 320px;
+ *   }
+ *   > div {
+ *     padding: var(--esp-size-padding);
+ *   }
+ * }
+ * </style>
+ * <esp-page class="flyout-match-demo" align="center">
+ *   <esp-flyout slot="flyout" heading="More info" id="match-flyout" match-surface standalone>
+ *     <p>Attached at the perforation, trailing edge raised like the surface.</p>
+ *   </esp-flyout>
+ *   <div>
+ *     <esp-button id="toggle-match" label="Toggle flyout" collapsed></esp-button>
+ *   </div>
+ * </esp-page>
+ * <script>
+ *   const matchFlyout = findById("match-flyout");
+ *   findById("toggle-match").addEventListener("clicked", () => matchFlyout.toggle());
+ * </script>
+ * ```
+ *
+ * When the page has no spare width to claim — a `kind="full"` page,
+ * or a capped page on a viewport at the cap — the open flyout docks
+ * as a right sidebar and the content makes room:
+ *
+ * ```html
+ * <style>
+ * esp-page.flyout-docked-demo {
+ *   &::part(wrapper) {
+ *     min-height: 320px;
+ *     height: 320px;
+ *   }
+ *   > div {
+ *     padding: var(--esp-size-padding);
+ *   }
+ * }
+ * </style>
+ * <esp-page class="flyout-docked-demo" kind="full">
+ *   <esp-flyout slot="flyout" heading="Docked" id="docked-flyout" standalone>
+ *     <p>No gutter to claim, so the content narrows instead.</p>
+ *   </esp-flyout>
+ *   <div>
+ *     <p>A <code>kind="full"</code> page has no canvas gutters at any
+ *     width — the flyout squeezes the main well and never covers it.</p>
+ *     <esp-button id="toggle-docked" label="Toggle flyout" collapsed></esp-button>
+ *   </div>
+ * </esp-page>
+ * <script>
+ *   const dockedFlyout = findById("docked-flyout");
+ *   findById("toggle-docked").addEventListener("clicked", () => dockedFlyout.toggle());
+ * </script>
+ * ```
+ *
+ * Below the `50em` viewport threshold every flyout becomes a fixed
+ * overlay drawer over a vellum — there is no room for a side-by-side
+ * split on a phone. `mode="overlay"` forces that presentation at any
+ * width (try it here; `Escape` or the vellum closes it):
+ *
+ * ```html
+ * <style>
+ * esp-page.flyout-overlay-demo {
+ *   &::part(wrapper) {
+ *     min-height: 160px;
+ *     height: 160px;
+ *   }
+ *   > div {
+ *     padding: var(--esp-size-padding);
+ *   }
+ * }
+ * </style>
+ * <esp-page class="flyout-overlay-demo">
+ *   <esp-flyout slot="flyout" heading="Overlay drawer" mode="overlay" id="overlay-flyout" standalone>
+ *     <p>A fixed drawer over a vellum — what every flyout becomes on
+ *     small viewports.</p>
+ *   </esp-flyout>
+ *   <div>
+ *     <esp-button id="open-overlay" label="Open overlay flyout" collapsed></esp-button>
+ *   </div>
+ * </esp-page>
+ * <script>
+ *   const overlayFlyout = findById("overlay-flyout");
+ *   findById("open-overlay").addEventListener("clicked", () => overlayFlyout.toggle());
+ * </script>
+ * ```
+ *
+ * Components that cannot know where the flyout lives can request it
+ * over the bus with `showFlyout()` — the same pattern `showToast()`
+ * uses. A second request swaps the content in place; it never
+ * stacks. Content passed as a string renders as plain text; pass a
+ * `Node` for rich content. Pass the triggering element as `anchor` to
+ * align the in-grid panel with that control and keep both in the same
+ * scroll flow. If the panel would cross the visible viewport's bottom,
+ * it shifts up only far enough to fit and returns to its natural trigger
+ * alignment as the page scrolls. Content taller than the viewport
+ * scrolls inside the panel. Overlay drawers stay viewport-fixed.
+ *
+ * The bus is a global broadcast, so every listening flyout on the
+ * page answers a `showFlyout()` call. The demos above are each driven
+ * by their own toggle button, so they are marked `standalone` to opt
+ * out of the bus — leaving this one flyout as the page's shared
+ * surface. In a real app you typically have a single flyout and need
+ * no attribute at all.
+ *
+ * ```html
+ * <style>
+ * esp-page.flyout-bus-demo {
+ *   --esp-page-max-width: 420px;
+ *   &::part(wrapper) {
+ *     min-height: 320px;
+ *   }
+ *   > div {
+ *     padding: var(--esp-size-padding);
+ *   }
+ *   .flyout-demo-copy {
+ *     max-inline-size: 42ch;
+ *   }
+ * }
+ * </style>
+ * <esp-page class="flyout-bus-demo">
+ *   <esp-flyout slot="flyout"></esp-flyout>
+ *   <div>
+ *     <esp-button id="show-apples" label="Apples" collapsed></esp-button>
+ *     <div class="flyout-demo-copy">
+ *       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+ *       tempor incididunt ut labore et dolore magna aliqua.</p>
+ *       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+ *       ut aliquip ex ea commodo consequat.</p>
+ *       <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+ *       dolore eu fugiat nulla pariatur.</p>
+ *     </div>
+ *     <esp-button id="show-pears" label="Pears" collapsed></esp-button>
+ *     <template id="pears-description">
+ *       <p>Ripen pears at room temperature until the neck yields gently to
+ *       pressure, then refrigerate them to slow further ripening.</p>
+ *       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+ *       nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+ *       <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
+ *       sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
+ *       porta.</p>
+ *       <p>Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent
+ *       taciti sociosqu ad litora torquent per conubia nostra.</p>
+ *       <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
+ *       Curabitur tortor. Pellentesque nibh. Aenean quam.</p>
+ *       <p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis
+ *       tristique sem. Proin ut ligula vel nunc egestas porttitor.</p>
+ *       <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+ *       massa. Fusce ac turpis quis ligula lacinia aliquet.</p>
+ *       <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
+ *       euismod in, nibh. Quisque volutpat condimentum velit.</p>
+ *     </template>
+ *     <div class="flyout-demo-copy">
+ *       <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+ *       deserunt mollit anim id est laborum.</p>
+ *       <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, nullam
+ *       varius, turpis et commodo pharetra.</p>
+ *     </div>
+ *   </div>
+ * </esp-page>
+ * <script>
+ *   const applesButton = findById("show-apples");
+ *   applesButton.addEventListener("clicked", () => {
+ *     showFlyout({ heading: "Apples", content: "Crisp. Store cold.", anchor: applesButton });
+ *   });
+ *   const pearsButton = findById("show-pears");
+ *   const pearsDescription = findById("pears-description");
+ *   pearsButton.addEventListener("clicked", () => {
+ *     showFlyout({
+ *       heading: "Pears",
+ *       content: pearsDescription.content.cloneNode(true),
+ *       anchor: pearsButton,
+ *     });
+ *   });
+ * </script>
+ * ```
+ *
+ * @slot - The flyout's content.
+ *
+ * @event {CustomEvent<{}>} flyout-opened - Fired by `show()` when the
+ * flyout opens.
+ * @event {CustomEvent<{reason: FlyoutCloseReason}>} flyout-closed -
+ * Fired by `close()` when the flyout closes. `reason` is `"escape"`,
+ * `"vellum"`, `"button"`, or `"programmatic"`.
+ * @event {CustomEvent<{}>} flyout-state-changed - Fired on every
+ * `open`, `mode`, or `anchor` change, including direct property
+ * assignment (not just `show()`/`close()`). `esp-page` uses it to keep
+ * its layout in sync; most consumers want
+ * `flyout-opened`/`flyout-closed` instead.
+ *
+ * @csspart panel - The panel surface.
+ * @csspart header - The heading/close-button row.
+ * @csspart content - The scrollable content region wrapping the slot.
+ *
+ * @cssprop --esp-flyout-background - The background color of the
+ * panel. Defaults to `var(--esp-color-background)`.
+ * @cssprop --esp-flyout-border - The border on the panel's leading
+ * edge. Defaults to the tear-off perforation,
+ * `1px dotted var(--esp-color-border)`.
+ * @cssprop --esp-flyout-radius - The radius of the panel's trailing
+ * corners. Defaults to `var(--esp-size-border-radius)`; the overlay
+ * drawer squares them.
+ * @cssprop --esp-flyout-shadow - The panel's shadow. Defaults to
+ * `none` in the gutter/docked modes (the perforation does the
+ * separating) and to a drawer shadow in overlay mode.
+ * @cssprop --esp-flyout-padding - Padding inside the panel's header
+ * and content regions. Defaults to `var(--esp-size-padding)`.
+ * @cssprop --esp-flyout-z-index - Stack order of the overlay-drawer
+ * mode. Defaults to `3000` — above page chrome, below the dialog
+ * drop zone (4000). Set it on the `esp-page` (or an ancestor), not on
+ * the flyout itself: the page reads the same token to hoist the
+ * drawer's aside above its header.
+ *
+ * @docPageTitle Flyout
+ * @docUrl /components/flyout
+ * @menuGroup Structure
+ * @menuOrder 3
+ * @menuLabel Flyout
+ * @menuIcon layout
+ *
+ */
+export declare class EspalierFlyout extends EspalierElementBase {
+    /**
+     * Whether the flyout is open. Reflected so the initial state can
+     * be declared in markup; `esp-page` mirrors it (via the lifecycle
+     * events and the slot) onto its own `flyout-open` attribute to
+     * drive the grid.
+     */
+    open: boolean;
+    /**
+     * Heading text for the panel's header row. Also becomes the
+     * flyout's accessible name unless the author set an `aria-label`.
+     * An open overlay without either uses the fallback name "Flyout" so
+     * its dialog is never exposed without an accessible name.
+     */
+    heading: string;
+    /**
+     * Placement behavior.
+     *
+     * - `"auto"` (default) — the page's placement ladder: gutter,
+     *   docked sidebar, then overlay drawer below the `50em` viewport
+     *   threshold.
+     * - `"overlay"` — always the fixed overlay drawer, at any width.
+     *   The page never reserves a grid track for an overlay-mode
+     *   flyout.
+     */
+    mode: "auto" | "overlay";
+    /**
+     * Triggering element whose block-start edge the in-grid panel should
+     * align with. Anchored panels stay in normal page flow, shift upward
+     * only while needed to fit the visible scrollport, and return to their
+     * natural alignment as the page scrolls. Oversized content scrolls
+     * inside the panel. Overlay drawers ignore this geometry and remain
+     * fixed to the viewport.
+     */
+    anchor: HTMLElement | undefined;
+    /**
+     * When set on a flyout slotted into an `esp-page`, the panel lifts
+     * its **trailing** edge with the page's surface edge shadow, so it
+     * reads as a raised peer of the content surface it flies out from
+     * rather than the shadowless tear-off. The **leading** edge keeps
+     * its dotted perforation and casts no shadow, so the panel stays
+     * attached at the tear line instead of floating over the content.
+     * The trailing-corner radius is still `--esp-flyout-radius`. No
+     * effect on a standalone flyout — there is no page surface to match.
+     */
+    matchSurface: boolean;
+    /**
+     * Whether this flyout ignores the shared `showFlyout()` /
+     * `closeFlyout()` bus and is driven only through its own
+     * `show()` / `close()` / `toggle()` API.
+     *
+     * By default a flyout services the bus, so a single flyout in a
+     * page "just works" as the target of `showFlyout()` — the same
+     * zero-config model as `<esp-toaster>` and `showToast()`. Because
+     * the bus is a global broadcast, **every** listening flyout on the
+     * page answers a `showFlyout()` call; set `standalone` on any
+     * flyout you drive directly so only your one designated help
+     * surface responds.
+     */
+    standalone: boolean;
+    /**
+     * Element to return focus to when the flyout closes. In the in-grid
+     * modes it is focused only if focus is inside the flyout at close;
+     * in the overlay-drawer mode it overrides the modal treatment's
+     * automatic restore-to-opener. Usually supplied through
+     * `showFlyout({ returnFocusTo })`.
+     */
+    returnFocusTo: HTMLElement | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Open the flyout with its current content. In the in-grid modes it
+     * does not move focus; in the overlay-drawer mode it moves focus
+     * into the drawer as a modal.
+     */
+    show(): void;
+    /**
+     * Close the flyout. In the in-grid modes, if focus is inside the
+     * flyout it is returned to `returnFocusTo` when one was provided; in
+     * the overlay-drawer mode the modal treatment restores focus to
+     * wherever it was when the drawer opened, unless `returnFocusTo`
+     * names an explicit target — the explicit target wins.
+     */
+    close(reason?: FlyoutCloseReason): void;
+    /**
+     * Toggle the flyout between open and closed.
+     */
+    toggle(): void;
+    protected updated(changed: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-flyout": EspalierFlyout;
+    }
+}

package/dist/flyout/esp-flyout.js

@@ -0,0 +1,153 @@
+var h=function(c,e,t,i){var o=arguments.length,s=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(c,e,t,i);else for(var a=c.length-1;a>=0;a--)(n=c[a])&&(s=(o<3?n(s):o>3?n(e,t,s):n(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as p,html as y,nothing as R}from"lit";import{customElement as k,property as l}from"lit/decorators.js";import{createRef as x,ref as C}from"lit/directives/ref.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";import{getEspBus as f}from"../shared/bus-events.js";import{OverlayController as T}from"../shared/overlay-controller.js";import{cancelSVG as E}from"../shared/svgs/cancel.js";import{traverseToClosest as b}from"../shared/utilities.js";const P="(max-width: 50em)",O="Flyout",m=p`
+  position: fixed;
+  inset: 0;
+  margin-block-start: 0;
+  width: auto;
+  
+  height: 100vh;
+  height: 100dvh;
+  z-index: var(--esp-flyout-z-index, 3000);
+`,w=p`
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-color: var(--esp-vellum-background, var(--esp-color-layer-3));
+  opacity: var(--esp-vellum-opacity, 0.85);
+`,g=p`
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: min(var(--esp-page-flyout-width, 20rem), 85vw);
+  overflow-y: auto;
+  
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  box-shadow: var(--esp-flyout-shadow, -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow));
+  translate: 0 0;
+  transition: translate 0.25s ease;
+
+  @starting-style {
+    translate: 100% 0;
+  }
+`;let r=class extends v{constructor(){super(...arguments),this.open=!1,this.heading="",this.mode="auto",this.matchSurface=!1,this.standalone=!1,this.lastGeneratedAriaLabel=null,this.boundKeydown=e=>this.handleKeydown(e),this.boundShowRequest=e=>this.handleShowRequest(e),this.boundCloseRequest=()=>this.close(),this.boundOverlayMediaChange=()=>{this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.anchorPositionRaf=0,this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=x(),this.overlay=new T({host:this,getFocusTrapContainer:()=>this.panelRef.value??null,getFocusFallback:()=>this.panelRef.value??null,promote:!1}),this.overlayActive=!1,this.baseRole="complementary"}get effectiveOverlay(){return this.mode==="overlay"||(this.overlayMediaQuery?.matches??!1)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","complementary"),this.baseRole=this.getAttribute("role")??"complementary",!this.overlayMediaQuery&&typeof window<"u"&&"matchMedia"in window&&(this.overlayMediaQuery=window.matchMedia(P)),this.overlayMediaQuery?.addEventListener("change",this.boundOverlayMediaChange),this.syncBusSubscription(),document.addEventListener("keydown",this.boundKeydown),this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeBus(),this.overlayMediaQuery?.removeEventListener("change",this.boundOverlayMediaChange),document.removeEventListener("keydown",this.boundKeydown),this.stopAnchorTracking(),this.overlayActive&&(this.overlayActive=!1,this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel()),this.overlayReturnFocusTo=void 0}syncBusSubscription(){if(this.standalone||!this.isConnected){this.unsubscribeBus();return}this.busSubscribed||(f().subscribe("show-flyout",this.boundShowRequest),f().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(f().unsubscribe("show-flyout",this.boundShowRequest),f().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent("flyout-opened",{detail:{},bubbles:!0,composed:!0})))}close(e="programmatic"){if(this.open){if(this.open=!1,this.overlayActive)this.overlayReturnFocusTo=this.returnFocusTo;else{const t=this.focusIsInside();this.overlay.close(),t&&this.returnFocusTo?.focus()}this.returnFocusTo=void 0,this.dispatchEvent(new CustomEvent("flyout-closed",{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){e.heading!==void 0&&(this.heading=e.heading),e.content!==void 0&&this.replaceChildren(typeof e.content=="string"?document.createTextNode(e.content):e.content),this.anchor=e.anchor,this.returnFocusTo=e.returnFocusTo,this.show()}handleKeydown(e){if(this.open){if(this.overlayActive&&e.key==="Tab"){this.overlay.trapFocus(e);return}e.key!=="Escape"||e.defaultPrevented||(e.preventDefault(),this.close("escape"))}}focusIsInside(){const e=document.activeElement;return e&&this.contains(e)?!0:this.shadowRoot?.activeElement!=null}updated(e){super.updated(e),e.has("standalone")&&this.syncBusSubscription(),e.has("heading")&&this.updateGeneratedAriaLabel(),(e.has("anchor")||e.has("open")||e.has("mode"))&&(this.syncAnchorTracking(),this.syncAnchorGeometry()),(e.has("open")||e.has("mode"))&&this.syncOverlayModal(),(e.has("open")||e.has("mode")||e.has("anchor"))&&this.dispatchEvent(new CustomEvent("flyout-state-changed",{detail:{},bubbles:!0,composed:!0}))}syncAnchorGeometry(){const e=b(this,"esp-page"),t=this.anchor?b(this.anchor,"esp-page"):null,i=e?.shadowRoot?.querySelector(".esp-page-main"),o=this.panelRef.value;if(!this.open||this.effectiveOverlay||!this.anchor||!e||t!==e||!i||!o){this.clearAnchorGeometry();return}const s=this.anchor.getBoundingClientRect(),n=Math.max(0,s.top-i.getBoundingClientRect().top),a=this.getVisibleBlockBounds(),d=Math.max(0,a.bottom-a.top);this.setGeometryProperty("--_esp-flyout-anchor-offset",`${n}px`),this.setGeometryProperty("--_esp-flyout-max-block-size",`${d}px`);const u=o.getBoundingClientRect().height,A=Math.max(0,s.top+u-a.bottom);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${A}px`)}getVisibleBlockBounds(){const e=window.visualViewport;let t=e?.offsetTop??0,i=t+(e?.height??window.innerHeight);for(let o=this.composedParent(this);o;o=this.composedParent(o)){const s=getComputedStyle(o).overflowY;if(s!=="auto"&&s!=="scroll")continue;const n=o.getBoundingClientRect(),a=o instanceof HTMLElement?o.clientTop:0,d=o instanceof HTMLElement?o.clientHeight:n.height;if(d<=0)continue;const u=n.top+a;t=Math.max(t,u),i=Math.min(i,u+d)}return{top:t,bottom:Math.max(t,i)}}composedParent(e){if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}setGeometryProperty(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}clearAnchorGeometry(){this.style.removeProperty("--_esp-flyout-anchor-offset"),this.style.removeProperty("--_esp-flyout-viewport-shift"),this.style.removeProperty("--_esp-flyout-max-block-size")}scheduleAnchorGeometrySync(){!this.isConnected||this.anchorPositionRaf||(this.anchorPositionRaf=requestAnimationFrame(()=>{this.anchorPositionRaf=0,this.syncAnchorGeometry()}))}syncAnchorTracking(){if(!(this.isConnected&&this.open&&!!this.anchor&&!this.effectiveOverlay)){this.stopAnchorTracking();return}this.trackingAnchorPosition||(this.trackingAnchorPosition=!0,window.addEventListener("scroll",this.boundAnchorViewportChange,{capture:!0,passive:!0}),window.addEventListener("resize",this.boundAnchorViewportChange,{passive:!0}));const t=this.panelRef.value;t&&t!==this.observedAnchorPanel&&typeof ResizeObserver<"u"&&(this.anchorResizeObserver??=new ResizeObserver(this.boundAnchorViewportChange),this.anchorResizeObserver.disconnect(),this.anchorResizeObserver.observe(t),this.observedAnchorPanel=t)}stopAnchorTracking(){this.trackingAnchorPosition&&(window.removeEventListener("scroll",this.boundAnchorViewportChange,{capture:!0}),window.removeEventListener("resize",this.boundAnchorViewportChange),this.trackingAnchorPosition=!1),this.anchorPositionRaf&&(cancelAnimationFrame(this.anchorPositionRaf),this.anchorPositionRaf=0),this.anchorResizeObserver?.disconnect(),this.observedAnchorPanel=void 0}syncOverlayModal(){const e=this.isConnected&&this.open&&this.effectiveOverlay;if(e===this.overlayActive){!e&&!this.open&&this.overlay.close();return}e?(this.overlayActive=!0,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.updateGeneratedAriaLabel(),this.overlay.open(),this.updateComplete.then(()=>{this.overlayActive&&this.overlay.moveFocusInto()})):(this.overlayActive=!1,this.overlay.close(),this.overlayReturnFocusTo&&(this.overlayReturnFocusTo.focus(),this.overlayReturnFocusTo=void 0),this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel())}updateGeneratedAriaLabel(){const e=this.getAttribute("aria-label");if(e!==null&&e!==this.lastGeneratedAriaLabel)return;const t=this.heading||(this.overlayActive?O:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return y`
+      <div class="vellum" aria-hidden="true" @click=${()=>this.close("vellum")}></div>
+      <div class="panel" part="panel" ${C(this.panelRef)}>
+        <header part="header">
+          ${this.heading?y`<h2>${this.heading}</h2>`:R}
+          
+          <button class="close" aria-label="Close" @click=${()=>this.close("button")}>
+            ${E}
+          </button>
+        </header>
+        <div class="content" part="content">
+          <slot @slotchange=${this.boundAnchorViewportChange}></slot>
+        </div>
+      </div>
+    `}};r.styles=[...v.styles,p`
+      :host {
+        display: none;
+      }
+
+      :host([open]) {
+        display: block;
+        
+        width: var(--esp-page-flyout-width, 20rem);
+        margin-block-start: calc(
+          var(--_esp-flyout-anchor-offset, 0px) - var(--_esp-flyout-viewport-shift, 0px)
+        );
+      }
+
+      .vellum {
+        display: none;
+      }
+
+      .panel {
+        background: var(--esp-flyout-background, var(--esp-color-background));
+        
+        width: var(--esp-page-flyout-width, 20rem);
+        display: flex;
+        flex-direction: column;
+        max-block-size: var(--_esp-flyout-max-block-size, none);
+        overflow: hidden;
+        
+        border-inline-start: var(--esp-flyout-border, 1px dotted var(--esp-color-border));
+        border-start-end-radius: var(--esp-flyout-radius, var(--esp-size-border-radius));
+        border-end-end-radius: var(--esp-flyout-radius, var(--esp-size-border-radius));
+        box-shadow: var(--esp-flyout-shadow, none);
+        font-family: var(--esp-font-body);
+        color: var(--esp-color-text);
+
+        > header {
+          display: flex;
+          align-items: center;
+          gap: var(--esp-size-tiny-to-small);
+          padding: var(--esp-flyout-padding, var(--esp-size-padding));
+          padding-block-end: 0;
+
+          > h2 {
+            flex: 1;
+            margin: 0;
+            font-size: var(--esp-type-large);
+            line-height: 1.2;
+          }
+
+          > .close {
+            margin-inline-start: auto;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border: none;
+            background: transparent;
+            color: var(--esp-color-text);
+            cursor: pointer;
+            padding: var(--esp-size-tiny);
+
+            svg {
+              width: 1.25em;
+              height: 1.25em;
+            }
+          }
+        }
+
+        > .content {
+          min-block-size: 0;
+          overflow-y: auto;
+          overscroll-behavior-block: contain;
+          padding: var(--esp-flyout-padding, var(--esp-size-padding));
+        }
+      }
+
+      
+      :host([open][mode="overlay"]) {
+        ${m}
+      }
+
+      :host([open][mode="overlay"]) .vellum {
+        ${w}
+      }
+
+      :host([open][mode="overlay"]) .panel {
+        ${g}
+      }
+
+      
+      @media (max-width: 50em) {
+        :host([open]) {
+          ${m}
+        }
+
+        .vellum {
+          ${w}
+        }
+
+        .panel {
+          ${g}
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .panel {
+          transition: none;
+        }
+      }
+    `],h([l({type:Boolean,reflect:!0})],r.prototype,"open",void 0),h([l({type:String})],r.prototype,"heading",void 0),h([l({reflect:!0})],r.prototype,"mode",void 0),h([l({attribute:!1})],r.prototype,"anchor",void 0),h([l({type:Boolean,reflect:!0,attribute:"match-surface"})],r.prototype,"matchSurface",void 0),h([l({type:Boolean,reflect:!0})],r.prototype,"standalone",void 0),r=h([k("esp-flyout")],r);export{r as EspalierFlyout};

package/dist/font-picker/esp-font-picker.js

@@ -1,9 +1,9 @@
-var u=function(t,e,o,n){var a=arguments.length,s=a<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,o):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(t,e,o,n);else for(var c=t.length-1;c>=0;c--)(l=t[c])&&(s=(a<3?l(s):a>3?l(e,o,s):l(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};import"../pickers/esp-pick-one.js";import{customElement as I,property as p,state as G}from"lit/decorators.js";import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{html as N}from"lit";const F=[{family:"Arial / Helvetica",stack:"Arial, Helvetica, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Georgia / Times New Roman",stack:'Georgia, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"Verdana / Geneva",stack:"Verdana, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Tahoma / Geneva",stack:"Tahoma, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Trebuchet MS",stack:'"Trebuchet MS", Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"Courier New",stack:'"Courier New", Courier, monospace',category:"monospace",kind:"web-safe"},{family:"System Sans",stack:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"System Serif",stack:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"System Monospace",stack:'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Courier New", monospace',category:"monospace",kind:"web-safe"}];let f,m=!1;const U=async()=>{if(f)return f;if(m){for(;!f;)await new Promise(n=>setTimeout(n,100));return f}m=!0;const t=document.getElementsByTagName("esp-root")[0];if(!t)throw new Error("<esp-font-picker> requires an <esp-root> ancestor. Wrap your application in <esp-root> to use the font picker.");const e=t.fontDefinitionsUrl||`${t.fontCSSRoot}font-definitions.json`,o=await fetch(e);if(!o.ok)throw m=!1,new Error(`Failed to load font definitions from ${e} (${o.status}). Run 'npm run build-fonts' to generate the font catalog.`);return f=await o.json(),f},k="esp-preview-",V=t=>`${k}${t}`,d=new Map,g=async t=>{if(d.has(t))return!0;try{const e=document.getElementsByTagName("esp-root")[0];if(!e)return!1;const o=t.replaceAll(" ","-"),n=await fetch(`${e.fontCSSRoot}${o}.css`);if(!n.ok)return!1;let a=await n.text();a=a.replace(/font-family:\s*'([^']+)'/g,(l,c)=>`font-family: '${k}${c}'`);const s=document.createElement("style");return s.textContent=a,s.dataset.font=t,document.head.appendChild(s),d.set(t,s),!0}catch(e){return console.warn(`Failed to load CSS for font ${t}:`,e),!1}},v=t=>{const e=d.get(t);e&&(e.remove(),d.delete(t))},S="data-esp-font-picker",b="data-esp-font-picker-root",C=t=>t.closest("esp-root"),E=t=>C(t)?.correlationId??"",R=(t,e)=>`link[${S}="${CSS.escape(t)}"][${b}="${CSS.escape(e)}"]`,w=(t,e)=>{if(!e)return;const o=C(t),n=o?.correlationId??"";if(o?.googleFontLoading==="none"){h(t,e);return}if(document.head.querySelector(R(e,n)))return;const a=encodeURIComponent(e),s=document.createElement("link");s.rel="stylesheet",s.href=`https://fonts.googleapis.com/css2?family=${a}&display=swap`,s.setAttribute(S,e),s.setAttribute(b,n),document.head.appendChild(s)},h=(t,e)=>{if(!e)return;const o=E(t);if(Array.from(document.getElementsByTagName("esp-font-picker")).some(s=>E(s)===o&&s.fontSource==="google"&&s.value===e))return;document.head.querySelector(R(e,o))?.remove()},_=t=>t.kind!=="web-safe",y=t=>_(t)?t.family:t.stack,x=t=>_(t)?`${V(t.family)}, "${t.family}"`:t.stack,T=(t,e)=>t.filter(o=>{switch(e){case"not-display":return o.category!=="display";default:return o.category===e}});let r=class extends A{constructor(){super(...arguments),this.loadedFonts=new Set,this._rangeGeneration=0,this._initGeneration=0,this._fontsReady=Promise.resolve(),this.fonts=[],this.category=null,this.fontSource="google",this.value="",this.placeholder="Choose a font...",this.handleItemsInViewEvent=e=>{e.stopPropagation(),this.handleItemsInView(e.detail)}}focus(){this.shadowRoot?.querySelector("esp-pick-one")?.focus()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this._fontsReady,e}firstUpdated(e){super.firstUpdated(e),this._fontsReady=this.initFonts()}updated(e){super.updated(e);const o=e.has("fontSource")&&e.get("fontSource")!==void 0,n=e.has("category")&&e.get("category")!==void 0;if(o||n){if(e.get("fontSource")==="google"&&this.fontSource==="web-safe"){const a=this.value;for(const s of this.loadedFonts)v(s);this.loadedFonts.clear(),this.value="",a&&h(this,a)}this._fontsReady=this.initFonts()}if(e.has("value")&&this.value&&this.fontSource==="google"){const a=e.get("value");a!==this.value&&this.ensureFontLoaded(this.value,a)}}async ensureFontLoaded(e,o){await g(e)&&this.loadedFonts.add(e),this.value===e&&(w(this,e),o&&o!==e&&h(this,o))}async initFonts(){const e=++this._initGeneration;if(this.fontSource==="web-safe"){this.fonts=this.category?T(F,this.category):F;return}const o=await U();if(!(e!==this._initGeneration||this.fontSource!=="google")&&(this.fonts=this.category?T(o,this.category):o,this.value&&this.fonts.some(n=>y(n)===this.value))){const n=this.value;if(await g(n)){if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==n){v(n);return}this.loadedFonts.add(n)}if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==n)return;w(this,n)}}async handleItemsInView(e){if(this.fontSource==="web-safe")return;const o=++this._rangeGeneration,n=3,a=e.items??[],s=new Set,l=Math.max(0,e.first),c=Math.min(e.last+n,a.length);for(let i=l;i<c;i++)s.add(a[i].value);for(const i of s)this.loadedFonts.has(i)||await g(i)&&this.loadedFonts.add(i);if(o!==this._rangeGeneration)return;const $=new Set(Array.from(document.getElementsByTagName("esp-font-picker")).map(i=>i.value).filter(Boolean));for(const i of this.loadedFonts)$.has(i)||s.has(i)||(this.loadedFonts.delete(i),v(i))}render(){return N`<esp-pick-one
+var u=function(t,e,o,n){var i=arguments.length,s=i<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,o):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(t,e,o,n);else for(var l=t.length-1;l>=0;l--)(c=t[l])&&(s=(i<3?c(s):i>3?c(e,o,s):c(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import"../pickers/esp-pick-one.js";import{customElement as $,property as p,state as G}from"lit/decorators.js";import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{html as N}from"lit";const w=[{family:"Arial / Helvetica",stack:"Arial, Helvetica, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Georgia / Times New Roman",stack:'Georgia, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"Verdana / Geneva",stack:"Verdana, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Tahoma / Geneva",stack:"Tahoma, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Trebuchet MS",stack:'"Trebuchet MS", Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"Courier New",stack:'"Courier New", Courier, monospace',category:"monospace",kind:"web-safe"},{family:"System Sans",stack:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"System Serif",stack:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"System Monospace",stack:'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Courier New", monospace',category:"monospace",kind:"web-safe"}];let f,m=!1;const U=async()=>{if(f)return f;if(m){for(;!f;)await new Promise(n=>setTimeout(n,100));return f}m=!0;const t=document.getElementsByTagName("esp-root")[0];if(!t)throw new Error("<esp-font-picker> requires an <esp-root> ancestor. Wrap your application in <esp-root> to use the font picker.");const e=t.fontDefinitionsUrl||`${t.fontCSSRoot}font-definitions.json`,o=await fetch(e);if(!o.ok)throw m=!1,new Error(`Failed to load font definitions from ${e} (${o.status}). Run 'npm run build-fonts' to generate the font catalog.`);return f=await o.json(),f},k="esp-preview-",V=t=>`${k}${t}`,d=new Map,g=async t=>{if(d.has(t))return!0;try{const e=document.getElementsByTagName("esp-root")[0];if(!e)return!1;const o=t.replaceAll(" ","-"),n=await fetch(`${e.fontCSSRoot}${o}.css`);if(!n.ok)return!1;let i=await n.text();i=i.replace(/font-family:\s*'([^']+)'/g,(c,l)=>`font-family: '${k}${l}'`);const s=document.createElement("style");return s.textContent=i,s.dataset.font=t,document.head.appendChild(s),d.set(t,s),!0}catch(e){return console.warn(`Failed to load CSS for font ${t}:`,e),!1}},v=t=>{const e=d.get(t);e&&(e.remove(),d.delete(t))},F="data-esp-font-picker",b="data-esp-font-picker-root",I=t=>t.closest("esp-root"),C=t=>I(t)?.correlationId??"",E=(t,e)=>`link[${F}="${CSS.escape(t)}"][${b}="${CSS.escape(e)}"]`,S=(t,e)=>{if(!e)return;const o=I(t),n=o?.correlationId??"";if(o?.googleFontLoading==="none"){h(t,e);return}if(document.head.querySelector(E(e,n)))return;const i=encodeURIComponent(e),s=document.createElement("link");s.rel="stylesheet",s.href=`https://fonts.googleapis.com/css2?family=${i}&display=swap`,s.setAttribute(F,e),s.setAttribute(b,n),document.head.appendChild(s)},h=(t,e)=>{if(!e)return;const o=C(t);if(Array.from(document.getElementsByTagName("esp-font-picker")).some(s=>C(s)===o&&s.fontSource==="google"&&s.value===e))return;document.head.querySelector(E(e,o))?.remove()},R=t=>t.kind!=="web-safe",y=t=>R(t)?t.family:t.stack,x=t=>R(t)?`${V(t.family)}, "${t.family}"`:t.stack,_=(t,e)=>t.filter(o=>{switch(e){case"not-display":return o.category!=="display";default:return o.category===e}});let r=class extends A{constructor(){super(...arguments),this.loadedFonts=new Set,this.formItemDescription=null,this._rangeGeneration=0,this._initGeneration=0,this._fontsReady=Promise.resolve(),this.fonts=[],this.category=null,this.fontSource="google",this.value="",this.placeholder="Choose a font...",this.handleItemsInViewEvent=e=>{e.stopPropagation(),this.handleItemsInView(e.detail)}}focus(){this.shadowRoot?.querySelector("esp-pick-one")?.focus()}setFormItemDescription(e){this.formItemDescription=e,this.syncFormItemDescription()}syncFormItemDescription(){this.shadowRoot?.querySelector("esp-pick-one")?.setFormItemDescription?.(this.formItemDescription)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this._fontsReady,e}firstUpdated(e){super.firstUpdated(e),this._fontsReady=this.initFonts()}updated(e){super.updated(e),this.syncFormItemDescription();const o=e.has("fontSource")&&e.get("fontSource")!==void 0,n=e.has("category")&&e.get("category")!==void 0;if(o||n){if(e.get("fontSource")==="google"&&this.fontSource==="web-safe"){const i=this.value;for(const s of this.loadedFonts)v(s);this.loadedFonts.clear(),this.value="",i&&h(this,i)}this._fontsReady=this.initFonts()}if(e.has("value")&&this.value&&this.fontSource==="google"){const i=e.get("value");i!==this.value&&this.ensureFontLoaded(this.value,i)}}async ensureFontLoaded(e,o){await g(e)&&this.loadedFonts.add(e),this.value===e&&(S(this,e),o&&o!==e&&h(this,o))}async initFonts(){const e=++this._initGeneration;if(this.fontSource==="web-safe"){this.fonts=this.category?_(w,this.category):w;return}const o=await U();if(!(e!==this._initGeneration||this.fontSource!=="google")&&(this.fonts=this.category?_(o,this.category):o,this.value&&this.fonts.some(n=>y(n)===this.value))){const n=this.value;if(await g(n)){if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==n){v(n);return}this.loadedFonts.add(n)}if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==n)return;S(this,n)}}async handleItemsInView(e){if(this.fontSource==="web-safe")return;const o=++this._rangeGeneration,n=3,i=e.items??[],s=new Set,c=Math.max(0,e.first),l=Math.min(e.last+n,i.length);for(let a=c;a<l;a++)s.add(i[a].value);for(const a of s)this.loadedFonts.has(a)||await g(a)&&this.loadedFonts.add(a);if(o!==this._rangeGeneration)return;const T=new Set(Array.from(document.getElementsByTagName("esp-font-picker")).map(a=>a.value).filter(Boolean));for(const a of this.loadedFonts)T.has(a)||s.has(a)||(this.loadedFonts.delete(a),v(a))}render(){return N`<esp-pick-one
       typeahead
       .pickerItems=${this.fonts.map(e=>({text:e.family,value:y(e),selected:this.value===y(e),styles:{fontFamily:x(e)}}))}
       .value=${this.value}
       .placeholder=${this.placeholder}
       @range-changed=${this.handleItemsInViewEvent}
-      @value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.dispatchEvent(new CustomEvent("value-changed",{detail:void 0,bubbles:!0,composed:!0}));return}const n=this.fonts.find(a=>y(a)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),w(this,this.value),o&&o!==this.value&&h(this,o)),this.dispatchEvent(new CustomEvent("value-changed",{detail:n,bubbles:!0,composed:!0}))}}
+      @value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.dispatchEvent(new CustomEvent("value-changed",{detail:void 0,bubbles:!0,composed:!0}));return}const n=this.fonts.find(i=>y(i)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),S(this,this.value),o&&o!==this.value&&h(this,o)),this.dispatchEvent(new CustomEvent("value-changed",{detail:n,bubbles:!0,composed:!0}))}}
     >
-    </esp-pick-one>`}};u([G()],r.prototype,"fonts",void 0),u([p({attribute:"category",type:String})],r.prototype,"category",void 0),u([p({attribute:"font-source",type:String})],r.prototype,"fontSource",void 0),u([p({type:String})],r.prototype,"value",void 0),u([p({type:String})],r.prototype,"placeholder",void 0),r=u([I("esp-font-picker")],r);const q=()=>{f=void 0,m=!1;for(const t of document.head.querySelectorAll("style[data-font]"))t.remove();d.clear();for(const t of document.head.querySelectorAll(`link[${S}]`))t.remove()};export{r as EspalierFontPicker,F as WEB_SAFE_FONTS,U as getGoogleFonts,V as previewFontFamily,q as resetFontCache};
+    </esp-pick-one>`}};u([G()],r.prototype,"fonts",void 0),u([p({attribute:"category",type:String})],r.prototype,"category",void 0),u([p({attribute:"font-source",type:String})],r.prototype,"fontSource",void 0),u([p({type:String})],r.prototype,"value",void 0),u([p({type:String})],r.prototype,"placeholder",void 0),r=u([$("esp-font-picker")],r);const q=()=>{f=void 0,m=!1;for(const t of document.head.querySelectorAll("style[data-font]"))t.remove();d.clear();for(const t of document.head.querySelectorAll(`link[${F}]`))t.remove()};export{r as EspalierFontPicker,w as WEB_SAFE_FONTS,U as getGoogleFonts,V as previewFontFamily,q as resetFontCache};