@alleninstitute/cortex-ui 0.2.0 → 0.3.0

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CJFDVa2g.js');
+var index = require('./index-RBrlguTk.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["cui-progress.cjs",[[1,"cui-progress",{"label":[1],"value":[2],"max":[2],"indeterminate":[4],"size":[1],"showValue":[4,"show-value"]}]]],["cui-tag.cjs",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
+  return index.bootstrapLazy([["cui-divider.cjs",[[1,"cui-divider",{"orientation":[513],"spacing":[513],"variant":[1],"importance":[1]}]]],["cui-icon.cjs",[[257,"cui-icon",{"icon":[1],"variant":[1],"importance":[1],"size":[1],"label":[1]},null,{"icon":[{"onIconChange":0}],"label":[{"onLabelChange":0}]}]]],["cui-progress.cjs",[[1,"cui-progress",{"label":[1],"value":[2],"max":[2],"indeterminate":[4],"size":[1],"showValue":[4,"show-value"]}]]],["cui-tag.cjs",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,12 +1,14 @@
 {
   "entries": [
+    "components/cui-divider/cui-divider.js",
+    "components/cui-icon/cui-icon.js",
     "components/cui-progress/cui-progress.js",
     "components/cui-tag/cui-tag.js"
   ],
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.5",
+    "version": "4.44.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/cui-divider/cui-divider.css

@@ -0,0 +1,100 @@
+:host {
+  display: block;
+  --cui-divider-gap: var(--cui-spacing-m);
+  margin-block: var(--cui-divider-gap);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([spacing=none]) {
+  --cui-divider-gap: 0;
+}
+
+:host([spacing=small]) {
+  --cui-divider-gap: var(--cui-spacing-s);
+}
+
+:host([spacing=large]) {
+  --cui-divider-gap: var(--cui-spacing-l);
+}
+
+:host([orientation=vertical]) {
+  display: inline-flex;
+  align-self: stretch;
+  min-height: var(--cui-spacing-l);
+  margin-block: 0;
+  margin-inline: var(--cui-divider-gap);
+}
+
+.cui-divider {
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+}
+.cui-divider--horizontal {
+  width: 100%;
+  height: var(--cui-border-width-s);
+}
+.cui-divider--vertical {
+  width: var(--cui-border-width-s);
+  height: auto;
+  align-self: stretch;
+}
+
+.cui-divider--base {
+  background-color: var(--cui-base-divider-primary);
+}
+.cui-divider--base.cui-divider--secondary {
+  background-color: var(--cui-base-divider-secondary);
+}
+
+.cui-divider--accent {
+  background-color: var(--cui-accent-divider-primary-default);
+}
+.cui-divider--accent.cui-divider--secondary {
+  background-color: var(--cui-accent-divider-secondary-default);
+}
+
+.cui-divider--highlight {
+  background-color: var(--cui-highlight-divider-primary-default);
+}
+.cui-divider--highlight.cui-divider--secondary {
+  background-color: var(--cui-highlight-divider-secondary-default);
+}
+
+.cui-divider--info {
+  background-color: var(--cui-info-divider-primary-default);
+}
+.cui-divider--info.cui-divider--secondary {
+  background-color: var(--cui-info-divider-secondary-default);
+}
+
+.cui-divider--negative {
+  background-color: var(--cui-negative-divider-primary-default);
+}
+.cui-divider--negative.cui-divider--secondary {
+  background-color: var(--cui-negative-divider-secondary-default);
+}
+
+.cui-divider--neutral {
+  background-color: var(--cui-neutral-divider-primary-default);
+}
+.cui-divider--neutral.cui-divider--secondary {
+  background-color: var(--cui-neutral-divider-secondary-default);
+}
+
+.cui-divider--positive {
+  background-color: var(--cui-positive-divider-primary-default);
+}
+.cui-divider--positive.cui-divider--secondary {
+  background-color: var(--cui-positive-divider-secondary-default);
+}
+
+.cui-divider--warning {
+  background-color: var(--cui-warning-divider-primary-default);
+}
+.cui-divider--warning.cui-divider--secondary {
+  background-color: var(--cui-warning-divider-secondary-default);
+}

package/dist/collection/components/cui-divider/cui-divider.js

@@ -0,0 +1,150 @@
+import { h } from "@stencil/core";
+/**
+ * A Divider drawing a rule between sections of content, or between items in a row.
+ *
+ * @example
+ * <cui-divider></cui-divider>
+ *
+ * @example
+ * <cui-divider orientation="vertical" spacing="small"></cui-divider>
+ *
+ * @example
+ * <cui-divider variant="accent" importance="secondary"></cui-divider>
+ *
+ * @part base - The rule itself, for consumer-side style overrides.
+ */
+export class CuiDivider {
+    constructor() {
+        // `orientation` and `spacing` are reflected because they size and space the host's own
+        // box, and only an attribute can reach `:host()` from the stylesheet. `variant` and
+        // `importance` are not: they only colour the rule, which the modifier classes handle.
+        /**
+         * Which way the rule runs. A vertical divider stretches to the height of the flex row
+         * it sits in.
+         */
+        this.orientation = 'horizontal';
+        /** Space reserved on either side of the rule, along the axis it separates. */
+        this.spacing = 'medium';
+        /**
+         * Which intent's `divider` colour the rule is drawn in. `base` is the intent-free rule for
+         * ordinary page chrome; the seven intents tint a divider that sits inside a component
+         * already carrying that intent, such as a rule between rows of a negative-intent alert.
+         */
+        this.variant = 'base';
+        /**
+         * Which of the two `divider` importances the rule is drawn from. Match it to the importance of
+         * the surface the divider sits on — `secondary` on a quiet tint, `primary` on a saturated fill —
+         * rather than treating it as a loudness control: on a secondary surface the primary rule is the
+         * *less* perceivable of the two. For `base`, whose surface is the page itself, `primary` is
+         * simply the stronger of the two rules.
+         */
+        this.importance = 'primary';
+    }
+    render() {
+        return (
+        // A native <hr> carries the separator role to assistive technology for free, and
+        // is the one element that means "boundary" rather than "a box that looks like one".
+        h("hr", { key: 'd33f3260a5f708f379428a7d338e6329248f23ff', part: "base", class: {
+                'cui-divider': true,
+                [`cui-divider--${this.orientation}`]: true,
+                [`cui-divider--${this.variant}`]: true,
+                [`cui-divider--${this.importance}`]: true,
+            }, "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }));
+    }
+    static get is() { return "cui-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cui-divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cui-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which way the rule runs. A vertical divider stretches to the height of the flex row\nit sits in."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Space reserved on either side of the rule, along the axis it separates."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "spacing",
+                "defaultValue": "'medium'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'base' | 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning'",
+                    "resolved": "\"accent\" | \"base\" | \"highlight\" | \"info\" | \"negative\" | \"neutral\" | \"positive\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which intent's `divider` colour the rule is drawn in. `base` is the intent-free rule for\nordinary page chrome; the seven intents tint a divider that sits inside a component\nalready carrying that intent, such as a rule between rows of a negative-intent alert."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'base'"
+            },
+            "importance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which of the two `divider` importances the rule is drawn from. Match it to the importance of\nthe surface the divider sits on \u2014 `secondary` on a quiet tint, `primary` on a saturated fill \u2014\nrather than treating it as a loudness control: on a secondary surface the primary rule is the\n*less* perceivable of the two. For `base`, whose surface is the page itself, `primary` is\nsimply the stronger of the two rules."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "importance",
+                "defaultValue": "'primary'"
+            }
+        };
+    }
+}

package/dist/collection/components/cui-icon/cui-icon.css

@@ -0,0 +1,134 @@
+@charset "UTF-8";
+/**
+ * Stencil reads the documented custom properties out of the stylesheet, not out of the
+ * component's JSDoc, so these are what reach readme.md and the generated AI docs.
+ *
+ * Unlike cui-progress, these are deliberately *not* declared with a default on :host — the
+ * default differs per variant and size, so each rule below passes its token as the var()
+ * fallback instead. That already lets a consumer's value win, without a specificity fight.
+ *
+ * @prop --cui-icon-color: Overrides the colour chosen by `variant` and `importance`. Set it to `currentColor` to make the icon follow the surrounding text colour.
+ * @prop --cui-icon-size: Overrides the size chosen by `size`.
+ */
+:host {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.cui-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+::slotted(:not([data-cui-icon-glyph])) {
+  display: none;
+}
+
+.cui-icon--xxs {
+  font-size: var(--cui-icon-size, var(--cui-font-size-xxs));
+}
+
+.cui-icon--xs {
+  font-size: var(--cui-icon-size, var(--cui-font-size-xs));
+}
+
+.cui-icon--s {
+  font-size: var(--cui-icon-size, var(--cui-font-size-s));
+}
+
+.cui-icon--m {
+  font-size: var(--cui-icon-size, var(--cui-font-size-m));
+}
+
+.cui-icon--l {
+  font-size: var(--cui-icon-size, var(--cui-font-size-l));
+}
+
+.cui-icon--xl {
+  font-size: var(--cui-icon-size, var(--cui-font-size-xl));
+}
+
+.cui-icon--xxl {
+  font-size: var(--cui-icon-size, var(--cui-font-size-xxl));
+}
+
+.cui-icon--display-s {
+  font-size: var(--cui-icon-size, var(--cui-font-size-display-s));
+}
+
+.cui-icon--display-m {
+  font-size: var(--cui-icon-size, var(--cui-font-size-display-m));
+}
+
+.cui-icon--display-l {
+  font-size: var(--cui-icon-size, var(--cui-font-size-display-l));
+}
+
+.cui-icon--base.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-base-text-primary));
+}
+
+.cui-icon--base.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-base-text-secondary));
+}
+
+.cui-icon--accent.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-accent-text-primary-default));
+}
+
+.cui-icon--accent.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-accent-text-secondary-default));
+}
+
+.cui-icon--highlight.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-highlight-text-primary-default));
+}
+
+.cui-icon--highlight.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-highlight-text-secondary-default));
+}
+
+.cui-icon--info.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-info-text-primary-default));
+}
+
+.cui-icon--info.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-info-text-secondary-default));
+}
+
+.cui-icon--negative.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-negative-text-primary-default));
+}
+
+.cui-icon--negative.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-negative-text-secondary-default));
+}
+
+.cui-icon--neutral.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-neutral-text-primary-default));
+}
+
+.cui-icon--neutral.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-neutral-text-secondary-default));
+}
+
+.cui-icon--positive.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-positive-text-primary-default));
+}
+
+.cui-icon--positive.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-positive-text-secondary-default));
+}
+
+.cui-icon--warning.cui-icon--primary {
+  color: var(--cui-icon-color, var(--cui-warning-text-primary-default));
+}
+
+.cui-icon--warning.cui-icon--secondary {
+  color: var(--cui-icon-color, var(--cui-warning-text-secondary-default));
+}

