@aquera/nile-elements 1.3.0-beta-1.0 → 1.3.0-beta-1.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.0-beta-1.0",
+  "version": "1.3.0-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -220,4 +220,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/nile-inline-edit/nile-inline-edit-utils.ts

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+
+export function getSlottedElement(shadowRoot: ShadowRoot | null | undefined): HTMLElement | null {
+  if (!shadowRoot) return null;
+  const slot = shadowRoot.querySelector('slot');
+  if (!slot) return null;
+  const assignedElements = slot.assignedElements({ flatten: true });
+  return (assignedElements[0] as HTMLElement) || null;
+}
+
+export function getValueFromSlottedElement(shadowRoot: ShadowRoot | null | undefined): string {
+  const slottedElement = getSlottedElement(shadowRoot);
+  if (!slottedElement) return '';
+  const value = (slottedElement as any).value;
+  return value != null ? String(value) : '';
+}
+
+export function getDisplayValue(value: string, maxPlaceholderLength: number): string {
+  if (value && maxPlaceholderLength > 0 && value.length > maxPlaceholderLength) {
+    return value.substring(0, maxPlaceholderLength) + '...';
+  }
+  return value;
+}
+
+export function setSlottedElementValue(shadowRoot: ShadowRoot | null | undefined, value: string): void {
+  const slottedElement = getSlottedElement(shadowRoot);
+  if (slottedElement && value) {
+    (slottedElement as any).value = value;
+  }
+}
+
+export function updateSlottedElementValue(
+  updateComplete: Promise<boolean> | Promise<void>,
+  shadowRoot: ShadowRoot | null | undefined,
+  value: string
+): void {
+  updateComplete.then(() => {
+    setSlottedElementValue(shadowRoot, value);
+  });
+}
+
+export function updateValueFromSlottedElement(
+  shadowRoot: ShadowRoot | null | undefined,
+  currentValue: string
+): string {
+  const newValue = getValueFromSlottedElement(shadowRoot);
+  return newValue !== currentValue ? newValue : currentValue;
+}
+
+export function handleDocumentFocusIn(
+  event: FocusEvent,
+  component: HTMLElement,
+  isOpen: boolean
+): { shouldClose: boolean; newValue: string | null } {
+  if (!isOpen) return { shouldClose: false, newValue: null };
+  
+  const path = event.composedPath();
+  const isWithinComponent = path.includes(component);
+  
+  if (!isWithinComponent) {
+    const shadowRoot = (component as any).shadowRoot;
+    const currentValue = (component as any).value || '';
+    const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);
+    return { shouldClose: true, newValue };
+  }
+  
+  return { shouldClose: false, newValue: null };
+}
+
+export function handleDocumentMouseDown(
+  event: MouseEvent,
+  component: HTMLElement,
+  isOpen: boolean
+): { shouldClose: boolean; newValue: string | null } {
+  if (!isOpen) return { shouldClose: false, newValue: null };
+  
+  const path = event.composedPath();
+  const isWithinComponent = path.includes(component);
+  
+  if (!isWithinComponent) {
+    const shadowRoot = (component as any).shadowRoot;
+    const currentValue = (component as any).value || '';
+    const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);
+    return { shouldClose: true, newValue };
+  }
+  
+  return { shouldClose: false, newValue: null };
+}
+

package/src/nile-inline-edit/nile-inline-edit.ts

@@ -14,6 +14,15 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-inline-edit.css';
 import NileElement from '../internal/nile-element';
+import {
+  getValueFromSlottedElement,
+  getDisplayValue,
+  setSlottedElementValue,
+  updateSlottedElementValue,
+  updateValueFromSlottedElement,
+  handleDocumentFocusIn,
+  handleDocumentMouseDown,
+} from './nile-inline-edit-utils';
 
 /**
  * Nile inline-edit component.
@@ -43,6 +52,9 @@ export class NileInlineEdit extends NileElement {
   /** Gives the Value to the Inline Edit */
   @property({ type: String, reflect: true }) value = '';
 
+  /** Maximum length for the placeholder value. Values longer than this will be truncated */
+  @property({ type: Number, attribute: 'max-placeholder-length' }) maxPlaceholderLength: number = 25;
+
   /* #endregion */
 
   /* #region Methods */
