@jolly-pixel/ui 1.0.1

package/dist/field/JollyField.styles.js

@@ -0,0 +1,439 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+import { fillTransition, truncate } from "../theme/styles/mixins.js";
+/**
+ * Shared field layout and state styles.
+ */
+export const fieldStyles = css `
+  /*
+   * Rows carry no outer spacing. The container that stacks them owns the gap,
+   * so a consumer can stack fields flush when that is what they want.
+   */
+  :host {
+    --jolly-field-active-color: light-dark(
+      var(--jolly-neutral-600),
+      var(--jolly-neutral-50)
+    );
+    --jolly-field-active-color-hover: light-dark(
+      var(--jolly-neutral-500),
+      var(--jolly-neutral-200)
+    );
+
+    display: block;
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+    color: var(--jolly-text, ${kFallback.text});
+  }
+
+  :host([colored]) {
+    --jolly-field-active-color: var(--jolly-accent-fill);
+    --jolly-field-active-color-hover: var(--jolly-accent-fill-hover);
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+    min-height: var(--jolly-row-height, 20px);
+    padding-inline: var(--jolly-space-1, 4px)
+      var(--jolly-field-inset-end, var(--jolly-space-1, 4px));
+    border-radius: var(--jolly-radius-sm, 2px);
+    ${fillTransition}
+  }
+
+  /*
+   * Flattened into the row's flex items by default, so inline layout is
+   * unaffected by the grouping these wrap for stacked layout.
+   */
+  .leading,
+  .content {
+    display: contents;
+  }
+
+  :host([label-position="top"]) .row {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: auto;
+    gap: calc(var(--jolly-space-1, 4px) / 2);
+  }
+
+  :host([label-position="top"]) .leading,
+  :host([label-position="top"]) .content {
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  /*
+   * The gutter sits only on the label's line, so the value line needs a
+   * matching inset to keep both lines starting at the same edge.
+   */
+  :host([label-position="top"]) .content {
+    padding-inline-start: calc(
+      var(--jolly-gutter-width, 0px) + var(--jolly-space-1, 4px)
+    );
+  }
+
+  /* With no label the leading line is an empty band, unless it holds a lock. */
+  :host([unlabeled]:not([locked])[label-position="top"]) .leading {
+    display: none;
+  }
+
+  :host([unlabeled]:not([locked])[label-position="top"]) .content {
+    padding-inline-start: 0;
+  }
+
+  /*
+   * Locating the active row in a long pane. Deliberately fainter than the
+   * control's own focus tint, so the two read as a hierarchy and not a clash.
+   */
+  .row:focus-within {
+    background: var(--jolly-row-bg-focus);
+  }
+
+  /*
+   * Zero width by default. A collaborative container opts its subtree in, which
+   * buys back the fixed inset that keeps lock state from shifting the row.
+   */
+  .gutter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    width: var(--jolly-gutter-width, 0px);
+    height: 14px;
+    overflow: hidden;
+  }
+
+  /*
+   * Without a label the gap after a collapsed gutter is an inset paid for
+   * nothing. Locked keeps it: there the gutter paints an icon.
+   */
+  :host([unlabeled]:not([locked])) .gutter {
+    margin-inline-end: calc(var(--jolly-space-1, 4px) * -1);
+  }
+
+  /* No label column to inset for, so both edges fall back to the row inset. */
+  :host([unlabeled]:not([locked])) .row {
+    padding-inline-start: var(--jolly-field-inset-end, var(--jolly-space-1, 4px));
+  }
+
+  /*
+   * A lock always has to be visible, even where nothing reserved room for it.
+   * Opting the subtree in is what turns this from a widening row into a fixed
+   * inset; without it the lock still shows, it just costs a shift.
+   */
+  :host([locked]) .gutter {
+    width: max(var(--jolly-gutter-width, 0px), 14px);
+    overflow: visible;
+  }
+
+  /*
+   * Icons default to the 16px display size, which overflows the gutter. The
+   * lock is chrome inside a 14px box, so it is sized to the box it sits in.
+   */
+  .gutter > jolly-icon {
+    width: 14px;
+    height: 14px;
+    color: var(--jolly-locked-ring, var(--jolly-locked));
+  }
+
+  /*
+   * A configured width aligns value columns across fields. The cap stops a long
+   * label from eating the value area; a field packed beside another on one line
+   * lifts it, since there the label is legitimately most of the row.
+   */
+  .label {
+    flex: 0 0 auto;
+    width: var(--jolly-label-width, auto);
+    min-width: 0;
+    max-width: var(--jolly-label-max-width, 45%);
+    color: var(--jolly-text-muted);
+    text-align: start;
+    ${truncate}
+    user-select: none;
+  }
+
+  :host([label-position="top"]) .label {
+    width: auto;
+    max-width: none;
+  }
+
+  .value {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    gap: var(--jolly-space-1, 4px);
+    min-width: 0;
+    font-variant-numeric: var(--jolly-font-numeric, tabular-nums);
+  }
+
+  /*
+   * Base input styles shared by field controls. Boundaries are carried by the
+   * fill, so there is no border to state here.
+   */
+  .value input:not([type="color"]),
+  .value select {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-1, 4px);
+    border: 0;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg, ${kFallback.controlBg});
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: inherit;
+    ${fillTransition}
+  }
+
+  .value input:hover:not(:disabled),
+  .value select:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  /*
+   * Focus is a fill step rather than an outline. The step has to beat hover,
+   * because both are the same channel.
+   */
+  .value input:focus,
+  .value select:focus {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  /*
+   * Numeric and monitor-style rows read better against the trailing edge, where
+   * the digits line up down the pane.
+   */
+  :host([align="end"]) .value input,
+  :host([align="end"]) .value select {
+    text-align: end;
+  }
+
+  :host([invalid]) .value input,
+  :host([invalid]) .value select {
+    background: var(--jolly-invalid-bg);
+  }
+
+  :host([invalid]) .value input:hover:not(:disabled),
+  :host([invalid]) .value select:hover:not(:disabled) {
+    background: var(--jolly-invalid-bg-hover);
+  }
+
+  :host([invalid]) .value input:focus,
+  :host([invalid]) .value select:focus {
+    background: var(--jolly-invalid-bg-focus);
+  }
+
+  :host([readonly]) .value input,
+  :host([readonly]) .value select {
+    background: var(--jolly-control-bg-muted);
+  }
+
+  /*
+   * Modified and locked both want the leading bar, so locked takes it: a locked
+   * field is not editable, which makes reverting moot anyway.
+   */
+  :host([modified]:not([locked])) {
+    box-shadow: inset 2px 0 0 0 var(--jolly-field-active-color);
+    border-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  :host([locked]) {
+    padding-block: calc(var(--jolly-space-1, 4px) / 2);
+    box-shadow: inset 3px 0 0 0 var(--jolly-locked-ring, var(--jolly-locked));
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: color-mix(
+      in oklab,
+      var(--jolly-locked-ring, var(--jolly-locked)) 12%,
+      transparent
+    );
+  }
+
+  /*
+   * A container can reserve one trailing column across sibling fields. The
+   * negative margin absorbs the row gap; padding restores it for presence,
+   * while the revert button cancels that padding to stay joined to the value.
+   */
+  .trailing {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    gap: var(--jolly-space-1, 4px);
+    width: var(--jolly-field-trailing-width, auto);
+    margin-inline-start: calc(var(--jolly-space-1, 4px) * -1);
+    padding-inline-start: var(--jolly-space-1, 4px);
+  }
+
+  .trailing:not(:has(.revert, .peers)) {
+    padding-inline-start: 0;
+  }
+
+  /*
+   * The muted action stays visible while a modified value can be restored.
+   * It joins the value edge and uses the full control height, so its hover fill
+   * reads as trailing field chrome instead of a highlight behind the glyph.
+   */
+  .revert {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: var(--jolly-control-height, 20px);
+    height: var(--jolly-control-height, 20px);
+    margin-inline-start: calc(var(--jolly-space-1, 4px) * -1);
+    padding: 0;
+    border: 0;
+    border-radius:
+      0
+      var(--jolly-radius-sm, 2px)
+      var(--jolly-radius-sm, 2px)
+      0;
+    background: none;
+    color: var(--jolly-text-muted);
+    cursor: pointer;
+    ${fillTransition}
+  }
+
+  .revert > jolly-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Filled values and the trailing action form a single control silhouette. */
+  .value:has(+ .trailing > .revert) input[type="text"]:last-child,
+  .value:has(+ .trailing > .revert) select {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .revert:hover {
+    background: var(--jolly-control-bg);
+  }
+
+  .revert:focus-visible {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  .peers {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-inline-start: auto;
+  }
+
+  .chip {
+    width: 10px;
+    height: 10px;
+    margin-left: -3px;
+    border: 1px solid var(--jolly-surface);
+    border-radius: 50%;
+  }
+
+  .chip:first-child {
+    margin-left: 0;
+  }
+
+  .overflow {
+    margin-left: var(--jolly-space-1, 4px);
+    color: var(--jolly-text-muted);
+    font-size: 0.85em;
+  }
+
+  /* Tooltips grow inward to stay within the field bounds. */
+  [data-tooltip] {
+    position: relative;
+  }
+
+  [data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + var(--jolly-space-1, 4px));
+    z-index: 1;
+    padding: 2px 6px;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-surface-raised);
+    box-shadow: var(--jolly-shadow-overlay);
+    color: var(--jolly-text);
+    font-size: 0.85em;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(2px);
+    transition:
+      opacity var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      transform var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  /*
+   * Offset on the tooltip rather than as gutter padding, which would widen the
+   * gutter on exactly the rows that must not change width.
+   */
+  .gutter[data-tooltip]::after {
+    left: 3px;
+  }
+
+  .chip::after {
+    right: 0;
+  }
+
+  [data-tooltip]:hover::after {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Align help and error text with the value area. */
+  .description,
+  .error {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--jolly-space-1, 4px);
+    margin-block: calc(var(--jolly-space-1, 4px) / 2);
+    margin-inline: calc(
+        var(--jolly-gutter-width, 0px) + (var(--jolly-space-1, 4px) * 2)
+      )
+      var(--jolly-space-1, 4px);
+    font-size: 0.9em;
+  }
+
+  /* No label column to clear, so they follow the value back to the row inset. */
+  :host([unlabeled]:not([locked])) .description,
+  :host([unlabeled]:not([locked])) .error {
+    margin-inline-start: calc(
+      var(--jolly-gutter-width, 0px) +
+        var(--jolly-field-inset-end, var(--jolly-space-1, 4px))
+    );
+  }
+
+  .description jolly-icon,
+  .error jolly-icon {
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    margin-block-start: 0;
+  }
+
+  .description {
+    color: var(--jolly-text-muted);
+  }
+
+  .description jolly-icon {
+    color: var(--jolly-accent-text);
+  }
+
+  .error {
+    color: var(--jolly-danger);
+  }
+`;
+//# sourceMappingURL=JollyField.styles.js.map

