xv-webcomponents 1.24.16-qa.0 → 1.24.17-qa.0

package/dist/cjs/xv-accordion-v2_50.cjs.entry.js

@@ -84615,6 +84615,7 @@ XvTextarea.style = xvTextareaCss();
 
 const xvTileCss = () => `@charset "UTF-8";.xv-tile--host{display:contents}.xv-tile--host[message]{display:inherit;position:relative}.xv-tile--host[message]:hover:before{content:attr(message);display:block;position:absolute;background-color:var(--background-inverse, #333);color:var(--text-on-color, #fff);padding:1em 3em;border-radius:5px;font-size:0.8em;left:0;bottom:100%;white-space:wrap;opacity:1;z-index:2}.xv-tile--host .xv-tile{min-height:64px;min-width:128px;border-radius:3px;border:1px solid var(--border-tile-02, #ACACAC);outline:2px solid transparent;background-color:var(--layer-02, #FFF);text-align:left;user-select:none;grid-template-columns:1fr auto;grid-template-areas:"content control" "footer footer" "expandable expandable";display:inline-grid;color:var(--text-primary, #333)}.xv-tile--host .xv-tile--variant-selectable,.xv-tile--host .xv-tile--variant-expandable,.xv-tile--host .xv-tile--variant-clickable{cursor:pointer;transition:250ms ease-in-out background-color}.xv-tile--host .xv-tile--variant-selectable:hover,.xv-tile--host .xv-tile--variant-expandable:hover,.xv-tile--host .xv-tile--variant-clickable:hover{border-color:var(--border-tile-01, #D1D1D1);background-color:var(--layer-hover-02, #F7F7F7)}.xv-tile--host .xv-tile--variant-selectable:active,.xv-tile--host .xv-tile--variant-expandable:active,.xv-tile--host .xv-tile--variant-clickable:active{background-color:var(--layer-active-02, #D1D1D1)}.xv-tile--host .xv-tile--variant-selectable:focus-within,.xv-tile--host .xv-tile--variant-expandable:focus-within,.xv-tile--host .xv-tile--variant-clickable:focus-within{outline-width:1px;outline-color:var(--focus)}.xv-tile--host .xv-tile--variant-selectable.selected,.xv-tile--host .xv-tile--variant-expandable.selected,.xv-tile--host .xv-tile--variant-clickable.selected{background-color:var(--layer-selected-02, #E3E3E3)}.xv-tile--host .xv-tile--variant-selectable.selected:hover,.xv-tile--host .xv-tile--variant-expandable.selected:hover,.xv-tile--host .xv-tile--variant-clickable.selected:hover{background-color:var(--layer-selected-hover-02, #DADADA)}.xv-tile--host .xv-tile--block{display:grid}.xv-tile--host .xv-tile--error{border-color:var(--support-error);outline:2px solid var(--support-error)}.xv-tile--host .xv-tile--disabled{border-color:var(--border-disabled, #D1D1D1);background-color:var(--layer-01, #F7F7F7);color:var(--text-disabled, rgba(19, 19, 19, 0.25));user-select:none;pointer-events:none;cursor:not-allowed}.xv-tile--host .xv-tile_content{grid-area:content;font-style:normal;font-weight:400;font-size:var(--fz-md, 14px);line-height:20px;letter-spacing:0.16px}.xv-tile--host .xv-tile_content>*{margin:0;padding:0}.xv-tile--host .xv-tile_content__title{font-size:20px;line-height:28px;letter-spacing:unset}.xv-tile--host .xv-tile_content:not(:empty){padding:var(--spacing-05, 16px)}.xv-tile--host .xv-tile_control{grid-area:control}.xv-tile--host .xv-tile_control:not(:empty){padding-block:var(--spacing-05, 16px);padding-inline-end:var(--spacing-05, 16px)}.xv-tile--host .xv-tile_control input[type=checkbox],.xv-tile--host .xv-tile_control input[type=radio]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;width:16px;height:16px;position:relative;display:inline-flex;align-items:center;justify-content:center}.xv-tile--host .xv-tile_control input[type=checkbox]:focus,.xv-tile--host .xv-tile_control input[type=radio]:focus{outline:1.4px solid var(--focus)}.xv-tile--host .xv-tile_control input[type=checkbox]:before,.xv-tile--host .xv-tile_control input[type=checkbox]:after,.xv-tile--host .xv-tile_control input[type=radio]:before,.xv-tile--host .xv-tile_control input[type=radio]:after{display:inline-block;border-radius:inherit;transition:200ms ease-in-out border-color, 200ms ease-in-out background-color}.xv-tile--host .xv-tile_control input[type=checkbox]:before,.xv-tile--host .xv-tile_control input[type=radio]:before{content:"";width:inherit;height:inherit;background-color:#fff;border:1px solid var(--icon-primary, #131313);box-sizing:border-box}.xv-tile--host .xv-tile_control input[type=checkbox]:after,.xv-tile--host .xv-tile_control input[type=radio]:after{position:absolute}.xv-tile--host .xv-tile_control input[type=checkbox]:checked:before,.xv-tile--host .xv-tile_control input[type=radio]:checked:before{border-color:var(--background-brand, #97BF0D)}.xv-tile--host .xv-tile_control input[type=checkbox]:checked:after,.xv-tile--host .xv-tile_control input[type=radio]:checked:after{content:""}.xv-tile--host .xv-tile_control input[type=checkbox]{border-radius:2px}.xv-tile--host .xv-tile_control input[type=checkbox]:after{width:5px;height:8px;border:solid #fff;margin-bottom:2px;border-width:0 2px 2px 0;transform:rotate(45deg)}.xv-tile--host .xv-tile_control input[type=checkbox]:checked:not([readonly]):before{background-color:var(--background-brand, #97BF0D)}.xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:before{background-color:transparent}.xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:before,.xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:after{border-color:var(--text-disabled, rgba(18, 18, 18, 0.25))}.xv-tile--host .xv-tile_control input[type=radio]{border-radius:50%}.xv-tile--host .xv-tile_control input[type=radio]:after{width:50%;height:50%;background-color:var(--background-brand, #97BF0D)}.xv-tile--host .xv-tile_footer{grid-area:footer;display:flex;justify-content:flex-end}.xv-tile--host .xv-tile_footer__icon{pointer-events:none;background-color:transparent;outline:none;border:none;margin:0;padding:var(--spacing-05, 16px);font-size:16px;display:inline-flex;align-items:center;justify-content:center}.xv-tile--host .xv-tile_footer__icon:before{content:"";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.xv-tile--host .xv-tile_footer__icon.icon--clickable:before{content:"➔"}.xv-tile--host .xv-tile_footer__icon.icon--expandable:before{width:12px;height:12px;border-style:solid;border-width:0 2px 2px 0;transform:rotate(45deg);transform-origin:center;transition:200ms ease-in-out transform}.xv-tile--host .xv-tile_footer__icon.icon--expandable.open:before{transform:rotate(-135deg)}.xv-tile--host .xv-tile_expandable{grid-area:expandable;display:none}.xv-tile--host .xv-tile_expandable.open{display:block}.xv-tile--host .xv-tile_expandable [slot=expandable]{margin:0;padding-inline:var(--spacing-05, 16px);padding-block-end:var(--spacing-05, 16px)}`;
 
