@aquera/nile-elements 1.7.8 → 1.8.0

package/src/nile-status-light/nile-status-light.css.ts

@@ -0,0 +1,146 @@
+/**
+ * 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.
+ */
+
+import { css } from 'lit';
+export const styles = css`
+  :host {
+    -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));
+    display: inline-block;
+  }
+
+  .status-light {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-2));
+    box-sizing: border-box;
+  }
+
+  .status-light__dot {
+    position: relative;
+    flex: none;
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    width: var(--nile-height-10px, var(--ng-height-10px));
+    height: var(--nile-height-10px, var(--ng-height-10px));
+    background: var(--nile-colors-gray-light-mode-500, var(--ng-componentcolors-utility-gray-500));
+  }
+
+  .status-light__label {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-gray-900));
+  }
+
+  /* #region Sizes */
+
+  .status-light--small .status-light__dot {
+    width: var(--nile-height-8px, var(--ng-height-8px));
+    height: var(--nile-height-8px, var(--ng-height-8px));
+  }
+
+  .status-light--medium .status-light__dot {
+    width: var(--nile-height-10px, var(--ng-height-10px));
+    height: var(--nile-height-10px, var(--ng-height-10px));
+  }
+
+  .status-light--large .status-light__dot {
+    width: var(--nile-height-12px, var(--ng-height-12px));
+    height: var(--nile-height-12px, var(--ng-height-12px));
+  }
+
+  .status-light--x-large .status-light__dot {
+    width: var(--nile-height-14px, var(--ng-height-14px));
+    height: var(--nile-height-14px, var(--ng-height-14px));
+  }
+
+  .status-light--large .status-light__label,
+  .status-light--x-large .status-light__label {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-md));
+  }
+
+ 
+
+  .status-light--positive .status-light__dot {
+    background: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));
+  }
+
+  .status-light--negative .status-light__dot {
+    background: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-500));
+  }
+
+  .status-light--notice .status-light__dot {
+    background: var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-500));
+  }
+
+  .status-light--informative .status-light__dot {
+    background: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-blue-light-500));
+  }
+
+  .status-light--neutral .status-light__dot {
+    background: var(--nile-colors-gray-light-mode-500, var(--ng-componentcolors-utility-gray-500));
+  }
+
+  .status-light--inactive .status-light__dot {
+    background: var(--nile-colors-gray-light-mode-300, var(--ng-componentcolors-utility-gray-300));
+  }
+
+  .status-light--inactive .status-light__label {
+    color: var(--nile-colors-text-tertiary, var(--ng-componentcolors-utility-gray-500));
+  }
+
+  .status-light--disabled .status-light__dot {
+    background: var(--nile-colors-text-disabled, var(--ng-componentcolors-utility-gray-300));
+  }
+
+  .status-light--disabled .status-light__label {
+    color: var(--nile-colors-text-disabled, var(--ng-colors-text-disabled));
+  }
+
+ 
+
+  .status-light--pulse .status-light__dot::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: inherit;
+    animation: status-light-pulse 1.5s ease-out infinite;
+  }
+
+  @keyframes status-light-pulse {
+    0% {
+      transform: scale(1);
+      opacity: 0.6;
+    }
+    100% {
+      transform: scale(2.5);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .status-light--pulse .status-light__dot::after {
+      animation: none;
+    }
+  }
+
+  /* #endregion */
+`;
+
+export default [styles];

package/src/nile-status-light/nile-status-light.ts

