@aquera/nile-elements 0.1.67-beta-2.4 → 0.1.67-beta-2.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.67-beta-2.4",
+  "version": "0.1.67-beta-2.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -81,5 +81,4 @@ export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
-export { NileFilePreview } from './nile-file-preview';
-export { NileRichTextEditor } from './nile-rich-text-editor';
+export { NileFilePreview } from './nile-file-preview'

package/src/nile-icon/icons/svg/index.ts

@@ -171,16 +171,6 @@ export { default as flowmapworkflow } from './flowmap-workflow';
 export { default as flowmap } from './flowmap';
 export { default as folder } from './folder';
 export { default as foreach } from './foreach';
-export { default as format_align_justify } from './format_align_justify';
-export { default as format_align_left } from './format_align_left';
-export { default as format_align_middle } from './format_align_middle';
-export { default as format_align_right } from './format_align_right';
-export { default as format_bold } from './format_bold';
-export { default as format_clear } from './format_clear';
-export { default as format_italic } from './format_italic';
-export { default as format_list_bulleted } from './format_list_bulleted';
-export { default as format_list_numbered } from './format_list_numbered';
-export { default as format_underline } from './format_underline';
 export { default as frequency } from './frequency';
 export { default as fullunion } from './full-union';
 export { default as fullscreen } from './fullscreen';
@@ -224,7 +214,6 @@ export { default as identityledger } from './identityledger';
 export { default as ifelse } from './ifelse';
 export { default as ifelsenew } from './ifelsenew';
 export { default as image } from './image';
-export { default as image_2 } from './image_2';
 export { default as immutable } from './immutable';
 export { default as infoicon } from './info-icon';
 export { default as info } from './info';
@@ -248,7 +237,6 @@ export { default as leftpointarrow } from './leftpointarrow';
 export { default as lifebuoy01 } from './life-buoy-01';
 export { default as line } from './line';
 export { default as link } from './link';
-export { default as link_2 } from './link_2';
 export { default as listattribute } from './list-attribute';
 export { default as list } from './list';
 export { default as loader } from './loader';

package/src/nile-table-body/nile-table-body.ts