+let tileUid = 0;
 const XvTile = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
@@ -84622,6 +84623,7 @@ const XvTile = class {
         this.variant = 'base';
         this.checked = false;
         this.readonly = false;
+        this.inputId = `xv-tile-${tileUid++}`;
         this.handleChange = (e) => {
             const input = e.target;
             this.checked = !!input.checked;
@@ -84647,7 +84649,7 @@ const XvTile = class {
         this.checked = !this.checked;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'fb9257ad3df4714abf312f2561933a39ba7b231f', class: "xv-tile--host" }, index$1.h("label", { key: '06a091b33fd1746efd603d18beaabf3ac44906d9', class: {
+        return (index$1.h(index$1.Host, { key: 'e9093c3a902d972bdeb4c0696daf2f9e57cc1b09', class: "xv-tile--host" }, index$1.h("label", { key: '1ac7a225720930bee3cc9c58228f04c65cf6df41', htmlFor: this.variant === 'selectable' ? this.inputId : undefined, class: {
                 [this.el.className]: !!this.el.className,
                 'xv-tile': true,
                 [`xv-tile--variant-${this.variant}`]: !!this.variant,
@@ -84655,7 +84657,7 @@ const XvTile = class {
                 'xv-tile--disabled': !!this.disabled,
                 'selected': !!this.checked,
                 'xv-tile--error': !!this.error,
-            } }, index$1.h("div", { key: '5c37fb287777a073f902a54c4cbde67e85a0824e', class: "xv-tile_content" }, this.label && index$1.h("p", { key: '46ff1b0c474b88a54fafcceed5d73b8df1684edc', class: "xv-tile_content__title" }, this.label), index$1.h("slot", { key: '3535d64b70038cd36cb90452af87941d97603823' })), this.variant === 'selectable' && (index$1.h("div", { key: '5976b3f69e10c0720ecd2598b3804139a9fa5856', class: "xv-tile_control" }, this.multiple ? (index$1.h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (index$1.h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (index$1.h("div", { key: 'f3a4cc9a41e230ae7fd0bc9993071480a072b935', class: "xv-tile_footer" }, index$1.h("button", { key: '186e3fef72b67d277499278d5c8a2844eb44f0f0', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), index$1.h("div", { key: '3d9524fd41699250f72e34c1a1091c8e0f99d322', class: { 'xv-tile_expandable': true, open: this.checked } }, index$1.h("slot", { key: 'e5f3321ce5eabe01e6af51c005718f48eaa63707', name: "expandable" })))));
+            } }, index$1.h("div", { key: '46cdcfaea2dc4064c1af27591c638a08bd349003', class: "xv-tile_content" }, this.label && index$1.h("p", { key: 'eb8bbc489d077061f76d0e86c3623f4d70c0fc71', class: "xv-tile_content__title" }, this.label), index$1.h("slot", { key: '54fd4d5852efc46bbb4dc101e7484416e09f86c3' })), this.variant === 'selectable' && (index$1.h("div", { key: '49922cc57a1d57cb42d7f7712019630ce773e68c', class: "xv-tile_control" }, this.multiple ? (index$1.h("input", { type: "checkbox", id: this.inputId, disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (index$1.h("input", { type: "radio", id: this.inputId, disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (index$1.h("div", { key: 'c4c10a986bbd4459719975c250005af5c35c0c79', class: "xv-tile_footer" }, index$1.h("button", { key: '52bfefd1ac2dad91a0defc37b2b671d87a704092', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), index$1.h("div", { key: '61dab20478eea4fa550ab1f3f2145071eff15039', class: { 'xv-tile_expandable': true, open: this.checked } }, index$1.h("slot", { key: '71dfca2fa1961457aba36c2cd454e115ad08df8b', name: "expandable" })))));
     }
     get el() { return index$1.getElement(this); }
 };

package/dist/collection/components/xv-tile/xv-tile.js

@@ -1,9 +1,11 @@
 import { h, Host } from "@stencil/core";
+let tileUid = 0;
 export class XvTile {
     constructor() {
         this.variant = 'base';
         this.checked = false;
         this.readonly = false;
+        this.inputId = `xv-tile-${tileUid++}`;
         this.handleChange = (e) => {
             const input = e.target;
             this.checked = !!input.checked;
@@ -29,7 +31,7 @@ export class XvTile {
         this.checked = !this.checked;
     }
     render() {
-        return (h(Host, { key: 'fb9257ad3df4714abf312f2561933a39ba7b231f', class: "xv-tile--host" }, h("label", { key: '06a091b33fd1746efd603d18beaabf3ac44906d9', class: {
+        return (h(Host, { key: 'e9093c3a902d972bdeb4c0696daf2f9e57cc1b09', class: "xv-tile--host" }, h("label", { key: '1ac7a225720930bee3cc9c58228f04c65cf6df41', htmlFor: this.variant === 'selectable' ? this.inputId : undefined, class: {
                 [this.el.className]: !!this.el.className,
                 'xv-tile': true,
                 [`xv-tile--variant-${this.variant}`]: !!this.variant,
@@ -37,7 +39,7 @@ export class XvTile {
                 'xv-tile--disabled': !!this.disabled,
                 'selected': !!this.checked,
                 'xv-tile--error': !!this.error,
-            } }, h("div", { key: '5c37fb287777a073f902a54c4cbde67e85a0824e', class: "xv-tile_content" }, this.label && h("p", { key: '46ff1b0c474b88a54fafcceed5d73b8df1684edc', class: "xv-tile_content__title" }, this.label), h("slot", { key: '3535d64b70038cd36cb90452af87941d97603823' })), this.variant === 'selectable' && (h("div", { key: '5976b3f69e10c0720ecd2598b3804139a9fa5856', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: 'f3a4cc9a41e230ae7fd0bc9993071480a072b935', class: "xv-tile_footer" }, h("button", { key: '186e3fef72b67d277499278d5c8a2844eb44f0f0', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '3d9524fd41699250f72e34c1a1091c8e0f99d322', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: 'e5f3321ce5eabe01e6af51c005718f48eaa63707', name: "expandable" })))));
+            } }, h("div", { key: '46cdcfaea2dc4064c1af27591c638a08bd349003', class: "xv-tile_content" }, this.label && h("p", { key: 'eb8bbc489d077061f76d0e86c3623f4d70c0fc71', class: "xv-tile_content__title" }, this.label), h("slot", { key: '54fd4d5852efc46bbb4dc101e7484416e09f86c3' })), this.variant === 'selectable' && (h("div", { key: '49922cc57a1d57cb42d7f7712019630ce773e68c', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", id: this.inputId, disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", id: this.inputId, disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: 'c4c10a986bbd4459719975c250005af5c35c0c79', class: "xv-tile_footer" }, h("button", { key: '52bfefd1ac2dad91a0defc37b2b671d87a704092', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '61dab20478eea4fa550ab1f3f2145071eff15039', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '71dfca2fa1961457aba36c2cd454e115ad08df8b', name: "expandable" })))));
     }
     static get is() { return "xv-tile"; }
     static get originalStyleUrls() {

package/dist/esm/xv-accordion-v2_50.entry.js

@@ -84613,6 +84613,7 @@ XvTextarea.style = xvTextareaCss();
 
 const xvTileCss = () => `@charset "UTF-8";.xv-tile--host{display:contents}.xv-tile--host[message]{display:inherit;position:relative}.xv-tile--host[message]:hover:before{content:attr(message);display:block;position:absolute;background-color:var(--background-inverse, #333);color:var(--text-on-color, #fff);padding:1em 3em;border-radius:5px;font-size:0.8em;left:0;bottom:100%;white-space:wrap;opacity:1;z-index:2}.xv-tile--host .xv-tile{min-height:64px;min-width:128px;border-radius:3px;border:1px solid var(--border-tile-02, #ACACAC);outline:2px solid transparent;background-color:var(--layer-02, #FFF);text-align:left;user-select:none;grid-template-columns:1fr auto;grid-template-areas:"content control" "footer footer" "expandable expandable";display:inline-grid;color:var(--text-primary, #333)}.xv-tile--host .xv-tile--variant-selectable,.xv-tile--host .xv-tile--variant-expandable,.xv-tile--host .xv-tile--variant-clickable{cursor:pointer;transition:250ms ease-in-out background-color}.xv-tile--host .xv-tile--variant-selectable:hover,.xv-tile--host .xv-tile--variant-expandable:hover,.xv-tile--host .xv-tile--variant-clickable:hover{border-color:var(--border-tile-01, #D1D1D1);background-color:var(--layer-hover-02, #F7F7F7)}.xv-tile--host .xv-tile--variant-selectable:active,.xv-tile--host .xv-tile--variant-expandable:active,.xv-tile--host .xv-tile--variant-clickable:active{background-color:var(--layer-active-02, #D1D1D1)}.xv-tile--host .xv-tile--variant-selectable:focus-within,.xv-tile--host .xv-tile--variant-expandable:focus-within,.xv-tile--host .xv-tile--variant-clickable:focus-within{outline-width:1px;outline-color:var(--focus)}.xv-tile--host .xv-tile--variant-selectable.selected,.xv-tile--host .xv-tile--variant-expandable.selected,.xv-tile--host .xv-tile--variant-clickable.selected{background-color:var(--layer-selected-02, #E3E3E3)}.xv-tile--host .xv-tile--variant-selectable.selected:hover,.xv-tile--host .xv-tile--variant-expandable.selected:hover,.xv-tile--host .xv-tile--variant-clickable.selected:hover{background-color:var(--layer-selected-hover-02, #DADADA)}.xv-tile--host .xv-tile--block{display:grid}.xv-tile--host .xv-tile--error{border-color:var(--support-error);outline:2px solid var(--support-error)}.xv-tile--host .xv-tile--disabled{border-color:var(--border-disabled, #D1D1D1);background-color:var(--layer-01, #F7F7F7);color:var(--text-disabled, rgba(19, 19, 19, 0.25));user-select:none;pointer-events:none;cursor:not-allowed}.xv-tile--host .xv-tile_content{grid-area:content;font-style:normal;font-weight:400;font-size:var(--fz-md, 14px);line-height:20px;letter-spacing:0.16px}.xv-tile--host .xv-tile_content>*{margin:0;padding:0}.xv-tile--host .xv-tile_content__title{font-size:20px;line-height:28px;letter-spacing:unset}.xv-tile--host .xv-tile_content:not(:empty){padding:var(--spacing-05, 16px)}.xv-tile--host .xv-tile_control{grid-area:control}.xv-tile--host .xv-tile_control:not(:empty){padding-block:var(--spacing-05, 16px);padding-inline-end:var(--spacing-05, 16px)}.xv-tile--host .xv-tile_control input[type=checkbox],.xv-tile--host .xv-tile_control input[type=radio]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;width:16px;height:16px;position:relative;display:inline-flex;align-items:center;justify-content:center}.xv-tile--host .xv-tile_control input[type=checkbox]:focus,.xv-tile--host .xv-tile_control input[type=radio]:focus{outline:1.4px solid var(--focus)}.xv-tile--host .xv-tile_control input[type=checkbox]:before,.xv-tile--host .xv-tile_control input[type=checkbox]:after,.xv-tile--host .xv-tile_control input[type=radio]:before,.xv-tile--host .xv-tile_control input[type=radio]:after{display:inline-block;border-radius:inherit;transition:200ms ease-in-out border-color, 200ms ease-in-out background-color}.xv-tile--host .xv-tile_control input[type=checkbox]:before,.xv-tile--host .xv-tile_control input[type=radio]:before{content:"";width:inherit;height:inherit;background-color:#fff;border:1px solid var(--icon-primary, #131313);box-sizing:border-box}.xv-tile--host .xv-tile_control input[type=checkbox]:after,.xv-tile--host .xv-tile_control input[type=radio]:after{position:absolute}.xv-tile--host .xv-tile_control input[type=checkbox]:checked:before,.xv-tile--host .xv-tile_control input[type=radio]:checked:before{border-color:var(--background-brand, #97BF0D)}.xv-tile--host .xv-tile_control input[type=checkbox]:checked:after,.xv-tile--host .xv-tile_control input[type=radio]:checked:after{content:""}.xv-tile--host .xv-tile_control input[type=checkbox]{border-radius:2px}.xv-tile--host .xv-tile_control input[type=checkbox]:after{width:5px;height:8px;border:solid #fff;margin-bottom:2px;border-width:0 2px 2px 0;transform:rotate(45deg)}.xv-tile--host .xv-tile_control input[type=checkbox]:checked:not([readonly]):before{background-color:var(--background-brand, #97BF0D)}.xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:before{background-color:transparent}.xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:before,.xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:after{border-color:var(--text-disabled, rgba(18, 18, 18, 0.25))}.xv-tile--host .xv-tile_control input[type=radio]{border-radius:50%}.xv-tile--host .xv-tile_control input[type=radio]:after{width:50%;height:50%;background-color:var(--background-brand, #97BF0D)}.xv-tile--host .xv-tile_footer{grid-area:footer;display:flex;justify-content:flex-end}.xv-tile--host .xv-tile_footer__icon{pointer-events:none;background-color:transparent;outline:none;border:none;margin:0;padding:var(--spacing-05, 16px);font-size:16px;display:inline-flex;align-items:center;justify-content:center}.xv-tile--host .xv-tile_footer__icon:before{content:"";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.xv-tile--host .xv-tile_footer__icon.icon--clickable:before{content:"➔"}.xv-tile--host .xv-tile_footer__icon.icon--expandable:before{width:12px;height:12px;border-style:solid;border-width:0 2px 2px 0;transform:rotate(45deg);transform-origin:center;transition:200ms ease-in-out transform}.xv-tile--host .xv-tile_footer__icon.icon--expandable.open:before{transform:rotate(-135deg)}.xv-tile--host .xv-tile_expandable{grid-area:expandable;display:none}.xv-tile--host .xv-tile_expandable.open{display:block}.xv-tile--host .xv-tile_expandable [slot=expandable]{margin:0;padding-inline:var(--spacing-05, 16px);padding-block-end:var(--spacing-05, 16px)}`;
 
+let tileUid = 0;
 const XvTile = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -84620,6 +84621,7 @@ const XvTile = class {
         this.variant = 'base';
         this.checked = false;
         this.readonly = false;
+        this.inputId = `xv-tile-${tileUid++}`;
         this.handleChange = (e) => {
             const input = e.target;
             this.checked = !!input.checked;
@@ -84645,7 +84647,7 @@ const XvTile = class {
         this.checked = !this.checked;
     }
     render() {
-        return (h(Host, { key: 'fb9257ad3df4714abf312f2561933a39ba7b231f', class: "xv-tile--host" }, h("label", { key: '06a091b33fd1746efd603d18beaabf3ac44906d9', class: {
+        return (h(Host, { key: 'e9093c3a902d972bdeb4c0696daf2f9e57cc1b09', class: "xv-tile--host" }, h("label", { key: '1ac7a225720930bee3cc9c58228f04c65cf6df41', htmlFor: this.variant === 'selectable' ? this.inputId : undefined, class: {
                 [this.el.className]: !!this.el.className,
                 'xv-tile': true,
                 [`xv-tile--variant-${this.variant}`]: !!this.variant,
@@ -84653,7 +84655,7 @@ const XvTile = class {
                 'xv-tile--disabled': !!this.disabled,
                 'selected': !!this.checked,
                 'xv-tile--error': !!this.error,
-            } }, h("div", { key: '5c37fb287777a073f902a54c4cbde67e85a0824e', class: "xv-tile_content" }, this.label && h("p", { key: '46ff1b0c474b88a54fafcceed5d73b8df1684edc', class: "xv-tile_content__title" }, this.label), h("slot", { key: '3535d64b70038cd36cb90452af87941d97603823' })), this.variant === 'selectable' && (h("div", { key: '5976b3f69e10c0720ecd2598b3804139a9fa5856', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: 'f3a4cc9a41e230ae7fd0bc9993071480a072b935', class: "xv-tile_footer" }, h("button", { key: '186e3fef72b67d277499278d5c8a2844eb44f0f0', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '3d9524fd41699250f72e34c1a1091c8e0f99d322', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: 'e5f3321ce5eabe01e6af51c005718f48eaa63707', name: "expandable" })))));
+            } }, h("div", { key: '46cdcfaea2dc4064c1af27591c638a08bd349003', class: "xv-tile_content" }, this.label && h("p", { key: 'eb8bbc489d077061f76d0e86c3623f4d70c0fc71', class: "xv-tile_content__title" }, this.label), h("slot", { key: '54fd4d5852efc46bbb4dc101e7484416e09f86c3' })), this.variant === 'selectable' && (h("div", { key: '49922cc57a1d57cb42d7f7712019630ce773e68c', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", id: this.inputId, disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", id: this.inputId, disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: 'c4c10a986bbd4459719975c250005af5c35c0c79', class: "xv-tile_footer" }, h("button", { key: '52bfefd1ac2dad91a0defc37b2b671d87a704092', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '61dab20478eea4fa550ab1f3f2145071eff15039', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '71dfca2fa1961457aba36c2cd454e115ad08df8b', name: "expandable" })))));
     }
     get el() { return getElement(this); }
 };

package/dist/types/components/xv-tile/xv-tile.d.ts

@@ -12,6 +12,7 @@ export declare class XvTile {
     value?: string;
     checked: boolean;
     readonly: boolean;
+    private readonly inputId;
     tileChange: EventEmitter<{
         name?: string;
         value?: string;