@aquera/nile-elements 1.7.8 → 1.7.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -17,6 +17,7 @@
     "./nile-sidebar": "./dist/src/nile-sidebar/index.js",
     "./nile-menu": "./dist/src/nile-menu/index.js",
     "./nile-badge": "./dist/src/nile-badge/index.js",
+    "./nile-status-light": "./dist/src/nile-status-light/index.js",
     "./nile-drawer": "./dist/src/nile-drawer/index.js",
     "./nile-checkbox": "./dist/src/nile-checkbox/index.js",
     "./nile-checkbox-group": "./dist/src/nile-checkbox-group/index.js",

package/src/index.ts

@@ -5,6 +5,7 @@ export { NileInput } from './nile-input';
 export { NileOtpInput } from './nile-otp-input';
 export { NileMenu } from './nile-menu';
 export { NileBadge } from './nile-badge';
+export { NileStatusLight } from './nile-status-light';
 export { NileDrawer } from './nile-drawer';
 export { NileCheckbox } from './nile-checkbox';
 export { NileCheckboxGroup } from './nile-checkbox-group';

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

@@ -0,0 +1 @@
+export { NileStatusLight } from './nile-status-light';

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

@@ -6412,6 +6412,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`} - ",