package/dist/field/JollyField.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JollyField.styles.js","sourceRoot":"","sources":["../../src/field/JollyField.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;+BAkBC,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;MAqBvC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiHd,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CA8B4B,SAAS,CAAC,SAAS;;;;MAIvD,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8Gd,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqInB,CAAC"}

package/dist/field/PointerFocusController.d.ts

@@ -0,0 +1,16 @@
+import type { ReactiveControllerHost } from "lit";
+/**
+ * Tracks pointer focus so fields can suppress a spurious focus-visible ring.
+ */
+export declare class PointerFocusController {
+    #private;
+    constructor(host: ReactiveControllerHost);
+    get active(): boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+    /**
+     * Keyboard input restores the focus-visible ring.
+     */
+    onKeyDown: () => void;
+}
+//# sourceMappingURL=PointerFocusController.d.ts.map

package/dist/field/PointerFocusController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerFocusController.d.ts","sourceRoot":"","sources":["../../src/field/PointerFocusController.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAQlD;;GAEG;AACH,qBAAa,sBAAsB;;gBAK/B,IAAI,EAAE,sBAAsB;IAM9B,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,OAAO,QAAO,IAAI,CAEhB;IAEF,MAAM,QAAO,IAAI,CAEf;IAEF;;OAEG;IACH,SAAS,QAAO,IAAI,CAElB;CAYH"}

