@aquera/nile-elements 1.6.0 → 1.6.2

package/dist/src/nile-floating-panel/nile-floating-panel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-floating-panel.css.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/nile-floating-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBtC,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  slot {\n    display: none;\n  }\n`;\n\nexport const panelContainerStyles = css`\n  .nile-floating-panel__container {\n    position: fixed;\n    box-sizing: border-box;\n    z-index: 800;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: var(--nile-width-352px, var(--ng-width-80));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));\n  }\n`;\n\nexport default [styles];\n\n"]}
+{"version":3,"file":"nile-floating-panel.css.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/nile-floating-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJxB,CAAC;AAEF,MAAM,UAAU,+BAA+B;IAC7C,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAE5C,MAAM,QAAQ,GAAG,4BAA4B,CAAC;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAE9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;AACpC,CAAC;AAED,+BAA+B,EAAE,CAAC;AAElC,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  nile-floating-panel {\n    display: inline-block;\n  }\n\n  .tippy-box[data-theme~='floating-panel'] {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    padding: 0;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    line-height: 1.4;\n    white-space: normal;\n    outline: 0;\n    transition-property: transform, visibility, opacity;\n  }\n\n  .tippy-box[data-theme~='floating-panel'][data-animation='fade'][data-state='hidden'] {\n    opacity: 0;\n  }\n\n  .tippy-box[data-theme~='floating-panel'][data-inertia][data-state='visible'] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-box[data-theme~='floating-panel'] > .tippy-content {\n    position: relative;\n    z-index: 1;\n    padding: 0;\n  }\n\n  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {\n    fill: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .nile-floating-panel__body {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    min-width: var(--nile-width-352px, var(--ng-width-80));\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .nile-floating-panel__title {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));\n  }\n\n  .nile-floating-panel__title:empty {\n    display: none;\n  }\n\n  .nile-floating-panel__action {\n    align-self: end;\n    display: inline;\n  }\n\n  .nile-floating-panel__action:empty {\n    display: none;\n  }\n\n  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow:after,\n  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow > svg {\n    top: 16px;\n    transform: rotate(180deg);\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 16px; }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow:after,\n  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow > svg {\n    transform: rotate(90deg);\n    top: calc(50% - 3px);\n    left: 11px;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow:after,\n  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow > svg {\n    transform: rotate(-90deg);\n    top: calc(50% - 3px);\n    right: 11px;\n  }\n\n  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {\n    width: 16px;\n    height: 16px;\n    text-align: initial;\n    position: absolute;\n  }\n\n  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {\n    position: absolute;\n  }\n\n  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {\n    bottom: 0;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:before {\n    bottom: -7px;\n    border-width: 8px 8px 0;\n    border-top-color: initial;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {\n    top: 0;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:before {\n    top: -7px;\n    border-width: 0 8px 8px;\n    border-bottom-color: initial;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {\n    right: 0;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:before {\n    right: -7px;\n    border-width: 8px 0 8px 8px;\n    border-left-color: initial;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {\n    left: 0;\n  }\n  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:before {\n    left: -7px;\n    border-width: 8px 8px 8px 0;\n    border-right-color: initial;\n  }\n\n  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {\n    width: 16px;\n    height: 16px;\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n`;\n\nexport function injectGlobalFloatingPanelStyles(): void {\n  if (typeof document === 'undefined') return;\n\n  const STYLE_ID = 'nile-floating-panel-styles';\n  if (document.getElementById(STYLE_ID)) return;\n\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = styles.cssText;\n  document.head?.appendChild(style);\n}\n\ninjectGlobalFloatingPanelStyles();\n\nexport default [styles];\n"]}

package/dist/src/nile-floating-panel/nile-floating-panel.d.ts

@@ -1,39 +1,107 @@
-import { CSSResultArray, TemplateResult } from 'lit';
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, PropertyValues } from 'lit';
 import NileElement from '../internal/nile-element';
