@aquera/nile-elements 1.6.0 → 1.6.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -13,6 +13,7 @@
     "./nile-heading": "./dist/src/nile-heading/index.js",
     "./nile-icon": "./dist/src/nile-icon/index.js",
     "./nile-input": "./dist/src/nile-input/index.js",
+    "./nile-otp-input": "./dist/src/nile-otp-input/index.js",
     "./nile-sidebar": "./dist/src/nile-sidebar/index.js",
     "./nile-menu": "./dist/src/nile-menu/index.js",
     "./nile-badge": "./dist/src/nile-badge/index.js",
@@ -116,7 +117,8 @@
     "./nile-inline-sidebar": "./dist/src/nile-inline-sidebar/index.js",
     "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js",
     "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js",
-    "./nile-qr-code": "./dist/src/nile-qr-code/index.js"
+    "./nile-qr-code": "./dist/src/nile-qr-code/index.js",
+    "./nile-floating-panel": "./dist/src/nile-floating-panel/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -221,4 +223,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/plop-templates/lit/index.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2025
+* Copyright Aquera Inc 2026
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.

package/plop-templates/lit/lit.css.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2025
+* Copyright Aquera Inc 2026
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.

package/plop-templates/lit/lit.ts.hbs

@@ -1,5 +1,5 @@
 /**
- * Copyright Aquera Inc 2025
+ * Copyright Aquera Inc 2026
  *
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/src/index.ts

@@ -2,6 +2,7 @@ export { NileButton } from './nile-button';
 export { NileHeading } from './nile-heading';
 export { NileIcon } from './nile-icon';
 export { NileInput } from './nile-input';
+export { NileOtpInput } from './nile-otp-input';
 export { NileMenu } from './nile-menu';
 export { NileBadge } from './nile-badge';
 export { NileDrawer } from './nile-drawer';
@@ -75,7 +76,6 @@ export { NileTitle } from './nile-title';
 export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
-export { NileFloatingPanel } from './nile-floating-panel';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
@@ -114,4 +114,5 @@ export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
 export { NileliteTooltip } from './nile-lite-tooltip';
 export { NileSideBarPanel } from './nile-side-bar-panel';
 export { NileDetail } from './nile-detail';
-export { NileQrCode } from './nile-qr-code';
+export { NileQrCode } from './nile-qr-code';
+export { NileFloatingPanel } from './nile-floating-panel';

package/src/internal/enum.ts

@@ -5,7 +5,8 @@ export const KeyCode = {
   SHIFT: 'ShiftLeft', // or 'ShiftRight'
   CTRL: 'ControlLeft', // or 'ControlRight'
   ESCAPE: 'Escape',
-  SPACE: 'Space',
+  SPACE: ' ',
+  DELETE: 'Delete',
   PAGE_UP: 'PageUp',
   PAGE_DOWN: 'PageDown',
   END: 'End',
@@ -18,3 +19,24 @@ export const KeyCode = {
   COPY: 'Copy',
   PASTE: 'Paste',
 };
+
+export enum Nile_Events {
+  NILE_INIT = "nile-init",
+  NILE_CHANGE = "nile-change",
+  NILE_DESTROY = "nile-destroy", 
+  NILE_PASTE = "nile-paste",
+  NILE_CUT = "nile-cut",
+  NILE_COPY = "nile-copy",
+  NILE_SELECT_ALL = "nile-select-all",
+  NILE_FOCUS = "nile-focus",
+  NILE_BLUR = "nile-blur",
+  NILE_INVALID = "nile-invalid",
+  NILE_VALID = "nile-valid",
+  NILE_RESET = "nile-reset",
+  NILE_CLEAR = "nile-clear",
+  NILE_CLEAR_ALL = "nile-clear-all",
+  NILE_CLEAR_SELECTION = "nile-clear-selection",
+  NILE_CLEAR_ALL_SELECTION = "nile-clear-all-selection",
+  NILE_INPUT = "nile-input",
+  NILE_COMPLETE = "nile-complete",
+}

package/src/nile-floating-panel/index.ts

@@ -1,2 +1 @@
 export { NileFloatingPanel } from './nile-floating-panel';
-

package/src/nile-floating-panel/nile-floating-panel.css.ts

@@ -6,36 +6,59 @@
  */
 
 import { css } from 'lit';
+
 export const styles = css`
-  :host {
-    box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  nile-floating-panel {
     display: inline-block;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
+    padding: 0;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    line-height: 1.4;
+    white-space: normal;
+    outline: 0;
+    transition-property: transform, visibility, opacity;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-animation='fade'][data-state='hidden'] {
+    opacity: 0;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-content {
     position: relative;
+    z-index: 1;
+    padding: 0;
   }
 
-  :host([hidden]) {
-    display: none;
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {
+    fill: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
-  slot {
-    display: none;
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
+    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
-`;
 
-export const panelContainerStyles = css`
-  .nile-floating-panel__container {
-    position: fixed;
-    box-sizing: border-box;
-    z-index: 800;
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  .nile-floating-panel__body {
+    display: flex;
+    flex-direction: column;
+    height: auto;
     min-width: var(--nile-width-352px, var(--ng-width-80));
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  .nile-floating-panel__title {
+    display: block;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
@@ -44,7 +67,112 @@ export const panelContainerStyles = css`
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));
   }
+
+  .nile-floating-panel__title:empty {
+    display: none;
+  }
+
+  .nile-floating-panel__action {
+    align-self: end;
+    display: inline;
+  }
+
+  .nile-floating-panel__action:empty {
+    display: none;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow:after,
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow > svg {
+    top: 16px;
+    transform: rotate(180deg);
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 16px; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow:after,
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow > svg {
+    transform: rotate(90deg);
+    top: calc(50% - 3px);
+    left: 11px;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow:after,
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow > svg {
+    transform: rotate(-90deg);
+    top: calc(50% - 3px);
+    right: 11px;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {
+    width: 16px;
+    height: 16px;
+    text-align: initial;
+    position: absolute;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {
+    position: absolute;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {
+    bottom: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:before {
+    bottom: -7px;
+    border-width: 8px 8px 0;
+    border-top-color: initial;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {
+    top: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:before {
+    top: -7px;
+    border-width: 0 8px 8px;
+    border-bottom-color: initial;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {
+    right: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:before {
+    right: -7px;
+    border-width: 8px 0 8px 8px;
+    border-left-color: initial;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {
+    left: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:before {
+    left: -7px;
+    border-width: 8px 8px 8px 0;
+    border-right-color: initial;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
+    width: 16px;
+    height: 16px;
+    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
 `;
 
-export default [styles];
+export function injectGlobalFloatingPanelStyles(): void {
+  if (typeof document === 'undefined') return;
+
+  const STYLE_ID = 'nile-floating-panel-styles';
+  if (document.getElementById(STYLE_ID)) return;
 
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = styles.cssText;
+  document.head?.appendChild(style);
+}
+
+injectGlobalFloatingPanelStyles();
+
+export default [styles];