package/dist/field/PointerFocusController.js

@@ -0,0 +1,36 @@
+// Import Internal Dependencies
+import { ensureModalityTracking, wasPointerInput } from "./pointerModality.js";
+/**
+ * Tracks pointer focus so fields can suppress a spurious focus-visible ring.
+ */
+export class PointerFocusController {
+    #host;
+    #active = false;
+    constructor(host) {
+        this.#host = host;
+        ensureModalityTracking();
+    }
+    get active() {
+        return this.#active;
+    }
+    onFocus = () => {
+        this.#set(wasPointerInput());
+    };
+    onBlur = () => {
+        this.#set(false);
+    };
+    /**
+     * Keyboard input restores the focus-visible ring.
+     */
+    onKeyDown = () => {
+        this.#set(false);
+    };
+    #set(value) {
+        if (this.#active === value) {
+            return;
+        }
+        this.#active = value;
+        this.#host.requestUpdate();
+    }
+}
+//# sourceMappingURL=PointerFocusController.js.map

package/dist/field/PointerFocusController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerFocusController.js","sourceRoot":"","sources":["../../src/field/PointerFocusController.ts"],"names":[],"mappings":"AAGA,+BAA+B;AAC/B,OAAO,EACL,sBAAsB,EACtB,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,MAAM,OAAO,sBAAsB;IACjC,KAAK,CAAyB;IAC9B,OAAO,GAAG,KAAK,CAAC;IAEhB,YACE,IAA4B;QAE5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,sBAAsB,EAAE,CAAC;IAC3B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,OAAO,GAAG,GAAS,EAAE;QACnB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,GAAG,GAAS,EAAE;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF;;OAEG;IACH,SAAS,GAAG,GAAS,EAAE;QACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,IAAI,CACF,KAAc;QAEd,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;CACF"}

