@xplortech/apollo-core 2.7.1 → 2.8.1

package/dist/cjs/xpl-toggle.cjs.entry.js

@@ -6,8 +6,13 @@ var v4 = require('./v4-D4KzFnn8.js');
 const Toggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.toggleChange = index.createEvent(this, "toggleChange", 7);
         this.variant = 'default';
         this.id = v4.v4();
+        this.onChange = (event) => {
+            const target = event.target;
+            this.toggleChange.emit(target.checked);
+        };
     }
     render() {
         let containerClassName = 'xpl-toggle-container';
@@ -16,13 +21,13 @@ const Toggle = class {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (index.h(index.Host, { key: '0cf2e99934bbe447559fbe88cc61989bbfabbdea', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd', class: {
+        return (index.h(index.Host, { key: '2665ccecd2df94b7ed7443e2ecb6265fca7f235f', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '75292b431419e1d34c127a82d61baa1ee024a2bb', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: '0b8157e097f3890d6c521c399cf1f9c25514e341', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: '772e34c7d553faee5b1dfc448ecb95706dc3e8df', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), index.h("input", { key: '3bcfe674974e16e50a38d17836da0aa1c49fd6dc', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && index.h("label", { key: 'cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857', htmlFor: this.id }, this.label)));
+            } }, this.description)))), index.h("input", { key: 'afec8fff16aadca330c804832dbd41c4b10f5caa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && index.h("label", { key: '1b25d01805915cb2dacf03ad9340beec61565bcc', htmlFor: this.id }, this.label)));
     }
 };
 

package/dist/collection/components/xpl-avatar/xpl-avatar.js

@@ -161,7 +161,7 @@ export class Avatar {
                     "references": {
                         "AvatarColor": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
                             "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarColor"
                         }
                     }
@@ -206,7 +206,7 @@ export class Avatar {
                     "references": {
                         "AvatarGroupItem": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
                             "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarGroupItem"
                         }
                     }
@@ -307,7 +307,7 @@ export class Avatar {
                     "references": {
                         "AvatarStatus": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
                             "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarStatus"
                         }
                     }
@@ -373,7 +373,7 @@ export class Avatar {
                     "references": {
                         "AvatarVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
                             "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarVariant"
                         }
                     }

package/dist/collection/components/xpl-badge/xpl-badge.js

@@ -140,7 +140,7 @@ export class Badge {
                     "references": {
                         "BadgeVariantProp": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-badge/xpl-badge.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-badge/xpl-badge.tsx",
                             "id": "src/components/components/xpl-badge/xpl-badge.tsx::BadgeVariantProp"
                         }
                     }

package/dist/collection/components/xpl-checkbox/xpl-checkbox.js

@@ -6,24 +6,19 @@ export class Checkbox {
         this.ariaLabel = '';
         this.onChange = (event) => {
             const target = event.target;
-            if (this.value) {
-                this.checkboxChange.emit(this.value);
-            }
-            else {
-                this.checkboxChange.emit(target.checked);
-            }
+            this.checkboxChange.emit(target.checked);
         };
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a73acf5a3394c8f1060f9095682093a1db3b09db', class: {
+        return (h(Host, { key: 'dd508c61fc68052f2bbdfccd606ea8f0109783f3', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: '7da5f17d827bfb6d63a4933977daee75c9845899', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: '86669521b030289b55279bd6fceecb5d060c7138', class: {
+            } }, h("input", { key: 'c5b482a12c02cb4384444e3d385cccc17a8cbd3c', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'e5ae6eef395457ff6021b008bbb4221e7c36a3c9', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'b40aafb664cbac2092938afd45683cfc0313beac' }), this.description && (h("small", { key: '06e2245639b577f5d09afdf9000e43d076758e80', class: {
+            }, htmlFor: this.id }, h("slot", { key: '71ae02b761df01bea00b483e21a9b442b8fbdd9f' }), this.description && (h("small", { key: 'f34f7e323cd9c39ce1094177e7a4d3cf4b06f788', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -238,11 +233,11 @@ export class Checkbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the checkbox input\n\nReturns the value of the checkbox input if a value is provided, otherwise returns the checked state"
+                    "text": "Emits the new checked state of the checkbox after a user interaction.\n\nAlways emits a boolean so the event payload reliably represents whether\nthe checkbox is now on or off. This is what Vue `v-model` binds to via\nthe `checked` attribute \u2014 emitting the `value` string here would coerce\nany non-empty string to `true` and make it impossible to uncheck a\ncheckbox that has a `value` prop set. Consumers that need the `value`\ncan read it from the host element (`event.target.value`) or rely on\nnative form submission (`name`/`value` pair)."
                 },
                 "complexType": {
-                    "original": "string | boolean",
-                    "resolved": "boolean | string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }];

package/dist/collection/components/xpl-choicelist/xpl-choicelist.js

@@ -3,20 +3,21 @@ import { v4 as uuid } from "uuid";
 export class Choicelist {
     constructor() {
         this.name = uuid();
-        this.onChoiceChange = (value, choiceIndex) => {
+        this.onChoiceChange = (_value, choiceIndex) => {
+            const choice = this.choices[choiceIndex];
             if (this.multi) {
                 this.selected = this.selected.map((isSelected, index) => index === choiceIndex ? !isSelected : isSelected);
-                if (typeof value === 'string') {
+                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
                     const changedValues = this.choices
                         .filter((_, index) => this.selected[index])
-                        .map((choice, index) => { var _a; return (_a = choice.value) !== null && _a !== void 0 ? _a : this.selected[index]; });
+                        .map((c, index) => { var _a; return (_a = c.value) !== null && _a !== void 0 ? _a : this.selected[index]; });
                     this.choicelistValueChange.emit(changedValues);
                 }
             }
             else {
                 this.selected = this.selected.map((_, index) => index === choiceIndex);
-                if (typeof value === 'string') {
-                    this.choicelistValueChange.emit(value);
+                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
+                    this.choicelistValueChange.emit(choice.value);
                 }
             }
         };
@@ -35,7 +36,7 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: '003270ebbe4ccd9c204774f2c41302e64697a358', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '388763663e1e9dc48f53b4e8569c3c58942fb631', class: {
+        return (h(Host, { key: 'd2da0f5aeb424a36fb117711f34c0631c464ef6a', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'a40e08f0fd60a5268ed9f4d15a97b3fa677e2e46', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {

package/dist/collection/components/xpl-input/xpl-input.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { v4 as uuid } from "uuid";
 export class Input {
     constructor() {
@@ -16,6 +16,10 @@ export class Input {
         this.isInternational = true;
         this.ariaLabel = '';
         this.type = 'text';
+        this.handleChildValueChange = (event) => {
+            event.stopPropagation();
+            this.valueChange.emit(event.detail);
+        };
         this.valueChanged = (event) => {
             const target = event.target;
             this.valueChange.emit(target.value);
@@ -103,19 +107,19 @@ export class Input {
         var _a, _b, _c, _d, _e, _f;
         switch (this.type) {
             case 'file':
-                return (h("xpl-input-file", { accept: this.accept, disabled: this.disabled, hideAcceptText: this.hideAcceptText, hideFileNames: this.hideFileNames, hideTriggerOnSelect: this.hideTriggerOnSelect, multiple: this.multiple, name: this.name, _id: this._id }, h("slot", { name: "trigger" })));
+                return (h("xpl-input-file", { accept: this.accept, disabled: this.disabled, hideAcceptText: this.hideAcceptText, hideFileNames: this.hideFileNames, hideTriggerOnSelect: this.hideTriggerOnSelect, multiple: this.multiple, name: this.name, onInputChange: this.handleChildValueChange, _id: this._id }, h("slot", { name: "trigger" })));
             case 'color':
-                return (h("xpl-input-color", { disabled: this.disabled, value: this.value, placeholder: this.placeholder, required: this.required, hideEyeDropper: this.hideEyeDropper }));
+                return (h("xpl-input-color", { disabled: this.disabled, value: this.value, placeholder: this.placeholder, required: this.required, hideEyeDropper: this.hideEyeDropper, onInputChange: this.handleChildValueChange }));
             case 'date':
-                return (h("xpl-input-date", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, post: this.post, pre: this.pre, max: this.max, min: this.min, dateFormat: this.dateFormat, mode: this.mode }));
+                return (h("xpl-input-date", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, post: this.post, pre: this.pre, max: this.max, min: this.min, dateFormat: this.dateFormat, mode: this.mode, onValueChange: this.handleChildValueChange }));
             case 'time':
-                return (h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption }));
+                return (h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption, onValueChange: this.handleChildValueChange }));
             case 'phone':
-                return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational }));
+                return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational, onValueChange: this.handleChildValueChange }));
             case 'search': {
                 const hasVisibleLabel = Boolean(((_a = this.label) !== null && _a !== void 0 ? _a : '').trim());
                 const hasErrorMessage = Boolean(this.error && this.error.length > 0);
-                return (h("xpl-input-search", { ariaLabel: ((_b = this.ariaLabel) !== null && _b !== void 0 ? _b : '').trim() || 'Search', autocomplete: (_c = this.autocomplete) !== null && _c !== void 0 ? _c : 'off', disabled: this.disabled, errorMessageId: hasErrorMessage ? `${this._id}-error` : undefined, hasError: hasErrorMessage, hasVisibleLabel: hasVisibleLabel, inputId: this._id, name: this.name, onBlurEvent: this.handleSearchBlurForward, onFocusEvent: this.handleSearchFocusForward, onSearch: this.handleSearchCommit, placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : 'Search', readonly: this.readonly, ref: (el) => {
+                return (h("xpl-input-search", { ariaLabel: ((_b = this.ariaLabel) !== null && _b !== void 0 ? _b : '').trim() || 'Search', autocomplete: (_c = this.autocomplete) !== null && _c !== void 0 ? _c : 'off', disabled: this.disabled, errorMessageId: hasErrorMessage ? `${this._id}-error` : undefined, hasError: hasErrorMessage, hasVisibleLabel: hasVisibleLabel, inputId: this._id, name: this.name, onBlurEvent: this.handleSearchBlurForward, onFocusEvent: this.handleSearchFocusForward, onSearch: this.handleSearchCommit, onValueChange: this.handleChildValueChange, placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : 'Search', readonly: this.readonly, ref: (el) => {
                         this.searchInputRef = el !== null && el !== void 0 ? el : undefined;
                     }, required: this.required, shape: (_e = this.shape) !== null && _e !== void 0 ? _e : 'rounded', value: (_f = this.value) !== null && _f !== void 0 ? _f : '' }));
             }
@@ -147,13 +151,13 @@ export class Input {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: '4b60d50e8b88f905777d76197afe181026ae5a94', class: {
+        return (h(Host, { key: '406ab6d1b4d43ceb06cdb819cec8699d2d3322b3', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (h("label", { key: '8b0dc01150607c2943ccc541b9acd3a7fa5d2143', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '8d1f988983fd54e3bc231c0a8091b4fe83ed8ab8' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '349492ed192e6105dd549634da1ce2c0371f5b9d', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '7903d2f35033ceefcf94eff8081997b4aec3c1a9', icon: "alert-circle", size: 16 }), h("span", { key: 'e3d557f705647eb304b4bf38151dcf01c17fce15' }, this.error)))));
+            } }, this.label && (h("label", { key: 'ab7ea9eb5cb82e6b602ce93ab3da482c12f59078', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '37435c5f1d3d8a30acba7788a7d215921e679327' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '57b66daa234d93d9f6d7ad582380960013596919', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '9a14b46934a8d7edc5f5e48c3fecf87441e741ca', icon: "alert-circle", size: 16 }), h("span", { key: 'badecb1aba3b3ff35cbcf6d7cb4d5355844951e6' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {
@@ -830,14 +834,14 @@ export class Input {
     }
     static get events() {
         return [{
-                "method": "focusEvent",
-                "name": "focusEvent",
+                "method": "blurEvent",
+                "name": "blurEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "The event handler for the focus event"
+                    "text": "The event handler for the blur event"
                 },
                 "complexType": {
                     "original": "FocusEvent",
@@ -850,14 +854,14 @@ export class Input {
                     }
                 }
             }, {
-                "method": "blurEvent",
-                "name": "blurEvent",
+                "method": "focusEvent",
+                "name": "focusEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "The event handler for the blur event"
+                    "text": "The event handler for the focus event"
                 },
                 "complexType": {
                     "original": "FocusEvent",
@@ -870,14 +874,14 @@ export class Input {
                     }
                 }
             }, {
-                "method": "valueChange",
-                "name": "valueChange",
+                "method": "inputEvent",
+                "name": "inputEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the input (including search fields)."
+                    "text": "Event that emits the current value of the input\n\nApplies to text-like inputs and search inputs."
                 },
                 "complexType": {
                     "original": "string",
@@ -885,14 +889,14 @@ export class Input {
                     "references": {}
                 }
             }, {
-                "method": "inputEvent",
-                "name": "inputEvent",
+                "method": "search",
+                "name": "search",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the input\n\nApplies to text-like inputs and search inputs."
+                    "text": "Emitted when the user commits a search (Enter with no enclosing form owner, or submit of the\ninternal search form). `event.detail` is the trimmed query string.\n\nApplies to search inputs (`type=\"search\"`)."
                 },
                 "complexType": {
                     "original": "string",
@@ -900,14 +904,14 @@ export class Input {
                     "references": {}
                 }
             }, {
-                "method": "search",
-                "name": "search",
+                "method": "valueChange",
+                "name": "valueChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the user commits a search (Enter with no enclosing form owner, or submit of the\ninternal search form). `event.detail` is the trimmed query string.\n\nApplies to search inputs (`type=\"search\"`)."
+                    "text": "Event that emits the current value of the input (including search fields)."
                 },
                 "complexType": {
                     "original": "string",

package/dist/collection/components/xpl-popover/xpl-popover.js

@@ -269,7 +269,7 @@ export class Popover {
                     "references": {
                         "PopoverPosition": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-popover/xpl-popover.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-popover/xpl-popover.tsx",
                             "id": "src/components/components/xpl-popover/xpl-popover.tsx::PopoverPosition"
                         }
                     }

package/dist/collection/components/xpl-radio/radio.stories.js

@@ -28,6 +28,12 @@ export default {
         name: {
             type: { name: 'string', required: false },
         },
+        selectedValue: {
+            type: { name: 'string', required: false },
+            description: 'When set, the radio is checked when `selectedValue` equals its `value`. ' +
+                'Use this to drive radio-group selection from a single source of truth ' +
+                '(e.g. Vue v-model on a shared `selectedValue`).',
+        },
     },
     parameters: {
         actions: {
@@ -35,7 +41,7 @@ export default {
         },
     },
 };
-export const Radio = ({ label, description, checked, disabled, styled, value, name }) => {
+export const Radio = ({ label, description, checked, disabled, styled, value, name, selectedValue, }) => {
     let attrs = '';
     if (description)
         attrs += ` description="${description}"`;
@@ -49,6 +55,8 @@ export const Radio = ({ label, description, checked, disabled, styled, value, na
         attrs += ` value="${value}"`;
     if (name)
         attrs += ` name="${name}"`;
+    if (selectedValue)
+        attrs += ` selected-value="${selectedValue}"`;
     const demoAttr = attrs.replace('value', 'value="demo"');
     return `
         <form>
@@ -65,6 +73,7 @@ Radio.args = {
     styled: false,
     value: '',
     name: 'demo-name',
+    selectedValue: '',
 };
 Radio.parameters = {
     layout: 'centered',

package/dist/collection/components/xpl-radio/xpl-radio.js

@@ -13,15 +13,21 @@ export class Radio {
             }
         };
     }
+    get isChecked() {
+        if (this.selectedValue !== undefined && this.value !== undefined) {
+            return this.selectedValue === this.value;
+        }
+        return Boolean(this.checked);
+    }
     render() {
-        return (h(Host, { key: '959940093b1988f6e362c17e463fe2139cd828c5', class: {
+        return (h(Host, { key: '1cda65b10ee03e06c30b2c501d7f2ec4153619f6', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'cccccd581ee84a2c5c39a625565877cc080e9702', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '3dd39b409818d7f2921c6dc7dc2c3d790a088833', class: {
+            } }, h("input", { key: 'b19a87e42feb5953ace4b8bd049427959c40a7e6', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: 'd07051460f7503a182b969eeafcb8eba5d61bef2', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '0e0af25e2b1679bef0aa053d20df8f0ec7390d18' }), this.description && (h("small", { key: 'dcc8791c823ec66dcdb806ae4aeaf7daf6c72298', class: {
+            }, htmlFor: this.id }, h("slot", { key: '06835704869d514a0d3eb01d671b6bec42524e89' }), this.description && (h("small", { key: '3e798a699fa53ca6c932e6466b438ed47aa46148', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -98,7 +104,7 @@ export class Radio {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The name attribute for the html input.\n(submittted in form as name/value pair)"
+                    "text": "The name attribute for the html input.\n(submitted in form as name/value pair)"
                 },
                 "getter": false,
                 "setter": false,
@@ -117,7 +123,7 @@ export class Radio {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value attribute for the radio input.\n(submittted in form as name/value pair)"
+                    "text": "The value attribute for the radio input.\n(submitted in form as name/value pair)"
                 },
                 "getter": false,
                 "setter": false,
@@ -143,6 +149,25 @@ export class Radio {
                 "reflect": false,
                 "attribute": "required"
             },
+            "selectedValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected value for the radio group this radio belongs to.\n\nWhen set, the radio renders as checked when `selectedValue` equals its\nown `value` prop. Use this to drive radio-group selection from a single\nsource of truth \u2014 e.g. Vue `v-model` on a shared `selectedValue` across\nevery radio in a group, where each radio still declares its own `value`.\n\nFalls back to the boolean `checked` prop when not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-value"
+            },
             "styled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/xpl-spotlight/xpl-spotlight.js

@@ -705,7 +705,7 @@ export class Spotlight {
                     "references": {
                         "SpotlightActionLayout": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-spotlight/xpl-spotlight.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-spotlight/xpl-spotlight.tsx",
                             "id": "src/components/components/xpl-spotlight/xpl-spotlight.tsx::SpotlightActionLayout"
                         }
                     }
@@ -731,7 +731,7 @@ export class Spotlight {
                     "references": {
                         "SpotlightAnchorPosition": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-spotlight/xpl-spotlight.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-spotlight/xpl-spotlight.tsx",
                             "id": "src/components/components/xpl-spotlight/xpl-spotlight.tsx::SpotlightAnchorPosition"
                         }
                     }

package/dist/collection/components/xpl-tag/xpl-tag.js

@@ -276,7 +276,7 @@ export class Tag {
                     "references": {
                         "TagDragEndDetail": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
                             "id": "src/components/components/xpl-tag/xpl-tag.tsx::TagDragEndDetail"
                         }
                     }
@@ -297,7 +297,7 @@ export class Tag {
                     "references": {
                         "TagDragStartDetail": {
                             "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
+                            "path": "/Users/roc/Sites/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
                             "id": "src/components/components/xpl-tag/xpl-tag.tsx::TagDragStartDetail"
                         }
                     }

package/dist/collection/components/xpl-toggle/xpl-toggle.js

@@ -4,6 +4,10 @@ export class Toggle {
     constructor() {
         this.variant = 'default';
         this.id = uuid();
+        this.onChange = (event) => {
+            const target = event.target;
+            this.toggleChange.emit(target.checked);
+        };
     }
     render() {
         let containerClassName = 'xpl-toggle-container';
@@ -12,13 +16,13 @@ export class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: '0cf2e99934bbe447559fbe88cc61989bbfabbdea', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd', class: {
+        return (h(Host, { key: '2665ccecd2df94b7ed7443e2ecb6265fca7f235f', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '75292b431419e1d34c127a82d61baa1ee024a2bb', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '0b8157e097f3890d6c521c399cf1f9c25514e341', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '772e34c7d553faee5b1dfc448ecb95706dc3e8df', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: '3bcfe674974e16e50a38d17836da0aa1c49fd6dc', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: 'cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: 'afec8fff16aadca330c804832dbd41c4b10f5caa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: '1b25d01805915cb2dacf03ad9340beec61565bcc', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {
@@ -130,7 +134,7 @@ export class Toggle {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The name attribute for the html input.\n(submittted in form as name/value pair)"
+                    "text": "The name attribute for the html input.\n(submitted in form as name/value pair)"
                 },
                 "getter": false,
                 "setter": false,
@@ -164,4 +168,22 @@ export class Toggle {
             "id": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "toggleChange",
+                "name": "toggleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle checked state changes. Detail is the new `checked` value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/components/xpl-checkbox2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as a,transformTag as d}from"@stencil/core/internal/client";import{v as c}from"./v4.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.checkboxChange=i(this,"checkboxChange",7),this.id=c(),this.ariaLabel="",this.onChange=e=>{this.checkboxChange.emit(this.value?this.value:e.target.checked)}}render(){var e;return t(a,{key:"a73acf5a3394c8f1060f9095682093a1db3b09db",class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},t("input",{key:"7da5f17d827bfb6d63a4933977daee75c9845899",class:"xpl-checkbox",type:"checkbox","aria-label":(null!==(e=this.ariaLabel)&&void 0!==e?e:"").trim()||void 0,checked:this.checked,"data-id":this.dataId,disabled:this.disabled,id:this.id,indeterminate:this.indeterminate,onChange:this.onChange,name:this.name,required:this.required,value:this.value}),t("label",{key:"86669521b030289b55279bd6fceecb5d060c7138",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},t("slot",{key:"b40aafb664cbac2092938afd45683cfc0313beac"}),this.description&&t("small",{key:"06e2245639b577f5d09afdf9000e43d076758e80",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}},[260,"xpl-checkbox",{ariaLabel:[1,"aria-label"],checked:[4],description:[1],disabled:[4],indeterminate:[4],name:[1],value:[1],required:[4],styled:[4],dataId:[1,"data-id"],id:[32]}]);function h(){"undefined"!=typeof customElements&&["xpl-checkbox"].forEach((e=>{"xpl-checkbox"===e&&(customElements.get(d(e))||customElements.define(d(e),l))}))}export{l as C,h as d}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as c,transformTag as a}from"@stencil/core/internal/client";import{v as d}from"./v4.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.checkboxChange=i(this,"checkboxChange",7),this.id=d(),this.ariaLabel="",this.onChange=e=>{this.checkboxChange.emit(e.target.checked)}}render(){var e;return t(c,{key:"dd508c61fc68052f2bbdfccd606ea8f0109783f3",class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},t("input",{key:"c5b482a12c02cb4384444e3d385cccc17a8cbd3c",class:"xpl-checkbox",type:"checkbox","aria-label":(null!==(e=this.ariaLabel)&&void 0!==e?e:"").trim()||void 0,checked:this.checked,"data-id":this.dataId,disabled:this.disabled,id:this.id,indeterminate:this.indeterminate,onChange:this.onChange,name:this.name,required:this.required,value:this.value}),t("label",{key:"e5ae6eef395457ff6021b008bbb4221e7c36a3c9",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},t("slot",{key:"71ae02b761df01bea00b483e21a9b442b8fbdd9f"}),this.description&&t("small",{key:"f34f7e323cd9c39ce1094177e7a4d3cf4b06f788",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}},[260,"xpl-checkbox",{ariaLabel:[1,"aria-label"],checked:[4],description:[1],disabled:[4],indeterminate:[4],name:[1],value:[1],required:[4],styled:[4],dataId:[1,"data-id"],id:[32]}]);function h(){"undefined"!=typeof customElements&&["xpl-checkbox"].forEach((e=>{"xpl-checkbox"===e&&(customElements.get(a(e))||customElements.define(a(e),l))}))}export{l as C,h as d}

package/dist/components/xpl-choicelist.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as t,h as i,Host as c,transformTag as h}from"@stencil/core/internal/client";import{d as l}from"./xpl-checkbox2.js";import{d as o}from"./xpl-radio2.js";import{v as n}from"./v4.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.choicelistChange=t(this,"choicelistChange",7),this.choicelistValueChange=t(this,"choicelistValueChange",7),this.name=n(),this.onChoiceChange=(e,s)=>{if(this.multi){if(this.selected=this.selected.map(((e,t)=>t===s?!e:e)),"string"==typeof e){const e=this.choices.filter(((e,s)=>this.selected[s])).map(((e,s)=>{var t;return null!==(t=e.value)&&void 0!==t?t:this.selected[s]}));this.choicelistValueChange.emit(e)}}else this.selected=this.selected.map(((e,t)=>t===s)),"string"==typeof e&&this.choicelistValueChange.emit(e)},this.renderChoice=({description:e,label:s,value:t,checked:c},h)=>this.multi?i("xpl-checkbox",{value:t,description:e,name:this.name,checked:c,onCheckboxChange:e=>this.onChoiceChange(e.detail,h)},s):i("xpl-radio",{value:t,description:e,name:this.name,checked:c,onRadioChange:e=>this.onChoiceChange(e.detail,h)},s)}onChoicesPropChange(e){this.selected=null!=e&&e.length>0?e.map((e=>e.checked||!1)):[]}onSelectedChange(e){this.choicelistChange.emit(e)}componentWillLoad(){this.onChoicesPropChange(this.choices)}render(){return i(c,{key:"003270ebbe4ccd9c204774f2c41302e64697a358",class:"xpl-choicelist-container"},void 0!==this.heading||void 0!==this.description?i("div",{class:"xpl-choicelist-heading"},this.heading&&i("h3",null,this.heading),this.description&&i("p",null,this.description)):null,this.choices&&i("ul",{key:"388763663e1e9dc48f53b4e8569c3c58942fb631",class:{"xpl-choicelist":!0,"xpl-choicelist--styled":this.styled}},this.choices.map(((e,s)=>{const t=this.renderChoice(e,s);return i("li",{class:{selected:this.styled&&this.selected[s]}},t,e.children&&i("ul",null,e.children.map(((e,s)=>{const t=this.renderChoice(e,s);return i("li",null,t)}))))}))))}static get watchers(){return{choices:[{onChoicesPropChange:0}],selected:[{onSelectedChange:0}]}}},[0,"xpl-choicelist",{choices:[16],description:[1],heading:[1],multi:[4],name:[1],styled:[4],selected:[32]},void 0,{choices:[{onChoicesPropChange:0}],selected:[{onSelectedChange:0}]}]),r=a,d=function(){"undefined"!=typeof customElements&&["xpl-choicelist","xpl-checkbox","xpl-radio"].forEach((e=>{switch(e){case"xpl-choicelist":customElements.get(h(e))||customElements.define(h(e),a);break;case"xpl-checkbox":customElements.get(h(e))||l();break;case"xpl-radio":customElements.get(h(e))||o()}}))};export{r as XplChoicelist,d as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as c,transformTag as h}from"@stencil/core/internal/client";import{d as l}from"./xpl-checkbox2.js";import{d as o}from"./xpl-radio2.js";import{v as n}from"./v4.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.choicelistChange=i(this,"choicelistChange",7),this.choicelistValueChange=i(this,"choicelistValueChange",7),this.name=n(),this.onChoiceChange=(e,s)=>{const i=this.choices[s];if(this.multi){if(this.selected=this.selected.map(((e,i)=>i===s?!e:e)),void 0!==(null==i?void 0:i.value)){const e=this.choices.filter(((e,s)=>this.selected[s])).map(((e,s)=>{var i;return null!==(i=e.value)&&void 0!==i?i:this.selected[s]}));this.choicelistValueChange.emit(e)}}else this.selected=this.selected.map(((e,i)=>i===s)),void 0!==(null==i?void 0:i.value)&&this.choicelistValueChange.emit(i.value)},this.renderChoice=({description:e,label:s,value:i,checked:c},h)=>this.multi?t("xpl-checkbox",{value:i,description:e,name:this.name,checked:c,onCheckboxChange:e=>this.onChoiceChange(e.detail,h)},s):t("xpl-radio",{value:i,description:e,name:this.name,checked:c,onRadioChange:e=>this.onChoiceChange(e.detail,h)},s)}onChoicesPropChange(e){this.selected=null!=e&&e.length>0?e.map((e=>e.checked||!1)):[]}onSelectedChange(e){this.choicelistChange.emit(e)}componentWillLoad(){this.onChoicesPropChange(this.choices)}render(){return t(c,{key:"d2da0f5aeb424a36fb117711f34c0631c464ef6a",class:"xpl-choicelist-container"},void 0!==this.heading||void 0!==this.description?t("div",{class:"xpl-choicelist-heading"},this.heading&&t("h3",null,this.heading),this.description&&t("p",null,this.description)):null,this.choices&&t("ul",{key:"a40e08f0fd60a5268ed9f4d15a97b3fa677e2e46",class:{"xpl-choicelist":!0,"xpl-choicelist--styled":this.styled}},this.choices.map(((e,s)=>{const i=this.renderChoice(e,s);return t("li",{class:{selected:this.styled&&this.selected[s]}},i,e.children&&t("ul",null,e.children.map(((e,s)=>{const i=this.renderChoice(e,s);return t("li",null,i)}))))}))))}static get watchers(){return{choices:[{onChoicesPropChange:0}],selected:[{onSelectedChange:0}]}}},[0,"xpl-choicelist",{choices:[16],description:[1],heading:[1],multi:[4],name:[1],styled:[4],selected:[32]},void 0,{choices:[{onChoicesPropChange:0}],selected:[{onSelectedChange:0}]}]),d=a,r=function(){"undefined"!=typeof customElements&&["xpl-choicelist","xpl-checkbox","xpl-radio"].forEach((e=>{switch(e){case"xpl-choicelist":customElements.get(h(e))||customElements.define(h(e),a);break;case"xpl-checkbox":customElements.get(h(e))||l();break;case"xpl-radio":customElements.get(h(e))||o()}}))};export{d as XplChoicelist,r as defineCustomElement}