package/dist/collection/components/cui-icon/cui-icon.js

@@ -0,0 +1,239 @@
+import { h } from "@stencil/core";
+/**
+ * An Icon component that renders a Font Awesome glyph with cortex-ui's semantic colours and sizes.
+ *
+ * Font Awesome itself is **not** bundled — the consuming application loads a Font Awesome
+ * stylesheet (the free set, or a licensed pro build) and `icon` takes the raw Font Awesome
+ * classes. Any Font Awesome utility class can be passed along in the same string, so
+ * `icon="fa-solid fa-spinner fa-spin"` works without this component knowing about `fa-spin`.
+ *
+ * Loading that stylesheet is the human application owner's responsibility, never an agent's: an AI
+ * agent writing `cui-icon` markup must not install a Font Awesome package, add the stylesheet to
+ * the page, or invent a Pro Kit URL — it should write the markup and tell the person their page
+ * needs Font Awesome. Icons rendering as empty boxes in a page with no Font Awesome is the
+ * expected result, not a bug to code around.
+ *
+ * Icons are decorative by default and hidden from assistive technology. Set `label` only when the
+ * icon carries meaning that the surrounding text does not already convey.
+ *
+ * @example
+ * <cui-icon icon="fa-solid fa-user"></cui-icon>
+ *
+ * @example
+ * <cui-icon icon="fa-solid fa-triangle-exclamation" variant="warning" size="l"></cui-icon>
+ *
+ * @example
+ * <cui-icon icon="fa-solid fa-trash" label="Delete item"></cui-icon>
+ *
+ * @slot - The glyph element. This component creates and owns it, so do not place your own
+ * content in `cui-icon` — anything else you slot here is hidden.
+ * @part base - The root element, for consumer-side style overrides.
+ * @cssprop --cui-icon-color - Overrides the colour chosen by `variant` and `importance`. Set it to
+ * `currentColor` to make the icon follow the text colour of whatever surrounds it.
+ * @cssprop --cui-icon-size - Overrides the size chosen by `size`.
+ */
+export class CuiIcon {
+    constructor() {
+        /**
+         * Semantic colour set. `base` is the intent-free choice for ordinary content and is correct on
+         * a plain page background; the intents are for an icon that sits on that intent's surface.
+         * This is styling, not semantics — never let colour be the only thing conveying meaning.
+         */
+        this.variant = 'base';
+        /**
+         * Which rung of the `text` token family to use. It tracks the surface the icon sits on:
+         * `primary` belongs on that variant's primary surface, `secondary` on its secondary surface or
+         * on a plain background. Pairing an intent's `primary` text with a plain page background is
+         * outside the token system's design and will not be legible.
+         */
+        this.importance = 'secondary';
+        /** Size of the glyph, from the font-size token scale. */
+        this.size = 'm';
+    }
+    connectedCallback() {
+        // Both the glyph and the host's ARIA are applied here rather than from render(): the
+        // glyph has to live in the light DOM for the consumer's document-level Font Awesome CSS
+        // to match it (selectors do not cross a shadow boundary, though @font-face and custom
+        // properties do), and setting the host's ARIA imperatively keeps it out of reach of the
+        // vdom, which on first render would otherwise overwrite a <Host> attribute with the
+        // same-named host *property* whenever a consumer also wrote that attribute in markup.
+        this.syncGlyph();
+        this.syncAria();
+    }
+    onIconChange() {
+        this.syncGlyph();
+    }
+    onLabelChange() {
+        this.syncAria();
+    }
+    /**
+     * Creates or updates the light-DOM glyph. Queries rather than caching a node reference, so it
+     * is idempotent: connectedCallback fires again every time the host is moved in the DOM, and a
+     * cached reference can also go stale (see below).
+     */
+    syncGlyph() {
+        var _a;
+        const existing = this.el.querySelector(':scope > [data-cui-icon-glyph]');
+        // Font Awesome's SVG-and-JS build rewrites our <i> into an <svg> that it owns, and
+        // rebuilds the class list while doing so. Rewriting that node's classes would do nothing,
+        // so drop it and let Font Awesome convert a fresh <i> instead.
+        if (existing && existing.tagName !== 'I') {
+            existing.remove();
+        }
+        let glyph = this.el.querySelector(':scope > i[data-cui-icon-glyph]');
+        if (!glyph) {
+            glyph = document.createElement('i');
+            glyph.setAttribute('data-cui-icon-glyph', '');
+            // The glyph is always hidden in its own right; the host carries the accessible name.
+            glyph.setAttribute('aria-hidden', 'true');
+            this.el.appendChild(glyph);
+        }
+        glyph.className = (_a = this.icon) !== null && _a !== void 0 ? _a : '';
+    }
+    /** An icon is either named or hidden — never both, and never named with an empty string. */
+    syncAria() {
+        var _a;
+        const name = (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim();
+        if (name) {
+            this.el.setAttribute('role', 'img');
+            this.el.setAttribute('aria-label', name);
+            this.el.removeAttribute('aria-hidden');
+            return;
+        }
+        this.el.setAttribute('aria-hidden', 'true');
+        this.el.removeAttribute('role');
+        this.el.removeAttribute('aria-label');
+    }
+    render() {
+        return (h("span", { key: '76b54ef28027419bfbb5500c5cf4a88a7d01131e', part: "base", class: {
+                'cui-icon': true,
+                [`cui-icon--${this.variant}`]: true,
+                [`cui-icon--${this.importance}`]: true,
+                [`cui-icon--${this.size}`]: true,
+            } }, h("slot", { key: '8c4d13ffa3b1cfe3e4d7d47c29127784d62381ff' })));
+    }
+    static get is() { return "cui-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cui-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cui-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Font Awesome classes naming the icon, e.g. `fa-solid fa-user`. The style is part of the\nstring, so `fa-regular`, `fa-brands` and licensed pro styles like `fa-duotone` all work.\nRequired \u2014 there is no sensible fallback glyph."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accent' | 'base' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning'",
+                    "resolved": "\"accent\" | \"base\" | \"highlight\" | \"info\" | \"negative\" | \"neutral\" | \"positive\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic colour set. `base` is the intent-free choice for ordinary content and is correct on\na plain page background; the intents are for an icon that sits on that intent's surface.\nThis is styling, not semantics \u2014 never let colour be the only thing conveying meaning."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'base'"
+            },
+            "importance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which rung of the `text` token family to use. It tracks the surface the icon sits on:\n`primary` belongs on that variant's primary surface, `secondary` on its secondary surface or\non a plain background. Pairing an intent's `primary` text with a plain page background is\noutside the token system's design and will not be legible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "importance",
+                "defaultValue": "'secondary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'display-l' | 'display-m' | 'display-s' | 'l' | 'm' | 's' | 'xl' | 'xs' | 'xxl' | 'xxs'",
+                    "resolved": "\"display-l\" | \"display-m\" | \"display-s\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the glyph, from the font-size token scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'m'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name, for an icon that carries meaning on its own \u2014 an icon-only button, or a\nstatus glyph with no adjacent text. Leave it unset for a decorative icon beside text, which\nis the common case; the icon is then hidden from assistive technology so screen readers do\nnot announce it twice."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "onIconChange"
+            }, {
+                "propName": "label",
+                "methodName": "onLabelChange"
+            }];
+    }
+}