@aquera/nile-elements 1.7.8 → 1.7.9

package/dist/src/nile-status-light/nile-status-light.js

@@ -0,0 +1,108 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } 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 { 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>
+ */
+let NileStatusLight = class NileStatusLight extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The status light's color variant. */
+        this.variant = 'neutral';
+        /** The status light's size. */
+        this.size = 'medium';
+        /** Disables the status light, muting its colors. */
+        this.disabled = false;
+        /** Draws attention to an active status with a pulsing animation around the dot. */
+        this.pulse = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setupA11yMetadata(this, {
+            [Role.Role]: A11yRole.Text,
+            [A11yProperty.AriaLabel]: this.textContent?.trim() || '',
+        });
+    }
+    render() {
+        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>
+      `;
+    }
+};
+NileStatusLight.styles = styles;
+__decorate([
+    property({ reflect: true })
+], NileStatusLight.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, attribute: true })
+], NileStatusLight.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileStatusLight.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileStatusLight.prototype, "pulse", void 0);
+NileStatusLight = __decorate([
+    customElement('nile-status-light')
+], NileStatusLight);
+export { NileStatusLight };
+export default NileStatusLight;
+//# sourceMappingURL=nile-status-light.js.map

package/dist/src/nile-status-light/nile-status-light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-status-light.js","sourceRoot":"","sources":["../../../src/nile-status-light/nile-status-light.ts"],"names":[],"mappings":"AAAE;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,EAAE,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,qCAAqC,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QAWL,wCAAwC;QACX,YAAO,GAMnB,SAAS,CAAC;QAE3B,+BAA+B;QACe,SAAI,GAChD,QAAQ,CAAC;QAEX,oDAAoD;QACR,aAAQ,GAAG,KAAK,CAAC;QAE7D,mFAAmF;QACvC,UAAK,GAAG,KAAK,CAAC;IA+B5D,CAAC;IAxDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,iBAAiB,CAAC,IAAI,EAAE;YACtB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI;YAC1B,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE;SACzD,CAAC,CAAC;IACL,CAAC;IAqBD,MAAM;QACJ,OAAO,IAAI,CAAA;;;kBAGC,QAAQ,CAAC;YACf,cAAc,EAAE,IAAI;YACpB,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACrD,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACrD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjD,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;YAC3D,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnD,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACrD,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAC5C,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC9C,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAC5C,uBAAuB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;YAChD,wBAAwB,EAAE,IAAI,CAAC,QAAQ;YACvC,qBAAqB,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;SACpD,CAAC;;;;;;;;;OASL,CAAC;IACJ,CAAC;;AAzDM,sBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAWV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAMD;AAGmB;IAA7C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAClC;AAGiC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAe;AA5B/C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA2D3B;;AAED,eAAe,eAAe,CAAC","sourcesContent":["  /**\n   * Copyright Aquera Inc 2026\n   *\n   * This source code is licensed under the BSD-3-Clause license found in the\n   * LICENSE file in the root directory of this source tree.\n   */\n\n  import { html, TemplateResult } from 'lit';\n  import { styles } from './nile-status-light.css';\n  import { classMap } from 'lit/directives/class-map.js';\n  import { customElement, property } from 'lit/decorators.js';\n  import NileElement, { setupA11yMetadata } from '../internal/nile-element';\n  import type { CSSResultGroup } from 'lit';\n  import { A11yProperty } from '../internal/accessibility/a11y.property.enum';\n  import { A11yRole } from '../internal/accessibility/a11y.role.enum';\n  import { Role } from '../internal/accessibility/role.enum';\n\n  /**\n   * Nile status light component.\n   *\n   * @tag nile-status-light\n   *\n   * @summary Status lights describe the status of an object, using a colored dot\n   * alongside a text label (e.g. \"Active\", \"Error\", \"Pending\").\n   * @status experimental\n   *\n   * @slot - The status light's text label.\n   *\n   * @attr {boolean} pulse - Optional pulse animation for active statuses.\n   *\n   * @csspart base - The component's base wrapper.\n   * @csspart indicator - The colored status dot.\n   * @csspart label - The status light's text label.\n   *\n   * @example\n   * <!-- Pulse animation for an active status -->\n   * <nile-status-light variant=\"positive\" pulse>Active</nile-status-light>\n   *\n   * @example\n   * <!-- Disabled status light with muted colors -->\n   * <nile-status-light variant=\"positive\" disabled>Inactive</nile-status-light>\n   */\n  @customElement('nile-status-light')\n  export class NileStatusLight extends NileElement {\n    static styles: CSSResultGroup = styles;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      setupA11yMetadata(this, {\n        [Role.Role]: A11yRole.Text,\n        [A11yProperty.AriaLabel]: this.textContent?.trim() || '',\n      });\n    }\n\n    /** The status light's color variant. */\n    @property({ reflect: true }) variant:\n      | 'positive'\n      | 'negative'\n      | 'notice'\n      | 'informative'\n      | 'neutral'\n      | 'inactive' = 'neutral';\n\n    /** The status light's size. */\n    @property({ reflect: true, attribute: true }) size: 'small' | 'medium' | 'large' | 'x-large' =\n      'medium';\n\n    /** Disables the status light, muting its colors. */\n    @property({ type: Boolean, reflect: true }) disabled = false;\n\n    /** Draws attention to an active status with a pulsing animation around the dot. */\n    @property({ type: Boolean, reflect: true }) pulse = false;\n\n    render(): TemplateResult {\n      return html`\n        <span\n          part=\"base\"\n          class=${classMap({\n            'status-light': true,\n            'status-light--positive': this.variant === 'positive',\n            'status-light--negative': this.variant === 'negative',\n            'status-light--notice': this.variant === 'notice',\n            'status-light--informative': this.variant === 'informative',\n            'status-light--neutral': this.variant === 'neutral',\n            'status-light--inactive': this.variant === 'inactive',\n            'status-light--small': this.size === 'small',\n            'status-light--medium': this.size === 'medium',\n            'status-light--large': this.size === 'large',\n            'status-light--x-large': this.size === 'x-large',\n            'status-light--disabled': this.disabled,\n            'status-light--pulse': this.pulse && !this.disabled,\n          })}\n      >\n          <span\n            part=\"indicator\"\n            class=\"status-light__dot\"\n            aria-hidden=\"true\"\n          ></span>\n          <slot part=\"label\" class=\"status-light__label\"></slot>\n        </span>\n      `;\n    }\n  }\n\n  export default NileStatusLight;\n\n  declare global {\n    interface HTMLElementTagNameMap {\n      'nile-status-light': NileStatusLight;\n    }\n  }\n"]}

package/dist/src/version.js

@@ -1,5 +1,5 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '1.7.8';
+export const NILE_ELEMENTS_VERSION = '1.7.9';
 export const NILE_VERSION = '1.2.6';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.7.8';\nexport const NILE_VERSION = '1.2.6';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.7.9';\nexport const NILE_VERSION = '1.2.6';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}