@@ -0,0 +1,111 @@
+  /**
+   * 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.
+   */
+
+  import { html, TemplateResult } from 'lit';
+  import { styles } from './nile-status-light.css';
+  import { classMap } from 'lit/directives/class-map.js';
+  import { customElement, property } from 'lit/decorators.js';
+  import NileElement, { setupA11yMetadata } from '../internal/nile-element';
+  import type { CSSResultGroup } from 'lit';
+  import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
+  import { A11yRole } from '../internal/accessibility/a11y.role.enum';
+  import { Role } from '../internal/accessibility/role.enum';
+
+  /**
+   * Nile status light component.
+   *
+   * @tag nile-status-light
+   *
+   * @summary Status lights describe the status of an object, using a colored dot
+   * alongside a text label (e.g. "Active", "Error", "Pending").
+   * @status experimental
+   *
+   * @slot - The status light's text label.
+   *
+   * @attr {boolean} pulse - Optional pulse animation for active statuses.
+   *
+   * @csspart base - The component's base wrapper.
+   * @csspart indicator - The colored status dot.
+   * @csspart label - The status light's text label.
+   *
+   * @example
+   * <!-- Pulse animation for an active status -->
+   * <nile-status-light variant="positive" pulse>Active</nile-status-light>
+   *
+   * @example
+   * <!-- Disabled status light with muted colors -->
+   * <nile-status-light variant="positive" disabled>Inactive</nile-status-light>
+   */
+  @customElement('nile-status-light')
+  export class NileStatusLight extends NileElement {
+    static styles: CSSResultGroup = styles;
+
+    connectedCallback(): void {
+      super.connectedCallback();
+      setupA11yMetadata(this, {
+        [Role.Role]: A11yRole.Text,
+        [A11yProperty.AriaLabel]: this.textContent?.trim() || '',
+      });
+    }
+
+    /** The status light's color variant. */
+    @property({ reflect: true }) variant:
+      | 'positive'
+      | 'negative'
+      | 'notice'
+      | 'informative'
+      | 'neutral'
+      | 'inactive' = 'neutral';
+
+    /** The status light's size. */
+    @property({ reflect: true, attribute: true }) size: 'small' | 'medium' | 'large' | 'x-large' =
+      'medium';
+
+    /** Disables the status light, muting its colors. */
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    /** Draws attention to an active status with a pulsing animation around the dot. */
+    @property({ type: Boolean, reflect: true }) pulse = false;
+
+    render(): TemplateResult {
+      return html`
+        <span
+          part="base"
+          class=${classMap({
+            'status-light': true,
+            'status-light--positive': this.variant === 'positive',
+            'status-light--negative': this.variant === 'negative',
+            'status-light--notice': this.variant === 'notice',
+            'status-light--informative': this.variant === 'informative',
+            'status-light--neutral': this.variant === 'neutral',
+            'status-light--inactive': this.variant === 'inactive',
+            'status-light--small': this.size === 'small',
+            'status-light--medium': this.size === 'medium',
+            'status-light--large': this.size === 'large',
+            'status-light--x-large': this.size === 'x-large',
+            'status-light--disabled': this.disabled,
+            'status-light--pulse': this.pulse && !this.disabled,
+          })}
+      >
+          <span
+            part="indicator"
+            class="status-light__dot"
+            aria-hidden="true"
+          ></span>
+          <slot part="label" class="status-light__label"></slot>
+        </span>
+      `;
+    }
+  }
+
+  export default NileStatusLight;
+
+  declare global {
+    interface HTMLElementTagNameMap {
+      'nile-status-light': NileStatusLight;
+    }
+  }

package/vscode-html-custom-data.json

@@ -1700,6 +1700,84 @@
         }
       ]
     },