package/dist/field/PopoverController.d.ts

@@ -0,0 +1,60 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+export interface PopoverControllerOptions {
+    /**
+     * Anchor used for placement.
+     */
+    anchor: () => HTMLElement | null;
+    /**
+     * Popover element rendered by the host.
+     */
+    popover: () => HTMLElement | null;
+    /**
+     * Distance between the anchor edge and popover, in pixels.
+     */
+    gap?: number;
+    /** Preferred side of the anchor. */
+    side?: "above" | "below" | "left" | "right";
+    /**
+     * Alignment on the axis perpendicular to `side`: horizontal for
+     * "above"/"below", vertical for "left"/"right".
+     */
+    align?: "center" | "start";
+    onOpen?: () => void;
+    onClose?: () => void;
+    /**
+     * Called on Escape before the popover closes.
+     */
+    onCancel?: (event: KeyboardEvent) => void;
+}
+/**
+ * Positions a native popover beside an anchor and restores focus on close.
+ * The host renders the popover and trigger. The controller positions it as the
+ * viewport changes and reports Escape cancellation.
+ *
+ * ```ts
+ * #popup = new PopoverController(this, {
+ *   anchor: () => this._button,
+ *   popover: () => this._panel
+ * });
+ * ```
+ */
+export declare class PopoverController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, options: PopoverControllerOptions);
+    get open(): boolean;
+    /**
+     * Handles the popover `beforetoggle` event.
+     */
+    onBeforeToggle: (event: ToggleEvent) => void;
+    /**
+     * Handles the popover `toggle` event.
+     */
+    onToggle: (event: ToggleEvent) => void;
+    hide(): void;
+    /**
+     * Repositions the open popover.
+     */
+    reposition(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=PopoverController.d.ts.map

package/dist/field/PopoverController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverController.d.ts","sourceRoot":"","sources":["../../src/field/PopoverController.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,KAAK,CAAC;AAQb,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,iBAAkB,YAAW,kBAAkB;;gBAOxD,IAAI,EAAE,sBAAsB,EAC5B,OAAO,EAAE,wBAAwB;IAOnC,IAAI,IAAI,IAAI,OAAO,CAElB;IAED;;OAEG;IACH,cAAc,GACZ,OAAO,WAAW,KACjB,IAAI,CAQL;IAEF;;OAEG;IACH,QAAQ,GACN,OAAO,WAAW,KACjB,IAAI,CAkBL;IAEF,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,UAAU,IAAI,IAAI;IAkClB,gBAAgB,IAAI,IAAI;CAqDzB"}

package/dist/field/PopoverController.js

@@ -0,0 +1,122 @@
+// Import Internal Dependencies
+import { anchoredPosition } from "../geometry/anchoredPosition.js";
+// CONSTANTS
+const kDefaultGap = 4;
+/**
+ * Positions a native popover beside an anchor and restores focus on close.
+ * The host renders the popover and trigger. The controller positions it as the
+ * viewport changes and reports Escape cancellation.
+ *
+ * ```ts
+ * #popup = new PopoverController(this, {
+ *   anchor: () => this._button,
+ *   popover: () => this._panel
+ * });
+ * ```
+ */
+export class PopoverController {
+    #host;
+    #options;
+    #open = false;
+    #restoreFocus = false;
+    constructor(host, options) {
+        this.#host = host;
+        this.#options = options;
+        host.addController(this);
+    }
+    get open() {
+        return this.#open;
+    }
+    /**
+     * Handles the popover `beforetoggle` event.
+     */
+    onBeforeToggle = (event) => {
+        if (event.newState !== "closed") {
+            return;
+        }
+        const popover = this.#options.popover();
+        this.#restoreFocus = popover !== null &&
+            popover.matches(":focus-within");
+    };
+    /**
+     * Handles the popover `toggle` event.
+     */
+    onToggle = (event) => {
+        this.#open = event.newState === "open";
+        if (this.#open) {
+            this.reposition();
+            this.#listen();
+            this.#options.onOpen?.();
+        }
+        else {
+            this.#unlisten();
+            this.#options.onClose?.();
+            if (this.#restoreFocus) {
+                this.#options.anchor()?.focus();
+            }
+        }
+        this.#host.requestUpdate();
+    };
+    hide() {
+        this.#options.popover()?.hidePopover();
+    }
+    /**
+     * Repositions the open popover.
+     */
+    reposition() {
+        const anchor = this.#options.anchor();
+        const popover = this.#options.popover();
+        if (anchor === null || popover === null || !this.#open) {
+            return;
+        }
+        const anchorRect = anchor.getBoundingClientRect();
+        const panelRect = popover.getBoundingClientRect();
+        const placed = anchoredPosition({
+            anchor: {
+                top: anchorRect.top,
+                bottom: anchorRect.bottom,
+                left: anchorRect.left,
+                right: anchorRect.right
+            },
+            panel: {
+                width: panelRect.width,
+                height: panelRect.height
+            },
+            viewport: {
+                width: window.innerWidth,
+                height: window.innerHeight
+            },
+            gap: this.#options.gap ?? kDefaultGap,
+            side: this.#options.side,
+            align: this.#options.align
+        });
+        popover.style.left = `${placed.x}px`;
+        popover.style.top = `${placed.y}px`;
+    }
+    hostDisconnected() {
+        this.#unlisten();
+        this.#open = false;
+    }
+    #onReposition = () => {
+        this.reposition();
+    };
+    #onKeyDown = (event) => {
+        if (event.key === "Escape" && this.#open) {
+            this.#options.onCancel?.(event);
+        }
+    };
+    /**
+     * Captures ancestor scrolling so the popover follows its anchor.
+     */
+    #listen() {
+        window.addEventListener("scroll", this.#onReposition, true);
+        window.addEventListener("resize", this.#onReposition);
+        document.addEventListener("keydown", this.#onKeyDown, true);
+    }
+    #unlisten() {
+        window.removeEventListener("scroll", this.#onReposition, true);
+        window.removeEventListener("resize", this.#onReposition);
+        document.removeEventListener("keydown", this.#onKeyDown, true);
+    }
+}
+//# sourceMappingURL=PopoverController.js.map

package/dist/field/PopoverController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverController.js","sourceRoot":"","sources":["../../src/field/PopoverController.ts"],"names":[],"mappings":"AAMA,+BAA+B;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,YAAY;AACZ,MAAM,WAAW,GAAG,CAAC,CAAC;AA8BtB;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,iBAAiB;IAC5B,KAAK,CAAyB;IAC9B,QAAQ,CAA2B;IACnC,KAAK,GAAG,KAAK,CAAC;IACd,aAAa,GAAG,KAAK,CAAC;IAEtB,YACE,IAA4B,EAC5B,OAAiC;QAEjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED;;OAEG;IACH,cAAc,GAAG,CACf,KAAkB,EACZ,EAAE;QACR,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACxC,IAAI,CAAC,aAAa,GAAG,OAAO,KAAK,IAAI;YACnC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF;;OAEG;IACH,QAAQ,GAAG,CACT,KAAkB,EACZ,EAAE;QACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,KAAK,MAAM,CAAC;QAEvC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC;QAC3B,CAAC;aACI,CAAC;YACJ,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC;YAClC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAI;QACF,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,WAAW,EAAE,CAAC;IACzC,CAAC;IAED;;OAEG;IACH,UAAU;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACxC,IAAI,MAAM,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACvD,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAClD,MAAM,SAAS,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAElD,MAAM,MAAM,GAAG,gBAAgB,CAAC;YAC9B,MAAM,EAAE;gBACN,GAAG,EAAE,UAAU,CAAC,GAAG;gBACnB,MAAM,EAAE,UAAU,CAAC,MAAM;gBACzB,IAAI,EAAE,UAAU,CAAC,IAAI;gBACrB,KAAK,EAAE,UAAU,CAAC,KAAK;aACxB;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,CAAC,KAAK;gBACtB,MAAM,EAAE,SAAS,CAAC,MAAM;aACzB;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,MAAM,CAAC,UAAU;gBACxB,MAAM,EAAE,MAAM,CAAC,WAAW;aAC3B;YACD,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,WAAW;YACrC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI;YACxB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK;SAC3B,CAAC,CAAC;QAEH,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC;QACrC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAEQ,aAAa,GAAG,GAAS,EAAE;QAClC,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC,CAAC;IAEO,UAAU,GAAG,CACpB,KAAoB,EACd,EAAE;QACR,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,CAAC;IAEF;;OAEG;IACH,OAAO;QACL,MAAM,CAAC,gBAAgB,CACrB,QAAQ,EACR,IAAI,CAAC,aAAa,EAClB,IAAI,CACL,CAAC;QACF,MAAM,CAAC,gBAAgB,CACrB,QAAQ,EACR,IAAI,CAAC,aAAa,CACnB,CAAC;QACF,QAAQ,CAAC,gBAAgB,CACvB,SAAS,EACT,IAAI,CAAC,UAAU,EACf,IAAI,CACL,CAAC;IACJ,CAAC;IAED,SAAS;QACP,MAAM,CAAC,mBAAmB,CACxB,QAAQ,EACR,IAAI,CAAC,aAAa,EAClB,IAAI,CACL,CAAC;QACF,MAAM,CAAC,mBAAmB,CACxB,QAAQ,EACR,IAAI,CAAC,aAAa,CACnB,CAAC;QACF,QAAQ,CAAC,mBAAmB,CAC1B,SAAS,EACT,IAAI,CAAC,UAAU,EACf,IAAI,CACL,CAAC;IACJ,CAAC;CACF"}