@@ -52,11 +64,57 @@ export class NileInlineEdit extends NileElement {
    * @slot This is a slot test
    */
 
+  private handleCloseResult(result: { shouldClose: boolean; newValue: string | null }) {
+    if (result.shouldClose) {
+      if (result.newValue !== null) {
+        this.value = result.newValue;
+      }
+      this.open = false;
+    }
+  }
+
+  private handleDocumentFocusInWrapper = (event: FocusEvent) => {
+    const result = handleDocumentFocusIn(event, this, this.open);
+    this.handleCloseResult(result);
+  };
+
+  private handleDocumentMouseDownWrapper = (event: MouseEvent) => {
+    const result = handleDocumentMouseDown(event, this, this.open);
+    this.handleCloseResult(result);
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);
+        document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+        document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+      } else {
+        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+    document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+  }
+
   private handleClick() {
     this.open = true;
   }
   public render(): TemplateResult {
-    const textInsideContainer = this.value || this.placeholder;
+    // Use truncated value for display, or placeholder if empty
+    const displayValue = getDisplayValue(this.value, this.maxPlaceholderLength);
+    const textInsideContainer = displayValue || this.placeholder;
     return html`
       <div class="inline__edit--label" part="label">${this.label}</div>
       ${this.open

package/src/nile-inline-sidebar/nile-inline-sidebar.css.ts

@@ -50,8 +50,8 @@ export const styles = css`
     flex-direction: column;
     gap: var(--nile-spacing-xs);
     padding-right: var(--nile-spacing-xl);
-    padding-top: var(--nile-spacing-3xl);
-    padding-bottom: var(--nile-spacing-3xl);
+    padding-top: var(--nile-spacing-2xl);
+    padding-bottom: var(--nile-spacing-2xl);
   }
 
   nile-side-bar-action-menu {

package/src/nile-inline-sidebar/nile-inline-sidebar.ts

@@ -147,13 +147,8 @@ export class NileInlineSidebar extends NileElement {
 
   private get menuItemsTemplate() {
     if (!this.sidebarItems?.length) return null;
-  
+
     return this.sidebarItems.map((item, index) => {
-      const shouldShowTooltip = (item as any).tooltip;
-      const isTruncated =
-        item.scrollWidth > item.clientWidth ||
-        item.scrollHeight > item.clientHeight;
-  
       const content = html`
         <nile-side-bar-action-menu-item
           ?disabled=${item.hasAttribute('disabled')}
@@ -163,22 +158,16 @@ export class NileInlineSidebar extends NileElement {
           ${item.textContent}
         </nile-side-bar-action-menu-item>
       `;
-      return shouldShowTooltip || isTruncated
+
+      return this.showTooltip
         ? html`
-            <nile-inline-tooltip
-              content=${item.textContent?.trim() || ''}
-              hoist
-              placement="right"
-            >
+            <nile-tooltip content=${item.textContent} hoist placement="right">
               ${content}
-            </nile-inline-tooltip>
+            </nile-tooltip>
           `
         : content;
     });
   }
-  
-  
-  
 
   public render(): TemplateResult {
     return html`

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.ts

@@ -29,7 +29,6 @@ export class NileInlineSidebarItem extends NileElement {
   @property({ type: Boolean, reflect: true }) active = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: String }) href?: string;
-  @property({ type: Boolean, reflect: true }) tooltip = false;
 
   public static get styles(): CSSResultArray {
     return [styles];

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

@@ -19,8 +19,8 @@ export const styles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
+  width: 32px;
+  height: 32px;
   border: none;
   background: transparent;
   color: inherit;
@@ -29,7 +29,9 @@ export const styles = css`
   transition: background-color 0.2s ease;
 }
 
- 
+.expand-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 nile-tooltip::part(body) {
     width: max-content;

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

@@ -46,14 +46,14 @@ export class NileSideBarExpand extends NileElement {
       <button class="expand-btn" @click=${this.toggleSidebar}>
         ${this.collapsed
           ? html`
-              <nile-lite-tooltip placement="right" hoist content="Expand Sidebar">
+              <nile-tooltip placement="right" hoist content="Expand Sidebar">
                 <span part="icon"><nile-icon name="moveright"></nile-icon></span>
-              </nile-lite-tooltip>
+              </nile-tooltip>
             `
           : html`
-              <nile-lite-tooltip placement="right" hoist content="Collapse Sidebar">
+              <nile-tooltip placement="right" hoist content="Collapse Sidebar">
                 <span part="icon"><nile-icon name="moveleft"></nile-icon></span>
-              </nile-lite-tooltip>
+              </nile-tooltip>
             `}
       </button>
     `;

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

@@ -6,6 +6,7 @@ import { css } from 'lit';
 export const styles = css`
  :host {
   display: block;
+  position: sticky;
   bottom: var(--nile-spacing-md);
  padding-bottom: var(--nile-spacing-xl);
 	padding-left: var(--nile-spacing-xl);

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

@@ -10,11 +10,8 @@ export const styles = css`
     display: flex;
     align-items: center;
 	justify-content: flex-start;
-    padding-top: var(--nile-spacing-md);
-    padding-bottom: var(--nile-spacing-md);
-    padding-left: var(--nile-spacing-lg);
-    padding-right: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-3);
+    padding: 12px;
+    font-size: 0.875rem;
     color: var(--nile-side-bar-footer-color, #374151);
     cursor: pointer;
     border-radius: var(--nile-side-bar-footer-radius, 0.375rem);
@@ -56,13 +53,8 @@ export const styles = css`
  
   :host([type='support']) .footer-item {
     background: var(--nile-colors-neutral-400);
-    height: 38px;
-  }
-  :host([type='support'][active]) .footer-item {
-  background: var(--nile-colors-neutral-500);
-}
-   
  
+  }
  
   :host([collapsed][type='avatar']) .footer-item {
   padding: 3px;
@@ -79,10 +71,6 @@ export const styles = css`
   width: 38px;
 }
 
-
-
-
-
 `;
 
 export default [styles];

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.ts

@@ -3,57 +3,31 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-side-bar-footer-item.css';
 import NileElement from '../internal/nile-element';
 
+/**
+ * Nile side-bar-footer-item component.
+ *
+ * @tag nile-side-bar-footer-item
+ *
+ * @slot icon - Slot for footer item icon
+ * @slot text - Slot for footer item text
+ * @slot action - Slot for footer item action
+ *
+ * @csspart base - Wrapper for the footer item
+ * @csspart icon - Wrapper for the icon slot
+ * @csspart text - Wrapper for the text slot
+ * @csspart action - Wrapper for the action slot
+ */
 @customElement('nile-side-bar-footer-item')
 export class NileSideBarFooterItem extends NileElement {
-  /** Optional type for styling or identification ("support", "avatar", etc.) */
-  @property({ type: String, reflect: true }) type: 'support' | 'avatar' | null = null;
-
-  /** Optional trigger name for linked actions */
-  @property({ type: String, reflect: true }) triggerFor: string | null = null;
-
-  /** Active state — can be controlled programmatically or via attribute */
-  @property({ type: Boolean, reflect: true }) active = false;
+  @property({ type: String, reflect: true }) type: string | null = null;
 
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.handleClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('click', this.handleClick);
-  }
-
-  private handleClick = (event: MouseEvent) => {
-    this.emit('nile-footer-item-click', { detail: { type: this.type, triggerFor: this.triggerFor } });
-
-    // Optionally toggle active state on click (you can comment this out if you prefer manual control)
-    this.active = !this.active;
-
-    if (!this.triggerFor) return;
-
-    const actionEl = this.querySelector('nile-side-bar-action');
-    if (!actionEl) return;
-
-    const triggerSlot = actionEl.shadowRoot?.querySelector('slot[name="trigger"]') as HTMLSlotElement | null;
-    const triggerElements = triggerSlot?.assignedElements({ flatten: true }) || [];
-
-    const targetTrigger = triggerElements.find(
-      el => (el as HTMLElement).getAttribute('triggerName') === this.triggerFor
-    );
-
-    if (targetTrigger) {
-      targetTrigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
-    }
-  };
-
   public render(): TemplateResult {
     return html`
-      <div part="base" class="footer-item ${this.type ?? ''} ${this.active ? 'active' : ''}">
+      <div part="base" class="footer-item">
         <slot name="icon" part="icon"></slot>
         <slot name="text" part="text"></slot>
         <slot name="action" part="action"></slot>

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

@@ -8,8 +8,8 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     padding-bottom: var(--nile-spacing-xs);
-    padding-left: var(--nile-spacing-xl);
-    padding-right: var(--nile-spacing-xl);
+    padding-left: var(--nile-spacing-md);
+    padding-right: var(--nile-spacing-md);
     gap: var(--nile-spacing-lg);
   }
 

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

@@ -11,62 +11,60 @@ import {css} from 'lit';
  * SideBarGroupItem CSS
  */
 export const styles = css`
-  :host {
-    display: block;
-  }
+	 :host {
+  display: block;
+}
 
-  .group-item {
-    display: flex;
-    flex-direction: column;
-    height: 38px;
-    width: 208px;
-    overflow: hidden;
-  }
+.group-item {
+  display: flex;
+  flex-direction: column;
+}
 
-  .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 {
+  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: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;
-  }
 
-  :host([active]) [part="link"] {
-    background: var(--nile-colors-primary-100);
-    border-radius: var(--nile-radius-sm);
-    font-weight: var(--nile-font-weight-semibold);
-  }
+::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([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/vscode-html-custom-data.json

@@ -2165,7 +2165,7 @@
     },
     {
       "name": "nile-inline-edit",
-      "description": "Nile inline-edit component.\n\nAttributes:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\nProperties:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline-edit component.\n\nAttributes:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\n  * `max-placeholder-length` {`number`} - Maximum length for the placeholder value. Values longer than this will be truncated\n\nProperties:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\n  * `maxPlaceholderLength` {`number`} - Maximum length for the placeholder value. Values longer than this will be truncated\n\n  * `handleDocumentFocusInWrapper` - \n\n  * `handleDocumentMouseDownWrapper` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "label",
@@ -2183,6 +2183,10 @@
         {
           "name": "value",
           "description": "`value` {`string`} - Gives the Value to the Inline Edit\n\nProperty: value\n\nDefault: "
+        },
+        {
+          "name": "max-placeholder-length",
+          "description": "`max-placeholder-length` {`number`} - Maximum length for the placeholder value. Values longer than this will be truncated\n\nProperty: maxPlaceholderLength\n\nDefault: 25"
         }
       ]
     },
@@ -2203,13 +2207,8 @@
     },
     {
       "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  * `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`} - ",
+      "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`} - ",
       "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",
@@ -4194,33 +4193,12 @@
     },
     {
       "name": "nile-side-bar-footer-item",
-      "description": "Events:\n\n  * `click` {`MouseEvent`} - \n\nAttributes:\n\n  * `type` {`\"support\" | \"avatar\" | null`} - Optional type for styling or identification (\"support\", \"avatar\", etc.)\n\n  * `triggerFor` {`string | null`} - Optional trigger name for linked actions\n\n  * `active` {`boolean`} - Active state — can be controlled programmatically or via attribute\n\nProperties:\n\n  * `type` {`\"support\" | \"avatar\" | null`} - Optional type for styling or identification (\"support\", \"avatar\", etc.)\n\n  * `triggerFor` {`string | null`} - Optional trigger name for linked actions\n\n  * `active` {`boolean`} - Active state — can be controlled programmatically or via attribute\n\n  * `handleClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "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`} - ",
       "attributes": [
         {
           "name": "type",
-          "description": "`type` {`\"support\" | \"avatar\" | null`} - Optional type for styling or identification (\"support\", \"avatar\", etc.)\n\nProperty: type\n\nDefault: null",
-          "values": [
-            {
-              "name": "support"
-            },
-            {
-              "name": "avatar"
-            }
-          ]
-        },
-        {
-          "name": "triggerFor",
-          "description": "`triggerFor` {`string | null`} - Optional trigger name for linked actions\n\nProperty: triggerFor\n\nDefault: null",
+          "description": "`type` {`string | null`} - \n\nProperty: type\n\nDefault: null",
           "values": []
-        },
-        {
-          "name": "active",
-          "description": "`active` {`boolean`} - Active state — can be controlled programmatically or via attribute\n\nProperty: active\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "onclick",
-          "description": "`click` {`MouseEvent`} - "
         }
       ]
     },