@aquera/nile-elements 1.3.9-beta-1.2 → 1.3.9-beta-1.3

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

@@ -27,7 +27,10 @@ export const styles = css`
   nile-tooltip::part(body) {
     width: max-content;
     height: max-content;
-    padding: var(--nile-spacing-sm);
+    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-left: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    padding-right: var(--nile-spacing-sm, var(--ng-spacing-sm));
     overflow-x: hidden;
   }
 `;

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

@@ -72,9 +72,9 @@ export class NileSideBarGroupItemIcon extends NileElement {
 
     if (isCollapsed && text) {
       return html`
-        <nile-tooltip distance="18" content=${text} placement="right" hoist>
+        <nile-tooltip distance="18" content=${text} placement="right" >
           <slot>
-            ${this.icon ? html`<nile-icon size="14" color="var(--nile-colors-dark-900)" name=${this.icon}></nile-icon>` : null}
+            ${this.icon ? html`<nile-icon size="14" color="var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))" name=${this.icon}></nile-icon>` : null}
           </slot>
         </nile-tooltip>
       `;
@@ -82,7 +82,7 @@ export class NileSideBarGroupItemIcon extends NileElement {
 
     return html`
       <slot>
-        ${this.icon ? html`<nile-icon color="var(--nile-colors-dark-900)" size="14" name=${this.icon}></nile-icon>` : null}
+        ${this.icon ? html`<nile-icon color="var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))" size="14" name=${this.icon}></nile-icon>` : null}
       </slot>
     `;
   }

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

@@ -8,10 +8,11 @@ export const styles = css`
     display: block;
     flex: 1 1 auto;        
     min-width: 0;         
-    font-size: var(--nile-type-scale-3);  
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  
     line-height: var(--nile-line-height-small)
-    font-weight: var(--nile-font-weight-medium);
-    color: var(--nile-colors-dark-900);
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/src/nile-side-bar-header/nile-side-bar-header.css.ts

@@ -15,14 +15,12 @@ export const styles = css`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: var(--nile-spacing-xl);
-  padding-bottom: var(--nile-spacing-lg);
-  padding-left: var(--nile-spacing-xl);
-  padding-right: var(--nile-spacing-xl);
-  position: sticky;
-    top: 0;
-    z-index: 10;
-    background: var(--nile-colors-neutral-100);
+  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));
+  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));
+  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));
+  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));
+  top: 0;
+  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
 .header-content {
@@ -36,17 +34,17 @@ export const styles = css`
 :host-context(nile-side-bar[collapsed]) .header-content {
   flex-direction: column;
   justify-content: center;
-  gap: var(--nile-spacing-lg);
+  gap: var(--nile-spacing-lg, var(--ng-spacing-md));
 }
 
 
  
  
 ::slotted([slot='logo']) {
-  font-size: var(--nile-type-scale-3);
-  font-weight: var(--nile-font-weight-bold);
+  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));
   letter-spacing: -0.02em;
-  color: var(--nile-colors-dark-900);
+  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
   text-transform: none;
 }
 

package/src/nile-side-bar-panel/index.ts

@@ -0,0 +1 @@
+export { NileSideBarPanel } from './nile-side-bar-panel';

package/src/nile-side-bar-panel/nile-side-bar-panel.css.ts

@@ -0,0 +1,22 @@
+/**
+* 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 {css} from 'lit';
+
+/**
+ * SideBarPanel CSS
+ */
+export const styles = css`
+	:host {
+		width: 100%; 
+		height: 100%;
+		overflow-y: auto;
+	}
+
+`;
+
+export default [styles];

package/src/nile-side-bar-panel/nile-side-bar-panel.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import { customElement, property} from 'lit/decorators.js';
+import {styles} from './nile-side-bar-panel.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile side-bar-panel component.
+ *
+ * @tag nile-side-bar-panel
+ *
+ */
+@customElement('nile-side-bar-panel')
+export class NileSideBarPanel extends NileElement {
+
+	/**
+	 * The styles for nile-side-bar-panel
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<slot> </slot>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileSideBarPanel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-panel': NileSideBarPanel;
+  }
+}

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -53,6 +53,7 @@ export class NileSlideToggle extends NileElement {
           'nile-slide--disabled': this.disabled,
           'nile-slide-toggle--reverse':this.textPosition=='left'
         })}
+        part="base"
       >
         <label 
         class="${classMap({
@@ -60,17 +61,17 @@ export class NileSlideToggle extends NileElement {
           'nile-slide-toggle__switch--left':this.textPosition=='right',
           'nile-slide-toggle__switch--right':this.textPosition=='left',
         })}"
-        class="nile-slide-toggle__switch">
+        class="nile-slide-toggle__switch" part="slide-toggle-switch">
           <input
             type="checkbox"
             .checked=${this.isChecked}
             @change=${this.toggleValue}
           />
-          <span class="nile-slide-toggle__slider"></span>
+          <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
         </label>
-        <span class="nile-slide-toggle__label">
-          <span>${this.label}</span>
-          <span class="nile-slide-toggle__sublabel">${this.sublabel}</span>
+        <span class="nile-slide-toggle__label" part="slide-toggle-label-container">
+          <span part="slide-toggle-label">${this.label}</span>
+          <span class="nile-slide-toggle__sublabel" part="slide-toggle-sublabel">${this.sublabel}</span>
         </span>
       </div>
       ${hasHelpText

package/vscode-html-custom-data.json

@@ -2339,8 +2339,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",
@@ -4334,23 +4339,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; }>`} - "
         }
       ]
     },
