@aquera/nile-elements 1.3.5-beta-1.0 → 1.3.6-beta-1.0

package/src/nile-side-bar-group-item/nile-side-bar-group-item.css.ts

@@ -11,60 +11,62 @@ import {css} from 'lit';
  * SideBarGroupItem CSS
  */
 export const styles = css`
-	 :host {
-  display: block;
-}
+  :host {
+    display: block;
+  }
 
-.group-item {
-  display: flex;
-  flex-direction: column;
-}
+  .group-item {
+    display: flex;
+    flex-direction: column;
+    height: 38px;
+    width: 208px;
+    overflow: hidden;
+  }
 
-.item-link {
-  display: flex;
-  align-items: center;
-padding-top: var(--nile-spacing-lg);
-padding-bottom: var(--nile-spacing-lg);
-padding-left: var(--nile-spacing-md);
-padding-right: var(--nile-spacing-md);
-  cursor: pointer;
-  color: var(--nile-colors-dark-900);
-  text-decoration: none;
-  font-size: var(--nile-type-scale-3);
-  line-height: 1.4;
-}
+  .item-link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    width: 100%;
+    padding: var(--nile-spacing-lg) var(--nile-spacing-md);
+    cursor: pointer;
+    color: var(--nile-colors-dark-900);
+    text-decoration: none;
+    font-size: var(--nile-type-scale-3);
+    line-height: 1.4;
+    box-sizing: border-box;
+  }
 
-.item-link:hover {
-  background: var(--nile-colors-neutral-400);
-  border-radius: var(--nile-radius-sm);
-}
+  .item-link:hover {
+    background: var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-sm);
+  }
 
+  ::slotted(nile-side-bar-group-item-icon) {
+    flex-shrink: 0;
+  }
 
+  ::slotted(nile-side-bar-group-item-text) {
+    flex-grow: 1;
+  }
 
-::slotted(nile-side-bar-group-item-icon) {
-  flex-shrink: 0;
-}
-
-::slotted(nile-side-bar-group-item-text) {
-  flex-grow: 1;
-}
-:host([active]) [part="link"] {
-  background:    var(--nile-colors-primary-100);
-  border-radius: var(--nile-radius-sm);
-  font-weight: var(--nile-font-weight-semibold);
-}
-
-:host([collapsed]) .group-item {
-height: 38px;
-width: 38px;
-}
-:host([disabled]) .item-link {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
+  :host([active]) [part="link"] {
+    background: var(--nile-colors-primary-100);
+    border-radius: var(--nile-radius-sm);
+    font-weight: var(--nile-font-weight-semibold);
+  }
 
+  :host([collapsed]) .group-item {
+    height: 38px;
+    width: 38px;
+  }
 
+  :host([disabled]) .item-link {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-virtual-select/nile-virtual-select.ts

@@ -793,7 +793,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.updateComplete.then(() => {
         const virtualized = this.shadowRoot?.querySelector('.virtualized') as HTMLElement;
         if (virtualized) {
-          if (this.data.length <= 5) {
+          if (this.data.length < 5) {
             virtualized.classList.add('no-scroll');
           } else {
             virtualized.classList.remove('no-scroll');

package/src/nile-virtual-select/portal-manager.ts

@@ -391,7 +391,7 @@ export class PortalManager {
 
       const virtualized = listbox.querySelector('.virtualized') as HTMLElement;
       if (virtualized && virtualized.isConnected) {
-        const fewItems = this.component.data?.length <= 5;
+        const fewItems = this.component.data?.length < 5;
 
         if (fewItems) {
           virtualized.style.overflowY = 'hidden';

package/vscode-html-custom-data.json

@@ -1740,6 +1740,63 @@
         }
       ]
     },
+    {
+      "name": "nile-floating-panel",
+      "description": "Nile floating panel component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the panel opens.\n\n  * `nile-hide` {} - Emitted when the panel closes.\n\nAttributes:\n\n  * `anchor` {`FloatingPanelAnchor`} - \n\n  * `position` {`FloatingPanelPosition`} - \n\n  * `open` {`boolean`} - \n\n  * `close-on-outside-click` {`boolean`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `anchor` {`FloatingPanelAnchor`} - \n\n  * `position` {`FloatingPanelPosition`} - \n\n  * `open` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `panelContainer` {`HTMLElement | null`} - \n\n  * `positionManager` - \n\n  * `styleManager` - \n\n  * `eventManager` - \n\n  * `visibilityManager` - \n\n  * `handleSlotChange` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "anchor",
+          "description": "`anchor` {`FloatingPanelAnchor`} - \n\nProperty: anchor\n\nDefault: null",
+          "values": []
+        },
+        {
+          "name": "position",
+          "description": "`position` {`FloatingPanelPosition`} - \n\nProperty: position\n\nDefault: bottom",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "`open` {`boolean`} - \n\nProperty: open\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "close-on-outside-click",
+          "description": "`close-on-outside-click` {`boolean`} - \n\nProperty: closeOnOutsideClick\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "enableVisibilityEffect",
+          "description": "`enableVisibilityEffect` {`boolean`} - \n\nProperty: enableVisibilityEffect\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "enableTabClose",
+          "description": "`enableTabClose` {`boolean`} - \n\nProperty: enableTabClose\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-show",
+          "description": "`nile-show` {} - Emitted when the panel opens."
+        },
+        {
+          "name": "onnile-hide",
+          "description": "`nile-hide` {} - Emitted when the panel closes."
+        }
+      ]
+    },
     {
       "name": "nile-footer",
       "description": "Nile icon component.\n\n",
@@ -2277,8 +2334,13 @@
     },
     {
       "name": "nile-inline-sidebar-item",
-      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
+        {
+          "name": "tooltip",
+          "description": "`tooltip` {`boolean`} - \n\nProperty: tooltip\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "active",
           "description": "`active` {`boolean`} - Marks the item as active (selected).\n\nProperty: active\n\nDefault: false",
@@ -4272,23 +4334,35 @@
     },
     {
       "name": "nile-side-bar-expand",
-      "description": "Nile side-bar-expand component.\n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile side-bar-expand component.\n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\n  * `expandTooltipText` {`string`} - \n\n  * `collapseTooltipText` {`string`} - \n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `expandTooltipText` {`string`} - \n\n  * `collapseTooltipText` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "collapsed",
           "description": "`collapsed` {`boolean`} - \n\nProperty: collapsed\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "expandTooltipText",
+          "description": "`expandTooltipText` {`string`} - \n\nProperty: expandTooltipText\n\nDefault: Expand Sidebar"
+        },
+        {
+          "name": "collapseTooltipText",
+          "description": "`collapseTooltipText` {`string`} - \n\nProperty: collapseTooltipText\n\nDefault: Collapse Sidebar"
         }
       ]
     },
     {
       "name": "nile-side-bar-footer-item",
-      "description": "Nile side-bar-footer-item component.\n\nSlots:\n\n  * `icon` {} - Slot for footer item icon\n\n  * `text` {} - Slot for footer item text\n\n  * `action` {} - Slot for footer item action\n\nAttributes:\n\n  * `type` {`string | null`} - \n\nProperties:\n\n  * `type` {`string | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile side-bar-footer-item component.\n\nEvents:\n\n  * `nile-click` {`CustomEvent<{ type: string | null; }>`} - \n\nSlots:\n\n  * `icon` {} - Slot for footer item icon\n\n  * `text` {} - Slot for footer item text\n\n  * `action` {} - Slot for footer item action\n\nAttributes:\n\n  * `type` {`string | null`} - \n\nProperties:\n\n  * `type` {`string | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
           "description": "`type` {`string | null`} - \n\nProperty: type\n\nDefault: null",
           "values": []
+        },
+        {
+          "name": "onnile-click",
+          "description": "`nile-click` {`CustomEvent<{ type: string | null; }>`} - "
         }
       ]
     },