+    {
+      "name": "nile-context-menu-group",
+      "description": "Nile context-menu group. Groups related items inside a `nile-context-menu`.\n\nSlots:\n\n  * ` ` {} - Default slot for `nile-context-menu-item` children.\n\nAttributes:\n\n  * `label` {`string`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `_idSeq` {`number`} - \n\n  * `_labelId` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
+        }
+      ]
+    },
+    {
+      "name": "nile-context-menu-item",
+      "description": "Nile context-menu item. A clickable entry inside `nile-context-menu`.\n\nSlots:\n\n  * ` ` {} - Default slot for the visible label.\n\n  * `icon` {} - Optional leading icon (e.g. a `<nile-glyph slot=\"icon\">`).\n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `onSelect` - \n\n  * `_hasSubmenu` {`boolean`} - \n\n  * `_hasIcon` {`boolean`} - \n\n  * `_submenuExpanded` {`boolean`} - \n\n  * `override` - \n\n  * `hasSubmenu` {`boolean`} - \n\n  * `_onSlotChange` - \n\n  * `_onIconSlotChange` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: "
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
+    {
+      "name": "nile-context-menu",
+      "description": "Nile context-menu component.\n\nEvents:\n\n  * `nile` {} - change Fired on menu lifecycle and selection. `detail.type` is one of\n`'open'`, `'click'`, or `'close'`; remaining fields depend on the type.\n\nSlots:\n\n  * ` ` {} - Default menu content.\n\nAttributes:\n\n  * `for` {`string`} - \n\n  * `trigger` {`NileContextMenuTrigger`} - \n\n  * `skipOn` {`string`} - \n\n  * `zIndex` {`number`} - \n\nProperties:\n\n  * `for` {`string`} - \n\n  * `trigger` {`NileContextMenuTrigger`} - \n\n  * `skipOn` {`string`} - \n\n  * `zIndex` {`number`} - \n\n  * `items` {`NileContextMenuGroupData[]`} - \n\n  * `_isDataMode` {`boolean`} - \n\n  * `_floatingPanel` {`HTMLElement | undefined`} - \n\n  * `_items` {`NileContextMenuItem[]`} - \n\n  * `_open` {`boolean`} - \n\n  * `_openContext` {`NileContextMenuOpenContext | null`} - \n\n  * `_targetEl` {`Element | null`} - \n\n  * `_previouslyFocused` {`HTMLElement | null`} - \n\n  * `_openInstances` {`Set<NileContextMenu>`} - \n\n  * `_detachTriggers` - \n\n  * `_lightObserver` {`MutationObserver | undefined`} - \n\n  * `_menuObserver` {`MutationObserver | undefined`} - \n\n  * `_proxyEl` {`HTMLDivElement | undefined`} - \n\n  * `_proxyId` {`string`} - \n\n  * `_wasDataMode` {`boolean`} - \n\n  * `targetElement` {`Element | null`} - \n\n  * `_menuContainerRef` {`HTMLDivElement | null`} - \n\n  * `override` - \n\n  * `menuItems` {`readonly NileContextMenuItem[]`} - \n\n  * `isOpen` {`boolean`} - \n\n  * `_onKeydown` - \n\n  * `_onScroll` - \n\n  * `_onOutsidePointer` - \n\n  * `_onDescendantSelect` - \n\n  * `_onPanelShown` - \n\n  * `_onMenuMouseOver` - \n\n  * `_onMenuClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "for",
+          "description": "`for` {`string`} - \n\nProperty: for\n\nDefault: "
+        },
+        {
+          "name": "trigger",
+          "description": "`trigger` {`NileContextMenuTrigger`} - \n\nProperty: trigger\n\nDefault: right",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "both"
+            },
+            {
+              "name": "manual"
+            },
+            {
+              "name": "global"
+            }
+          ]
+        },
+        {
+          "name": "skipOn",
+          "description": "`skipOn` {`string`} - \n\nProperty: skipOn\n\nDefault: "
+        },
+        {
+          "name": "zIndex",
+          "description": "`zIndex` {`number`} - \n\nProperty: zIndex\n\nDefault: 9999"
+        },
+        {
+          "name": "onnile",
+          "description": "`nile` {} - change Fired on menu lifecycle and selection. `detail.type` is one of\n`'open'`, `'click'`, or `'close'`; remaining fields depend on the type."
+        }
+      ]
+    },
+    {
+      "name": "nile-context-submenu",
+      "description": "Nested submenu inside a `nile-context-menu-item`.\n\nAttributes:\n\n  * `zIndex` {`number`} - \n\nProperties:\n\n  * `zIndex` {`number`} - \n\n  * `_open` {`boolean`} - \n\n  * `openStack` {`NileContextSubmenu[]`} - \n\n  * `_parentItem` - \n\n  * `_proxyId` {`string`} - \n\n  * `_proxyEl` {`HTMLDivElement | undefined`} - \n\n  * `_floatingPanelEl` - \n\n  * `_menuContainerRef` {`HTMLDivElement | null`} - \n\n  * `_openTimer` {`number | undefined`} - \n\n  * `_closeTimer` {`number | undefined`} - \n\n  * `_setupDone` {`boolean`} - \n\n  * `override` - \n\n  * `_onParentEnter` - \n\n  * `_onParentLeave` - \n\n  * `_onParentClick` - \n\n  * `_onPanelEnter` - \n\n  * `_onPanelLeave` - \n\n  * `isOpen` {`boolean`} - \n\n  * `parentItem` - \n\n  * `_onMenuMouseOver` - \n\n  * `_onNestedSelect` - \n\n  * `_onMenuClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "zIndex",
+          "description": "`zIndex` {`number`} - \n\nProperty: zIndex\n\nDefault: 9999"
+        }
+      ]
+    },
     {
       "name": "nile-date-picker",
       "description": "Attributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -6412,6 +6490,64 @@
         }
       ]
     },