-import type { FloatingPanelPosition, FloatingPanelAnchor } from './types';
 /**
- * Nile floating panel component.
+ * Nile floating-panel component.
+ *
+ * A popover that supports rich content (title, body, actions).
+ *
+ * **Wrapper mode** (default): first child element is the trigger.
+ * **For mode**: set `for="elementId"` to attach to an external element.
  *
  * @tag nile-floating-panel
- * @event nile-show - Emitted when the panel opens.
- * @event nile-hide - Emitted when the panel closes.
+ *
+ * @fires nile-init   - Component initialized.
+ * @fires nile-destroy - Component destroyed.
+ * @fires nile-show   - Panel opened.
+ * @fires nile-hide   - Panel closed.
+ * @fires nile-after-show - Panel fully visible after animation.
+ * @fires nile-after-hide - Panel fully hidden after animation.
+ * @fires nile-toggle - Open/close transition (detail.open).
+ * @fires nile-visibility-change - Hidden by scroll/tab change.
  */
 export declare class NileFloatingPanel extends NileElement {
+    private static _groups;
+    private static _reducedMotionQuery;
+    private static get prefersReducedMotion();
     static get styles(): CSSResultArray;
-    anchor: FloatingPanelAnchor;
-    position: FloatingPanelPosition;
+    protected createRenderRoot(): this;
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'auto' | 'auto-start' | 'auto-end';
+    trigger: string;
+    distance: number;
+    skidding: number;
+    arrow: 'round' | 'default' | 'none';
+    animation: string;
+    duration: string | number | [number, number];
+    delay: number | [number, number];
+    interactive: boolean;
+    interactiveBorder: number;
+    maxWidth: string | number;
+    zIndex: number;
+    followCursor: boolean | 'initial' | 'horizontal' | 'vertical' | 'true' | 'false';
+    hideOnClick: boolean | 'toggle';
+    inertia: boolean;
+    allowHTML: boolean;
+    flip: boolean;
+    for: string | null;
     open: boolean;
-    closeOnOutsideClick: boolean;
+    preventOverlayClose: boolean;
+    title: string;
+    disabled: boolean;
+    width?: string;
+    height?: string;
+    /** When set, only one panel in the same group can be open at a time. */
+    group: string | null;
+    /** Close the panel when Escape is pressed. */
+    closeOnEscape: boolean;
+    /** Custom CSS class(es) added to the Tippy popper element, allowing per-instance styling from the host. */
+    panelClass: string;
     enableVisibilityEffect: boolean;
     enableTabClose: boolean;
-    private panelContainer;
-    private positionManager;
-    private styleManager;
-    private eventManager;
+    private tippyInstance;
     private visibilityManager?;
-    connectedCallback(): void;
+    private panelContainer;
+    private anchorEl;
+    private _suppressOpenWatch;
+    private _panelId;
+    private _boundEscHandler;
+    private _pendingShowListener;
+    private _pendingHideListener;
+    protected firstUpdated(): void;
     disconnectedCallback(): void;
-    updated(changedProperties: Map<string, unknown>): void;
-    private setupPanel;
-    private setupEventHandlers;
-    private setupPositionManager;
-    private findTriggerElement;
-    private setupVisibilityManager;
-    private updatePanelContent;
-    private reposition;
-    private cleanupPanel;
-    render(): TemplateResult;
-    private handleSlotChange;
+    updated(changed: PropertyValues): void;
+    /** Programmatically shows the panel. Returns a promise that resolves after the show animation. */
+    show(): Promise<void>;
+    /** Programmatically hides the panel. Returns a promise that resolves after the hide animation. */
+    hide(): Promise<void>;
+    private _cleanupPendingShowListener;
+    private _cleanupPendingHideListener;
+    toggle(): void;
+    refresh(): void;
+    /** Returns the current resolved placement from Tippy/Popper. */
+    getCurrentPlacement(): string;
+    /** Returns true if the resolved placement matches the requested placement. */
+    isPositioningOptimal(): boolean;
+    private _joinGroup;
+    private _leaveGroup;
+    private _hideGroupSiblings;
+    private _addEscListener;
+    private _removeEscListener;
+    private _handleEscapeKey;
+    private _applyAria;
+    private _syncAriaExpanded;
+    private _buildDOM;
+    private _resolveArrow;
+    private _setOpen;
+    private _getEffectiveDuration;
+    private _getEffectiveAnimation;
+    private _attachTippy;
+    private _destroyTippy;
 }
 export default NileFloatingPanel;
 declare global {