@@ -4476,6 +4493,11 @@
         }
       ]
     },
+    {
+      "name": "nile-side-bar-panel",
+      "description": "Nile side-bar-panel component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": []
+    },
     {
       "name": "nile-side-bar",
       "description": "Nile side-bar component.\n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\n  * `fullHeight` {`boolean`} - \n\n  * `collapsedWidth` {`number | null`} - \n\n  * `position` {`\"left\" | \"right\"`} - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n\n  * `width` {`number | null`} - Expanded width of the sidebar (px).\n\n  * `collapsed-width` - Collapsed width of the sidebar (px).\n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `fullHeight` {`boolean`} - \n\n  * `collapsedWidth` {`number | null`} - \n\n  * `position` {`\"left\" | \"right\"`} - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n\n  * `width` {`number | null`} - Expanded width of the sidebar (px).\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -4518,44 +4540,6 @@
         }
       ]
     },
-    {
-      "name": "nile-skeleton-loader",
-      "description": "Attributes:\n\n  * `variant` {`\"text\" | \"circular\" | \"rectangular\" | \"rounded\"`} - \n\n  * `width` {`string | number`} - \n\n  * `height` {`string | number`} - \n\n  * `border-radius` {`string`} - \n\nProperties:\n\n  * `variant` {`\"text\" | \"circular\" | \"rectangular\" | \"rounded\"`} - \n\n  * `width` {`string | number`} - \n\n  * `height` {`string | number`} - \n\n  * `borderRadius` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "`variant` {`\"text\" | \"circular\" | \"rectangular\" | \"rounded\"`} - \n\nProperty: variant\n\nDefault: text",
-          "values": [
-            {
-              "name": "text"
-            },
-            {
-              "name": "circular"
-            },
-            {
-              "name": "rectangular"
-            },
-            {
-              "name": "rounded"
-            }
-          ]
-        },
-        {
-          "name": "width",
-          "description": "`width` {`string | number`} - \n\nProperty: width\n\nDefault: ",
-          "values": []
-        },
-        {
-          "name": "height",
-          "description": "`height` {`string | number`} - \n\nProperty: height\n\nDefault: ",
-          "values": []
-        },
-        {
-          "name": "border-radius",
-          "description": "`border-radius` {`string`} - \n\nProperty: borderRadius\n\nDefault: "
-        }
-      ]
-    },
     {
       "name": "nile-slide-toggle",
       "description": "Attributes:\n\n  * `label` {`string`} - \n\n  * `sublabel` {`string`} - \n\n  * `textPosition` {`\"left\" | \"right\"`} - \n\n  * `isChecked` {`boolean`} - \n\n  * `fullWidth` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `label` {`string`} - \n\n  * `sublabel` {`string`} - \n\n  * `textPosition` {`\"left\" | \"right\"`} - \n\n  * `isChecked` {`boolean`} - \n\n  * `fullWidth` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",