+    {
+      "name": "nile-status-light",
+      "description": "Nile status light component.\n\nSlots:\n\n  * ` ` {} - The status light's text label.\n\nAttributes:\n\n  * `variant` {`\"positive\" | \"negative\" | \"notice\" | \"informative\" | \"neutral\" | \"inactive\"`} - The status light's color variant.\n\n  * `size` {`\"small\" | \"medium\" | \"large\" | \"x-large\"`} - The status light's size.\n\n  * `disabled` {`boolean`} - Disables the status light, muting its colors.\n\n  * `pulse` {boolean} - Draws attention to an active status with a pulsing animation around the dot.\n\nProperties:\n\n  * `styles` - \n\n  * `variant` {`\"positive\" | \"negative\" | \"notice\" | \"informative\" | \"neutral\" | \"inactive\"`} - The status light's color variant.\n\n  * `size` {`\"small\" | \"medium\" | \"large\" | \"x-large\"`} - The status light's size.\n\n  * `disabled` {`boolean`} - Disables the status light, muting its colors.\n\n  * `pulse` {boolean} - Draws attention to an active status with a pulsing animation around the dot.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "`variant` {`\"positive\" | \"negative\" | \"notice\" | \"informative\" | \"neutral\" | \"inactive\"`} - The status light's color variant.\n\nProperty: variant\n\nDefault: neutral",
+          "values": [
+            {
+              "name": "positive"
+            },
+            {
+              "name": "negative"
+            },
+            {
+              "name": "notice"
+            },
+            {
+              "name": "informative"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "inactive"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "`size` {`\"small\" | \"medium\" | \"large\" | \"x-large\"`} - The status light's size.\n\nProperty: size\n\nDefault: medium",
+          "values": [
+            {
+              "name": "small"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "x-large"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - Disables the status light, muting its colors.\n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "pulse",
+          "description": "`pulse` {boolean} - Draws attention to an active status with a pulsing animation around the dot.\n\nProperty: pulse\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "nile-stepper-item",
       "description": "Nile stepper-item component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `completed` {`boolean`} - \n\n  * `current` {`boolean`} - \n\nProperties:\n\n  * `absoluteTitle` {`HTMLDivElement`} - \n\n  * `absoluteSubtitle` {`HTMLDivElement`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `completed` {`boolean`} - \n\n  * `current` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `size` {`\"sm\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `isFirst` {`boolean`} - \n\n  * `isLast` {`boolean`} - \n\n  * `isComplete` {`boolean`} - \n\n  * `isCurrent` {`boolean`} - \n\n  * `isManualMode` {`boolean`} - \n\n  * `currentStepValue` {`Number`} - \n\n  * `completedStepValue` {`Number`} - \n\n  * `calculatedCompletedStepValue` {`Number`} - \n\n  * `value` {`Number`} - \n\n  * `haveFlex` {`Boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -6501,7 +6637,7 @@
     },
     {
       "name": "nile-tab-group",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-tab-show` - Emitted when a tab is shown.\n\n  * `nile-tab-hide` - Emitted when a tab is hidden.\n\nSlots:\n\n  * ` ` {} - Used for grouping tab panels in the tab group. Must be `<nile-tab-panel>` elements.\n\n  * `nav` {} - Used for grouping tabs in the tab group. Must be `<nile-tab>` elements.\n\nAttributes:\n\n  * `hasScrollControls` {`boolean`} - \n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The placement of the tabs.\n\n  * `value` {`string`} - The placement of the tabs.\n\n  * `no-track` {`boolean`} - Track for showing Indicators and Background.\n\n  * `activation` {`\"auto\" | \"manual\"`} - When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.\n\n  * `no-scroll-controls` {`boolean`} - Disables the scroll arrows that appear when tabs overflow.\n\n  * `centered` {`boolean`} - Controls whether tabs are centered and have equal width\n\nProperties:\n\n  * `styles` - \n\n  * `activeTab` - \n\n  * `mutationObserver` {`MutationObserver`} - \n\n  * `resizeObserver` - \n\n  * `tabs` {`NileTab[]`} - \n\n  * `panels` {`NileTabPanel[]`} - \n\n  * `tabGroup` {`HTMLElement`} - \n\n  * `body` {`HTMLSlotElement`} - \n\n  * `nav` {`HTMLElement`} - \n\n  * `indicator` {`HTMLElement`} - \n\n  * `hasScrollControls` {`boolean`} - \n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The placement of the tabs.\n\n  * `activeTabProp` {`string`} - The placement of the tabs.\n\n  * `noTrack` {`boolean`} - Track for showing Indicators and Background.\n\n  * `activation` {`\"auto\" | \"manual\"`} - When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.\n\n  * `noScrollControls` {`boolean`} - Disables the scroll arrows that appear when tabs overflow.\n\n  * `centered` {`boolean`} - Controls whether tabs are centered and have equal width\n\n  * `activeTabName` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-tab-show` - Emitted when a tab is shown.\n\n  * `nile-tab-hide` - Emitted when a tab is hidden.\n\nSlots:\n\n  * ` ` {} - Used for grouping tab panels in the tab group. Must be `<nile-tab-panel>` elements.\n\n  * `nav` {} - Used for grouping tabs in the tab group. Must be `<nile-tab>` elements.\n\nAttributes:\n\n  * `hasScrollControls` {`boolean`} - \n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The placement of the tabs.\n\n  * `value` {`string`} - The placement of the tabs.\n\n  * `no-track` {`boolean`} - Track for showing Indicators and Background.\n\n  * `activation` {`\"manual\" | \"auto\"`} - When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.\n\n  * `no-scroll-controls` {`boolean`} - Disables the scroll arrows that appear when tabs overflow.\n\n  * `centered` {`boolean`} - Controls whether tabs are centered and have equal width\n\nProperties:\n\n  * `styles` - \n\n  * `activeTab` - \n\n  * `mutationObserver` {`MutationObserver`} - \n\n  * `resizeObserver` - \n\n  * `tabs` {`NileTab[]`} - \n\n  * `panels` {`NileTabPanel[]`} - \n\n  * `tabGroup` {`HTMLElement`} - \n\n  * `body` {`HTMLSlotElement`} - \n\n  * `nav` {`HTMLElement`} - \n\n  * `indicator` {`HTMLElement`} - \n\n  * `hasScrollControls` {`boolean`} - \n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The placement of the tabs.\n\n  * `activeTabProp` {`string`} - The placement of the tabs.\n\n  * `noTrack` {`boolean`} - Track for showing Indicators and Background.\n\n  * `activation` {`\"manual\" | \"auto\"`} - When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.\n\n  * `noScrollControls` {`boolean`} - Disables the scroll arrows that appear when tabs overflow.\n\n  * `centered` {`boolean`} - Controls whether tabs are centered and have equal width\n\n  * `activeTabName` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "hasScrollControls",
@@ -6537,13 +6673,13 @@
         },
         {
           "name": "activation",
-          "description": "`activation` {`\"auto\" | \"manual\"`} - When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.\n\nProperty: activation\n\nDefault: auto",
+          "description": "`activation` {`\"manual\" | \"auto\"`} - When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.\n\nProperty: activation\n\nDefault: auto",
           "values": [
             {
-              "name": "auto"
+              "name": "manual"
             },
             {
-              "name": "manual"
+              "name": "auto"
             }
           ]
         },