@aquera/nile-elements 2.0.3 → 2.0.5

package/src/nile-empty-state/nile-empty-state.ts

@@ -6,11 +6,74 @@
  */
 
 import { html, nothing, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
 import NileElement from '../internal/nile-element';
 import { ifDefined } from 'lit/directives/if-defined.js';
+
+/** What happened. Selects an icon, tone, default copy and ARIA role. */
+export type NileEmptyStateStatus =
+  | 'empty'
+  | 'no-results'
+  | 'not-found'
+  | 'no-access'
+  | 'error'
+  | 'offline';
+
+/** How loud the state looks. Defaults from `status`, always overridable. */
+export type NileEmptyStateTone = 'neutral' | 'info' | 'warning' | 'error';
+
+/** What shape the state occupies. */
+export type NileEmptyStateLayout = 'stack' | 'inline' | 'page';
+
+interface StatusPreset {
+  icon: string;
+  tone: NileEmptyStateTone;
+  text: string;
+  subText: string;
+  role: 'status' | 'alert';
+  live: 'polite' | 'assertive';
+}
+
+const STATUS_PRESETS: Record<NileEmptyStateStatus, StatusPreset> = {
+  'empty': {
+    icon: 'ng-database', tone: 'neutral', role: 'status', live: 'polite',
+    text: 'No data yet', subText: `Rows appear here once there's something to show.`,
+  },
+  'no-results': {
+    icon: 'ng-search-lg', tone: 'neutral', role: 'status', live: 'polite',
+    text: 'No matches', subText: 'Try removing a filter or broadening your search.',
+  },
+  'not-found': {
+    icon: 'ng-file-06', tone: 'warning', role: 'status', live: 'polite',
+    text: `We couldn't find that`, subText: 'It may have been moved or deleted.',
+  },
+  'no-access': {
+    icon: 'ng-lock', tone: 'warning', role: 'status', live: 'polite',
+    text: `You don't have access`, subText: 'Ask an admin to grant you access to this resource.',
+  },
+  'error': {
+    icon: 'ng-alert-circle', tone: 'error', role: 'alert', live: 'assertive',
+    text: 'Something went wrong', subText: `We couldn't load this. Try again.`,
+  },
+  'offline': {
+    icon: 'ng-cloud-off', tone: 'error', role: 'alert', live: 'assertive',
+    text: 'Connection lost', subText: 'Check your connection and try again.',
+  },
+};
+
+const TONE_GLYPH_COLOR: Record<NileEmptyStateTone, string | undefined> = {
+  neutral: undefined,
+  info: 'var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))',
+  warning: 'var(--nile-colors-yellow-700, var(--ng-colors-fg-warning-primary))',
+  error: 'var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))',
+};
+
+const DEFAULT_ICON = 'ng-x-circle';
+const DEFAULT_TEXT = 'Empty State';
+const DEFAULT_SUB_TEXT = 'No Data';
+
 /**
  * Nile empty-state component.
  *
@@ -28,78 +91,175 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
-  @property() size: 'sm' | 'md' | 'lg'  = 'md';
+  @property({ type: String, attribute: true }) size: 'sm' | 'md' | 'lg' = 'md';
 
-  @property() variant:
+  @property({ type: String, attribute: true }) variant:
     | 'flat'
     | 'content'
     | 'tonal' = 'tonal';
 
-  @property() icon: string = 'var(--nile-icon-error, var(--ng-icon-x-circle))';
-  @property({type:Boolean}) grayscale: boolean = false;
+  @property({ type: String, attribute: true, reflect: true }) status?: NileEmptyStateStatus;
+  @property({ type: String, attribute: true, reflect: true }) layout: NileEmptyStateLayout = 'stack';
+  @property({ type: String, attribute: true }) code?: string;
+  @property({ type: Boolean, attribute: true, reflect: true }) bordered: boolean = false;
+  @property({ type: String, attribute: true }) svgIconUrl: string;
+  /**
+   * Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,
+   * the SVG matches whatever size the current variant/layout draws at.
+   */
+  @property({ type: Number, attribute: true }) svgIconSize?: number;
+  @property({ type: String, attribute: true }) svgIconColor: string;
+
+  private _icon?: string;
+  private _text?: string;
+  private _subText?: string;
+  private _tone?: NileEmptyStateTone;
+  @property({ type: String, attribute: true })
+  get icon(): string {
+    return this._icon ?? this.preset?.icon ?? DEFAULT_ICON;
+  }
+
+  set icon(value: string | null) {
+    const old = this.icon;
+    this._icon = value ?? undefined;
+    this.requestUpdate('icon', old);
+  }
+
+  /** Headline. Resolves through the `status` preset to `DEFAULT_TEXT`. */
+  @property({ type: String, attribute: true })
+  get text(): string {
+    return this._text ?? this.preset?.text ?? DEFAULT_TEXT;
+  }
 
-  @property() text: String = 'Empty State';
-  @property({attribute:'sub-text'}) subText: String = 'No Data';
-  @property() svgIconUrl: string;
-  @property({type: Number}) svgIconSize: number = 40;
-  @property({type: String}) svgIconColor: string;
+  set text(value: string | null) {
+    const old = this.text;
+    this._text = value ?? undefined;
+    this.requestUpdate('text', old);
+  }
+
+  /** Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`. */
+  @property({ type: String, attribute: 'sub-text' })
+  get subText(): string {
+    return this._subText ?? this.preset?.subText ?? DEFAULT_SUB_TEXT;
+  }
+
+  set subText(value: string | null) {
+    const old = this.subText;
+    this._subText = value ?? undefined;
+    this.requestUpdate('subText', old);
+  }
+
+  @property({ type: String, attribute: true, reflect: true })
+  get tone(): NileEmptyStateTone {
+    return this._tone ?? this.preset?.tone ?? 'neutral';
+  }
+
+  set tone(value: NileEmptyStateTone | null) {
+    const old = this.tone;
+    this._tone = value ?? undefined;
+    this.requestUpdate('tone', old);
+  }
 
   /* #endregion */
 
   /* #region Methods */
 
+  /** The preset backing the current `status`, or undefined when none is set. */
+  private get preset(): StatusPreset | undefined {
+    return this.status ? STATUS_PRESETS[this.status] : undefined;
+  }
+
+  private get glyphColor(): string | undefined {
+    return this.svgIconColor ?? TONE_GLYPH_COLOR[this.tone];
+  }
+
+  /** ARIA wiring  */
+  private get liveRegion(): { role: string; live: string } | undefined {
+    const preset = this.preset;
+    if (!preset) return undefined;
+    return { role: preset.role, live: preset.live };
+  }
+
+  private renderGlyph(size: number | string): TemplateResult {
+    const color = this.glyphColor;
+    return this.svgIconUrl ? html`
+      <nile-glyph
+        customSvgPath="${this.svgIconUrl}"
+        size="${this.svgIconSize ?? size}"
+        method="stroke"
+        color="${ifDefined(color)}"
+        noFill
+      ></nile-glyph>
+    ` : html`
+      <nile-glyph
+        name="${this.icon}"
+        method="stroke"
+        size="${size}"
+        color="${ifDefined(color)}"
+      ></nile-glyph>
+    `;
+  }
+
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
+    const live = this.liveRegion;
+    const inline = this.layout === 'inline';
+
     return html`
       <div part="container" class="${classMap({
         'empty-state': true,
         'empty-state--sm': this.size == 'sm',
         'empty-state--md': this.size == 'md',
-        'empty-state--lg': this.size == 'lg'
-      })}">
+        'empty-state--lg': this.size == 'lg',
+        'empty-state--stack': this.layout === 'stack',
+        'empty-state--inline': inline,
+        'empty-state--page': this.layout === 'page',
+        'empty-state--bordered': this.bordered,
+        [`empty-state--tone-${this.tone}`]: true,
+      })}"
+        role="${ifDefined(live?.role)}"
+        aria-live="${ifDefined(live?.live)}"
+      >
         <div part="body" class="${classMap({ 'empty-state__body': true })}">
 
-          ${this.variant == 'content' ? html`
+          ${inline ? html`
+            <span part="inline-icon icon-chrome" class="empty-state__body--inline">
+              ${this.renderGlyph(20)}
+            </span>` : nothing
+          }
+
+          ${!inline && this.variant == 'content' ? html`
             <div part="content-image"  class="empty-state__body--content">
               ${!this.icon && !this.svgIconUrl ? nothing : html`
-                <div part="icon-wrapper" class="empty-state__img__icon">
-                  ${this.svgIconUrl ? html`
-                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}"  color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-                    <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
-                  ` : html`
-                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
-                  `}
+                <div part="icon-wrapper icon-chrome" class="empty-state__img__icon">
+                  ${
+                    this.renderGlyph(this.size == 'lg' ? 28 : 24)}
                 </div>`
               }
             </div>`: nothing
           }
 
-          ${this.variant == 'tonal' ? html`
-            <div part="tonal-body" class="empty-state__body--tonal">
-              ${this.svgIconUrl ? html`
-                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-              ` : html`
-                <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
-              `}
+          ${!inline && this.variant == 'tonal' ? html`
+            <div part="tonal-body icon-chrome" class="empty-state__body--tonal">
+              ${this.renderGlyph(40)}
             </div>`: nothing
           }
 
-          ${this.variant == 'flat' ? html`
+          ${!inline && this.variant == 'flat' ? html`
             <div part="flat-body" class="empty-state__body--flat">
-					<span class="nile-flat-type-icon">
-						${this.svgIconUrl ? html`
-              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-            ` : html`
-              <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
-            `}
+					<span part="icon-chrome" class="nile-flat-type-icon">
+						${this.renderGlyph(this.size == 'lg' ? 28 : 24)}
 					</span>
             </div>`: nothing
           }
 
           <div part="text-section" class="empty__state__text-section">
+            ${this.code ? html`
+              <div part="code" class="empty-state__code">${this.code}</div>
+            ` : nothing}
             <div part="text" class="empty-state__text">${this.text}</div>
             <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
           </div>
@@ -108,6 +268,7 @@ export class NileEmptyState extends NileElement {
         <div part="actions" class="empty-state-actions">
           <slot></slot>
         </div>
+
       </div>
     `;
   }

package/src/nile-pagination/nile-pagination.ts

@@ -141,7 +141,7 @@ private renderCompactRangeText(): TemplateResult {
             ></nile-icon>
           </nile-button>
           <nile-menu>
-            <div class="down-scroll-wrapper">
+            <div part="dropdown-list" class="down-scroll-wrapper">
               ${this.pageSizeOptions.map(
                 size => html`
                   <nile-menu-item
@@ -185,7 +185,7 @@ private renderCompactRangeText(): TemplateResult {
           ></nile-icon>
         </nile-button>
         <nile-menu>
-          <div class="compact-scroll-wrapper">
+          <div part="dropdown-list" class="compact-scroll-wrapper">
             ${this.pageSizeOptions.map(
               size => html`
                 <nile-menu-item
@@ -246,7 +246,7 @@ private renderCompactRangeText(): TemplateResult {
               …
             </nile-button>
             <nile-menu>
-              <div class="ellipsis-scroll-wrapper">
+              <div part="dropdown-list" class="ellipsis-scroll-wrapper">
                 ${getHiddenPages(
                   this.totalPages,
                   items,
@@ -338,7 +338,7 @@ private renderCompactRangeText(): TemplateResult {
             ></nile-icon>
           </nile-button>
           <nile-menu>
-            <div class="mini-scroll-wrapper">
+            <div part="dropdown-list" class="mini-scroll-wrapper">
               ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(
                 p => html`
                   <nile-menu-item
@@ -392,7 +392,7 @@ private renderCompactRangeText(): TemplateResult {
                   ></nile-icon>
                 </nile-button>
                 <nile-menu>
-                  <div class="compact-scroll-wrapper1">
+                  <div part="dropdown-list" class="compact-scroll-wrapper1">
                     ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(
                       p => html`
                         <nile-menu-item

package/src/version.ts

@@ -1,6 +1,15 @@
-// Version utility - placeholders will be replaced during build
+// Version utility.
+//
+// NILE_ELEMENTS_VERSION is this package's own version and is still substituted
+// at build time by scripts/replace-version.cjs.
+//
+// NILE_VERSION is read from the installed @aquera/nile at runtime, so publishing
+// @aquera/nile on its own is enough to update window.nileVersion - consumers do
+// not need a rebuild of this package to pick up a new tokens version.
+import { NILE_VERSION as INSTALLED_NILE_VERSION } from '@aquera/nile/lib/version.js';
+
 export const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';
-export const NILE_VERSION = '__NILE_VERSION__';
+export const NILE_VERSION = INSTALLED_NILE_VERSION;
 
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {

package/vscode-html-custom-data.json

@@ -2537,7 +2537,7 @@
     },
     {
       "name": "nile-empty-state",
-      "description": "Nile empty-state component.\n\nAttributes:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"flat\" | \"content\" | \"tonal\"`} - \n\n  * `icon` {`string`} - \n\n  * `grayscale` {`boolean`} - \n\n  * `text` {`String`} - \n\n  * `sub-text` {`String`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number`} - \n\n  * `svgIconColor` {`string`} - \n\nProperties:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"flat\" | \"content\" | \"tonal\"`} - \n\n  * `icon` {`string`} - \n\n  * `grayscale` {`boolean`} - \n\n  * `text` {`String`} - \n\n  * `subText` {`String`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number`} - \n\n  * `svgIconColor` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile empty-state component.\n\nAttributes:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"flat\" | \"content\" | \"tonal\"`} - \n\n  * `status` {`\"error\" | \"empty\" | \"no-results\" | \"not-found\" | \"no-access\" | \"offline\" | undefined`} - \n\n  * `layout` {`NileEmptyStateLayout`} - \n\n  * `code` {`string | undefined`} - \n\n  * `bordered` {`boolean`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number | undefined`} - Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\nthe SVG matches whatever size the current variant/layout draws at.\n\n  * `svgIconColor` {`string`} - \n\n  * `icon` {`string`} - \n\n  * `text` {`string`} - Headline. Resolves through the `status` preset to `DEFAULT_TEXT`.\n\n  * `sub-text` {`string`} - Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`.\n\n  * `tone` {`NileEmptyStateTone`} - \n\nProperties:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"flat\" | \"content\" | \"tonal\"`} - \n\n  * `status` {`\"error\" | \"empty\" | \"no-results\" | \"not-found\" | \"no-access\" | \"offline\" | undefined`} - \n\n  * `layout` {`NileEmptyStateLayout`} - \n\n  * `code` {`string | undefined`} - \n\n  * `bordered` {`boolean`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number | undefined`} - Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\nthe SVG matches whatever size the current variant/layout draws at.\n\n  * `svgIconColor` {`string`} - \n\n  * `_icon` {`string | undefined`} - \n\n  * `_text` {`string | undefined`} - \n\n  * `_subText` {`string | undefined`} - \n\n  * `_tone` {`\"warning\" | \"error\" | \"info\" | \"neutral\" | undefined`} - \n\n  * `icon` {`string`} - \n\n  * `text` {`string`} - Headline. Resolves through the `status` preset to `DEFAULT_TEXT`.\n\n  * `subText` {`string`} - Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`.\n\n  * `tone` {`NileEmptyStateTone`} - \n\n  * `preset` {`StatusPreset | undefined`} - The preset backing the current `status`, or undefined when none is set.\n\n  * `glyphColor` {`string | undefined`} - \n\n  * `liveRegion` {`{ role: string; live: string; } | undefined`} - ARIA wiring\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",
@@ -2570,21 +2570,53 @@
           ]
         },
         {
-          "name": "icon",
-          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: var(--nile-icon-error, var(--ng-icon-x-circle))"
+          "name": "status",
+          "description": "`status` {`\"error\" | \"empty\" | \"no-results\" | \"not-found\" | \"no-access\" | \"offline\" | undefined`} - \n\nProperty: status",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "empty"
+            },
+            {
+              "name": "no-results"
+            },
+            {
+              "name": "not-found"
+            },
+            {
+              "name": "no-access"
+            },
+            {
+              "name": "offline"
+            }
+          ]
         },
         {
-          "name": "grayscale",
-          "description": "`grayscale` {`boolean`} - \n\nProperty: grayscale\n\nDefault: false",
-          "valueSet": "v"
+          "name": "layout",
+          "description": "`layout` {`NileEmptyStateLayout`} - \n\nProperty: layout\n\nDefault: stack",
+          "values": [
+            {
+              "name": "inline"
+            },
+            {
+              "name": "stack"
+            },
+            {
+              "name": "page"
+            }
+          ]
         },
         {
-          "name": "text",
-          "description": "`text` {`String`} - \n\nProperty: text\n\nDefault: Empty State"
+          "name": "code",
+          "description": "`code` {`string | undefined`} - \n\nProperty: code",
+          "values": []
         },
         {
-          "name": "sub-text",
-          "description": "`sub-text` {`String`} - \n\nProperty: subText\n\nDefault: No Data"
+          "name": "bordered",
+          "description": "`bordered` {`boolean`} - \n\nProperty: bordered\n\nDefault: false",
+          "valueSet": "v"
         },
         {
           "name": "svgIconUrl",
@@ -2592,11 +2624,42 @@
         },
         {
           "name": "svgIconSize",
-          "description": "`svgIconSize` {`number`} - \n\nProperty: svgIconSize\n\nDefault: 40"
+          "description": "`svgIconSize` {`number | undefined`} - Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\nthe SVG matches whatever size the current variant/layout draws at.\n\nProperty: svgIconSize",
+          "values": []
         },
         {
           "name": "svgIconColor",
           "description": "`svgIconColor` {`string`} - \n\nProperty: svgIconColor"
+        },
+        {
+          "name": "icon",
+          "description": "`icon` {`string`} - \n\nProperty: icon"
+        },
+        {
+          "name": "text",
+          "description": "`text` {`string`} - Headline. Resolves through the `status` preset to `DEFAULT_TEXT`.\n\nProperty: text"
+        },
+        {
+          "name": "sub-text",
+          "description": "`sub-text` {`string`} - Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`.\n\nProperty: subText"
+        },
+        {
+          "name": "tone",
+          "description": "`tone` {`NileEmptyStateTone`} - \n\nProperty: tone",
+          "values": [
+            {
+              "name": "warning"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "neutral"
+            }
+          ]
         }
       ]
     },
@@ -7017,12 +7080,15 @@
     },
     {
       "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`} - ",
+      "description": "Nile status light component.\n\nSlots:\n\n  * ` ` {} - The status light's text label.\n\nAttributes:\n\n  * `variant` {`\"neutral\" | \"positive\" | \"negative\" | \"notice\" | \"informative\" | \"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` {`\"neutral\" | \"positive\" | \"negative\" | \"notice\" | \"informative\" | \"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",
+          "description": "`variant` {`\"neutral\" | \"positive\" | \"negative\" | \"notice\" | \"informative\" | \"inactive\"`} - The status light's color variant.\n\nProperty: variant\n\nDefault: neutral",
           "values": [
+            {
+              "name": "neutral"
+            },
             {
               "name": "positive"
             },
@@ -7035,9 +7101,6 @@
             {
               "name": "informative"
             },
-            {
-              "name": "neutral"
-            },
             {
               "name": "inactive"
             }