@@ -42,6 +42,7 @@ export class NileTableBody extends NileElement {
   @query('slot') defaultSlot: HTMLSlotElement;
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
+  @property({ type: Boolean, reflect: true, attribute: true }) expandableRows = false;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
@@ -77,6 +78,9 @@ export class NileTableBody extends NileElement {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
       if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {
+        if (this.expandableRows) {
+          (child as any).expandable = true;
+        }
         let nilerows = this.getChildren(child, 'nile-table-cell-item');
         if (nilerows.length > 0) {
           nilerows.forEach((element: { innerHTML: any }) => {

package/src/nile-table-row/nile-table-row.css.ts

@@ -27,6 +27,58 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
+
+.row-container {
+  /* display: flex; */
+  /* flex-direction: column; */
+  overflow: hidden;
+  contain: layout style;
+}
+
+.row {
+  cursor: default;
+  position: relative;       
+  display: flex;
+  align-items: center;
+}
+
+.row.expandable {
+  border-bottom: 1px solid var(--nile-table-row-border-color);
+  overflow: hidden;
+  contain: layout style;
+}
+ 
+
+.expanded-content {
+  /* overflow: hidden; */
+  transition: max-height 0.3s ease;
+}
+
+.row.expandable .expand-icon {
+  margin-right: 4px;
+}
+ 
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  width: 100%;
+  box-sizing: border-box; 
+}
+
+
+ 
+
+.expand-icon {
+  position: absolute;
+  left: 0.40em;            
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+  user-select: none;
+  z-index: 1;
+}
+ 
 `;
 
 export default [styles];

package/src/nile-table-row/nile-table-row.ts

@@ -10,6 +10,7 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-table-row.css';
@@ -31,6 +32,29 @@ export class NileTableRow extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  @property({ type: Boolean, reflect: true , attribute: true}) expandable = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) expanded = false;
+
+  @query('slot[name="expanded"]')
+	private _expandedSlot!: HTMLSlotElement;
+	
+	@query('slot[name="expandableIcon"]')
+	private _iconSlot!: HTMLSlotElement;
+
+	private tableBodyHasExpandable: any = this.closest('nile-table-body');
+
+	private _fallbackIcon?: HTMLElement | null;
+
+  private toggleExpand(e: MouseEvent): void {
+    this.expanded = !this.expanded;
+    this.dispatchEvent(new CustomEvent('nile-change', {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
 
   /* #endregion */
 
@@ -41,6 +65,10 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
+	protected firstUpdated(): void {
+		this._fallbackIcon = this.renderRoot?.querySelector('nile-icon') ?? null;
+	}
+
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -54,15 +82,66 @@ export class NileTableRow extends NileElement {
     }
   }
 
+	protected updated(changedProperties: PropertyValues): void {
+		if (!changedProperties.has('expandable') || !this._iconSlot) return;
+
+		const assigned = this._iconSlot.assignedElements();
+		const hasAssigned = assigned.length > 0;
+		const displayValue = this.expandable ? '' : 'none';
+
+		if (hasAssigned) {
+			for (const el of assigned) {
+				(el as HTMLElement).style.display = displayValue;
+			}
+		} else if (this._fallbackIcon) {
+			this._fallbackIcon.style.display = displayValue;
+		}
+	}
+
   public render(): TemplateResult {
+ 
+		if (!this.expandable && !this.tableBodyHasExpandable.expandableRows) {
+      return html`
+        <slot
+          part="nile-row"
+          @nile-click-sort="${this.handleSortingAlter}"
+        ></slot>
+      `;
+    }
+  
+ 
     return html`
-      <slot
-        part="nile-row"
-        @nile-click-sort="${this.handleSortingAlter}"
-      ></slot>
+      <div part="row-container" class="row-container">
+        <div
+          part="nile-row"
+          class="row expandable ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort="${this.handleSortingAlter}"
+        >
+          <slot
+						name="expandableIcon"
+						@click=${this.toggleExpand} 
+						class="expand-icon" 
+						part="expandable-icon"
+					>
+            <nile-icon
+              name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
+              role="button"
+              size="10"
+              aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+            </nile-icon>
+          </slot>
+          <slot></slot>
+        </div>
+  
+        ${this.expanded && this.expandable
+          ? html`
+              <div class="expanded-content" part="expanded-content">
+                <slot name="expanded"></slot>
+              </div>`
+          : null}
+      </div>
     `;
   }
-
   /* #endregion */
 }
 

package/vscode-html-custom-data.json

@@ -2951,186 +2951,6 @@
         }
       ]
     },
-    {
-      "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `mentions` - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `mentions` - \n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `containerEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: "
-        },
-        {
-          "name": "singlelineeditor",
-          "description": "`singlelineeditor` {`boolean`} - \n\nProperty: singleLineEditor\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "mentions",
-          "description": "`mentions` - \n\nProperty: mentions\n\nDefault: [object Object]"
-        },
-        {
-          "name": "oncontent-changed",
-          "description": "`content-changed` {`CustomEvent<{ content: string; mention: any; }>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-color",
-      "description": "Events:\n\n  * `change` {`CustomEvent<{ mode: \"foreColor\" | \"backColor\"; value: string; }>`} - \n\nAttributes:\n\n  * `mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `palette` {`string[]`} - Default palette, user can override via property or attribute\n\nProperties:\n\n  * `mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `palette` {`string[]`} - Default palette, user can override via property or attribute\n\n  * `recentColors` {`string[]`} - \n\n  * `inputEl` {`HTMLInputElement`} - \n\n  * `pickCustom` - ",
-      "attributes": [
-        {
-          "name": "mode",
-          "description": "`mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\nProperty: mode\n\nDefault: foreColor",
-          "values": [
-            {
-              "name": "foreColor"
-            },
-            {
-              "name": "backColor"
-            }
-          ]
-        },
-        {
-          "name": "label",
-          "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: Text Color"
-        },
-        {
-          "name": "value",
-          "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: #000000"
-        },
-        {
-          "name": "palette",
-          "description": "`palette` {`string[]`} - Default palette, user can override via property or attribute\n\nProperty: palette\n\nDefault: #000000,#444444,#666666,#999999,#cccccc,#eeeeee,#ffffff,#d32f2f,#f44336,#ff9800,#ffeb3b,#4caf50,#2196f3,#3f51b5,#9c27b0,#03a9f4,#00bcd4,#009688,#8bc34a,#cddc39,#ffc107,#ff5722"
-        },
-        {
-          "name": "onchange",
-          "description": "`change` {`CustomEvent<{ mode: \"foreColor\" | \"backColor\"; value: string; }>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-divider",
-      "attributes": []
-    },
-    {
-      "name": "nile-rte-link",
-      "description": "Events:\n\n  * `link-changed` {`CustomEvent<{ href: string; }>`} - \n\nAttributes:\n\n  * `placeholder` {`string`} - \n\nProperties:\n\n  * `editorEl` {`HTMLElement`} - \n\n  * `placeholder` {`string`} - \n\n  * `linkValue` {`string`} - \n\n  * `selectionRange` {`Range | null`} - ",
-      "attributes": [
-        {
-          "name": "placeholder",
-          "description": "`placeholder` {`string`} - \n\nProperty: placeholder\n\nDefault: https://"
-        },
-        {
-          "name": "onlink-changed",
-          "description": "`link-changed` {`CustomEvent<{ href: string; }>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-mentions-item",
-      "description": "Attributes:\n\n  * `mentionscharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\n  * `mentionscolor` {`string`} - \n\n  * `mentionsprefix` {`string`} - \n\n  * `mentionssuffix` {`string`} - \n\n  * `mentionsdata` {`MentionItem[]`} - \n\nProperties:\n\n  * `mentionsCharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\n  * `mentionsColor` {`string`} - \n\n  * `mentionsPrefix` {`string`} - \n\n  * `mentionsSuffix` {`string`} - \n\n  * `mentionsData` {`MentionItem[]`} - ",
-      "attributes": [
-        {
-          "name": "mentionscharacter",
-          "description": "`mentionscharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\nProperty: mentionsCharacter\n\nDefault: "
-        },
-        {
-          "name": "mentionscolor",
-          "description": "`mentionscolor` {`string`} - \n\nProperty: mentionsColor\n\nDefault: "
-        },
-        {
-          "name": "mentionsprefix",
-          "description": "`mentionsprefix` {`string`} - \n\nProperty: mentionsPrefix\n\nDefault: "
-        },
-        {
-          "name": "mentionssuffix",
-          "description": "`mentionssuffix` {`string`} - \n\nProperty: mentionsSuffix\n\nDefault: "
-        },
-        {
-          "name": "mentionsdata",
-          "description": "`mentionsdata` {`MentionItem[]`} - \n\nProperty: mentionsData\n\nDefault: "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-mentions",
-      "description": "Events:\n\n  * `mention-opened` {`CustomEvent<{ trigger: string; suggestions: MentionItem[]; }>`} - \n\n  * `mention-selected` {`CustomEvent<{ trigger: string; key: string; label: string; prefix: string; suffix: string; }>`} - \n\n  * `input` {`InputEvent`} - \n\nAttributes:\n\n  * `displayformat` {`boolean`} - \n\n  * `mentions` - \n\n  * `mentionformat` - \n\n  * `mentioncolors` - \n\nProperties:\n\n  * `displayFormat` {`boolean`} - \n\n  * `mentions` - \n\n  * `mentionFormat` - \n\n  * `itemsFormats` - \n\n  * `mentionColors` - \n\n  * `externalConfig` - External config from the editor (lowest priority)\n\n  * `itemsConfig` - Config gathered from child <nile-rte-mentions-item> (highest priority)\n\n  * `mentionActiveIndex` {`number`} - \n\n  * `itemsColors` - \n\n  * `config` - \n\n  * `editorEl` {`HTMLElement | null`} - \n\n  * `hostEl` {`HTMLElement | null`} - \n\n  * `dropdownEl` {`HTMLElement | null`} - \n\n  * `menuEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `mentionOpen` {`boolean`} - \n\n  * `mentionTrigger` {`string | null`} - \n\n  * `mentionQuery` {`string`} - \n\n  * `mentionSuggestions` {`MentionItem[]`} - \n\n  * `mentionFiltered` {`MentionItem[]`} - \n\n  * `mentionX` {`number`} - \n\n  * `mentionY` {`number`} - \n\n  * `triggerBtn` {`HTMLElement | null`} - \n\n  * `mo` {`MutationObserver | null`} - \n\n  * `onSelectionChange` - \n\n  * `saveSelection` - \n\n  * `onEditorInput` - \n\n  * `onEditorKeyUp` - \n\n  * `onEditorKeyDown` - \n\n  * `repositionMention` - ",
-      "attributes": [
-        {
-          "name": "displayformat",
-          "description": "`displayformat` {`boolean`} - \n\nProperty: displayFormat\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "mentions",
-          "description": "`mentions` - \n\nProperty: mentions\n\nDefault: [object Object]"
-        },
-        {
-          "name": "mentionformat",
-          "description": "`mentionformat` - \n\nProperty: mentionFormat\n\nDefault: [object Object]"
-        },
-        {
-          "name": "mentioncolors",
-          "description": "`mentioncolors` - \n\nProperty: mentionColors\n\nDefault: [object Object]"
-        },
-        {
-          "name": "onmention-opened",
-          "description": "`mention-opened` {`CustomEvent<{ trigger: string; suggestions: MentionItem[]; }>`} - "
-        },
-        {
-          "name": "onmention-selected",
-          "description": "`mention-selected` {`CustomEvent<{ trigger: string; key: string; label: string; prefix: string; suffix: string; }>`} - "
-        },
-        {
-          "name": "oninput",
-          "description": "`input` {`InputEvent`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-preview",
-      "attributes": []
-    },
-    {
-      "name": "nile-rte-select",
-      "description": "Events:\n\n  * `change` {`CustomEvent<string>`} - \n\nAttributes:\n\n  * `type` {`string`} - 'heading' | 'font' | 'align'\n\n  * `options` {`string`} - JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated)\n\n  * `label` {`string`} - Fallback label for trigger (e.g., \"Align\")\n\nProperties:\n\n  * `type` {`string`} - 'heading' | 'font' | 'align'\n\n  * `options` {`string`} - JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated)\n\n  * `optionsObj` {`(GenericOption | HeadingOption)[] | undefined`} - Programmatic options (preferred for TS safety).\n\n  * `label` {`string`} - Fallback label for trigger (e.g., \"Align\")\n\n  * `selectedValue` {`string`} - \n\n  * `parsedOptions` {`NormalizedOption[]`} - ",
-      "attributes": [
-        {
-          "name": "type",
-          "description": "`type` {`string`} - 'heading' | 'font' | 'align'\n\nProperty: type\n\nDefault: "
-        },
-        {
-          "name": "options",
-          "description": "`options` {`string`} - JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated)\n\nProperty: options\n\nDefault: []"
-        },
-        {
-          "name": "label",
-          "description": "`label` {`string`} - Fallback label for trigger (e.g., \"Align\")\n\nProperty: label\n\nDefault: "
-        },
-        {
-          "name": "onchange",
-          "description": "`change` {`CustomEvent<string>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-toolbar-item",
-      "description": "Attributes:\n\n  * `name` {`string`} - \n\n  * `label` {`string`} - \n\nProperties:\n\n  * `name` {`string`} - \n\n  * `label` {`string`} - ",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "`name` {`string`} - \n\nProperty: name\n\nDefault: "
-        },
-        {
-          "name": "label",
-          "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-toolbar",
-      "attributes": []
-    },
     {
       "name": "nile-section-message",
       "description": "Attributes:\n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `icon-size` {`number`} - \n\n  * `variant` {`\"primary\" | \"success\" | \"warning\" | \"error\"`} - The section message theme variant.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `iconSize` {`number`} - \n\n  * `variant` {`\"primary\" | \"success\" | \"warning\" | \"error\"`} - The section message theme variant.\n\n  * `iconMap` {`{ primary: string; success: string; warning: string; error: string; }`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -3832,7 +3652,7 @@
     },
     {
       "name": "nile-table-body",
-      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `expandableRows` {`boolean`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `expandableRows` {`boolean`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
@@ -3845,6 +3665,11 @@
               "name": "secondary"
             }
           ]
+        },
+        {
+          "name": "expandableRows",
+          "description": "`expandableRows` {`boolean`} - \n\nProperty: expandableRows\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },
@@ -3886,8 +3711,23 @@
     },
     {
       "name": "nile-table-row",
-      "description": "nile-table-row component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "nile-table-row component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ expanded: boolean; }>`} - \n\nAttributes:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\nProperties:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\n  * `_expandedSlot` {`HTMLSlotElement`} - \n\n  * `_iconSlot` {`HTMLSlotElement`} - \n\n  * `tableBodyHasExpandable` - \n\n  * `_fallbackIcon` {`HTMLElement | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "expandable",
+          "description": "`expandable` {`boolean`} - \n\nProperty: expandable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expanded",
+          "description": "`expanded` {`boolean`} - \n\nProperty: expanded\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-change",
+          "description": "`nile-change` {`CustomEvent<{ expanded: boolean; }>`} - "
+        }
+      ]
     },
     {
       "name": "nile-table",