@3t-transform/threeteeui 0.2.87 → 0.2.89

package/dist/cjs/tttx-checkbox-group.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-992a9fb3.js');
+
+const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:19px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16px;margin-bottom:4px}";
+
+const TttxCheckboxGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: 'tttx-checkbox-group' }, index.h("slot", null))));
+  }
+};
+TttxCheckboxGroup.style = tttxCheckboxGroupCss;
+
+exports.tttx_checkbox_group = TttxCheckboxGroup;

package/dist/cjs/tttx-checkbox.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-992a9fb3.js');
+
+const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox{padding:8px;display:flex;justify-content:flex-start;font-size:16px;align-items:center;font-weight:normal;line-height:19px}.tttx-checkbox tttx-icon{height:24px}.tttx-checkbox.--inline{display:inline-flex}.tttx-checkbox__input{display:none}.tttx-checkbox__label{margin-left:8px;padding-right:0;color:#212121;font-weight:normal}";
+
+const TttxCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checkboxChangeEvent = index.createEvent(this, "checkboxChangeEvent", 3);
+    this.checkboxId = undefined;
+    this.label = undefined;
+    this.inline = false;
+    this.indeterminate = false;
+    this.checked = undefined;
+  }
+  watchIndeterminateChange(newValue) {
+    this.checkbox.indeterminate = newValue;
+  }
+  onClick() {
+    const { checked, indeterminate } = this;
+    this.checkboxChangeEvent.emit({
+      indeterminate,
+      checked
+    });
+  }
+  componentDidLoad() {
+    this.checkbox.indeterminate = this.indeterminate;
+  }
+  render() {
+    const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
+    const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
+    return (index.h(index.Host, null, index.h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, index.h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), index.h("tttx-icon", { color: this.checked ? 'blue' : null, icon: renderedIcon, onClick: this.onClick.bind(this) }), index.h("span", { class: "tttx-checkbox__label" }, this.label))));
+  }
+  static get watchers() { return {
+    "indeterminate": ["watchIndeterminateChange"]
+  }; }
+};
+TttxCheckbox.style = tttxCheckboxCss;
+
+exports.tttx_checkbox = TttxCheckbox;

package/dist/cjs/tttx-data-pattern.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxDataPatternCss = ":host{display:block}";
 

package/dist/cjs/tttx-dialog-box.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.js');
 

package/dist/cjs/tttx-expander.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxExpanderCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block}.expander{border-bottom:1px solid #d5d5d5}.expander[open] .panel .open{display:initial}.expander[open] .panel .closed{display:none}.expander:not([open]) .panel .open{display:none}.expander:not([open]) .panel .closed{display:initial}.expander .panel{display:flex;gap:4px;height:36px;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}.expander .panel .panel-frame{display:flex;gap:4px;height:36px;align-items:center}.expander .panel .panel-frame .name{font-size:16px;font-weight:500;color:#212121}.expander .panel .left-icons,.expander .panel .expand-button{display:flex;height:36px;width:36px;align-items:center;justify-content:center}.expander .panel .left-icons>tttx-icon,.expander .panel .expand-button>tttx-icon{height:24px;cursor:inherit}.expander .content{margin-top:8px;margin-bottom:8px}";
 

package/dist/cjs/tttx-filter_4.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.js');
 

package/dist/cjs/tttx-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.js');
 

package/dist/cjs/tttx-icon.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.darkred{color:#A20000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
 

package/dist/cjs/tttx-keyvalue-block.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;font-size:16px;margin-bottom:4px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121}dd:not(:last-child){margin-bottom:16px}dl.spacedout,dl.horizontal{display:flex;flex-direction:row;width:100%}dl.spacedout{justify-content:space-between}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
 

package/dist/cjs/tttx-loading-spinner.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#d5d5d5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 

package/dist/cjs/tttx-multiselect-box.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.js');
 

package/dist/cjs/tttx-percentage-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxPercentageBarCss = ".sc-tttx-percentage-bar-h{display:block}.progress.sc-tttx-percentage-bar{width:100%;background-color:#dbdbdb}.progress.sc-tttx-percentage-bar .bar.sc-tttx-percentage-bar{height:20px}";
 

package/dist/cjs/tttx-qrcode.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
 
 var qrcode_min = _commonjsHelpers.createCommonjsModule(function (module, exports) {

package/dist/cjs/tttx-select-box.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.js');
 

package/dist/cjs/tttx-standalone-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;color:#212121}label.sc-tttx-standalone-input .optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input{position:relative}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{display:flex;position:absolute;height:24px;gap:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input{height:24px;width:24px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input{left:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{right:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.has-left-icon.sc-tttx-standalone-input{padding-left:72px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-left-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-right-icon.sc-tttx-standalone-input{padding-right:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus{border-color:#1479c6}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus-visible{outline:none}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input{display:flex;align-items:center;line-height:21px}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{margin-top:4px}label.sc-tttx-standalone-input .outer-container.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center;margin:0}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input input.sc-tttx-standalone-input{margin-top:0}label.sc-tttx-standalone-input .secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input:not(.visible){display:none}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded.sc-tttx-standalone-input{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.sc-tttx-standalone-input-h{display:block}";
 

package/dist/cjs/tttx-tabs.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.js');
 

package/dist/cjs/tttx-tag.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxTagCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}.tag{border-radius:20px;padding:4px;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:400}.tag span{margin-left:4px;margin-right:4px}.icon{height:18px;width:18px;font-weight:400}";
 

package/dist/cjs/tttx-textarea.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 const tttxTextareaCss = ".material-symbols-rounded.sc-tttx-textarea{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-textarea-h{display:block}label.sc-tttx-textarea{font-weight:500;font-size:16px;line-height:19px;color:#212121}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea{position:relative}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;padding:9px 16px;font-size:16px;line-height:19px;border:1px solid #d5d5d5;border-radius:4px;margin-top:8px;resize:none}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.no-label.sc-tttx-textarea{margin-top:0}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea~.errorBubble.sc-tttx-textarea{font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea~.errorBubble.sc-tttx-textarea:not(.visible){display:none}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea~.errorBubble.sc-tttx-textarea span.sc-tttx-textarea{color:#dc0000;font-size:16px;margin-right:4px}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea:focus{border-color:#1479c6}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea:focus-visible{outline:none}label.sc-tttx-textarea .secondarylabel.sc-tttx-textarea{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-textarea .optional.sc-tttx-textarea{color:#757575;font-weight:normal}";
 

package/dist/cjs/tttx-tree-view.cjs.entry.js

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
+const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;right:0;z-index:-1}}";
 
 const TttxTreeView = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.clickEvent = index.createEvent(this, "clickEvent", 7);
+    this.expandNode = index.createEvent(this, "expandNode", 7);
     this.data = undefined;
     this.treeData = undefined;
     this.selectedId = undefined;
@@ -37,6 +38,7 @@ const TttxTreeView = class {
     event.stopPropagation();
     node.isOpen = !node.isOpen;
     this.treeData = [...this.treeData];
+    this.expandNode.emit({ node: node, treeViewData: this.treeData });
   }
   handleCheckboxChange(node, event) {
     event.stopPropagation();
@@ -98,13 +100,7 @@ const TttxTreeView = class {
     }
   }
   htmlcode(type, node, check_box, check_boxColor) {
-    const htmlcode = (index.h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (index.h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && index.h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && index.h("div", { class: type }, node.title), node.html && index.h("div", { class: type, innerHTML: domsanitiser_options.purify.sanitize(node.html, domsanitiser_options.domSanitiserOptions) }), (node.menuActive || node.chevronActive) && (index.h("div", { class: "right-buttons-container" }, node.menuActive && (index.h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
-        event.stopPropagation();
-        this.onClickHandler('menu', event, node);
-      } })), node.chevronActive && (index.h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {
-        event.stopPropagation();
-        this.onClickHandler('chevron', event, node);
-      } }))))));
+    const htmlcode = (index.h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (index.h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && index.h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && index.h("div", { class: type }, node.title), node.html && index.h("div", { class: type, innerHTML: domsanitiser_options.purify.sanitize(node.html, domsanitiser_options.domSanitiserOptions) })));
     return htmlcode;
   }
   render() {

package/dist/cjs/tttx.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-44c9fa62.js');
+const index = require('./index-992a9fb3.js');
 
 /*
  Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-expander.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-filter_4.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-expander.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-filter_4.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -5,10 +5,14 @@
     "./components/atoms/tttx-percentage-bar/tttx-percentage-bar.js",
     "./components/molecules/tttx-standalone-input/tttx-standalone-input.js",
     "./components/atoms/tttx-button/tttx-button.js",
+    "./components/atoms/tttx-checkbox/tttx-checkbox.js",
     "./components/atoms/tttx-icon/tttx-icon.js",
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
     "./components/atoms/tttx-qrcode/tttx-qrcode.js",
     "./components/atoms/tttx-tag/tttx-tag.js",
+    "./components/molecules/tttx-checkbox-group/tttx-checkbox-group.js",
+    "./components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption.js",
+    "./components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading.js",
     "./components/molecules/tttx-dialog-box/tttx-dialog-box.js",
     "./components/molecules/tttx-expander/tttx-expander.js",
     "./components/molecules/tttx-form/tttx-form.js",

package/dist/collection/components/atoms/tttx-checkbox/tttx-checkbox.css

@@ -0,0 +1,28 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.tttx-checkbox {
+  padding: 8px;
+  display: flex;
+  justify-content: flex-start;
+  font-size: 16px;
+  align-items: center;
+  font-weight: normal;
+  line-height: 19px;
+}
+.tttx-checkbox tttx-icon {
+  height: 24px;
+}
+.tttx-checkbox.--inline {
+  display: inline-flex;
+}
+.tttx-checkbox__input {
+  display: none;
+}
+.tttx-checkbox__label {
+  margin-left: 8px;
+  padding-right: 0;
+  color: #212121;
+  font-weight: normal;
+}

package/dist/collection/components/atoms/tttx-checkbox/tttx-checkbox.js

@@ -0,0 +1,154 @@
+import { Host, h } from '@stencil/core';
+export class TttxCheckbox {
+  constructor() {
+    this.checkboxId = undefined;
+    this.label = undefined;
+    this.inline = false;
+    this.indeterminate = false;
+    this.checked = undefined;
+  }
+  watchIndeterminateChange(newValue) {
+    this.checkbox.indeterminate = newValue;
+  }
+  onClick() {
+    const { checked, indeterminate } = this;
+    this.checkboxChangeEvent.emit({
+      indeterminate,
+      checked
+    });
+  }
+  componentDidLoad() {
+    this.checkbox.indeterminate = this.indeterminate;
+  }
+  render() {
+    const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
+    const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
+    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon", { color: this.checked ? 'blue' : null, icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
+  }
+  static get is() { return "tttx-checkbox"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checkboxId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checkbox-id",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checked",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "checkboxChangeEvent",
+        "name": "checkboxChangeEvent",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{indeterminate: boolean, checked: boolean}",
+          "resolved": "{ indeterminate: boolean; checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "indeterminate",
+        "methodName": "watchIndeterminateChange"
+      }];
+  }
+}

package/dist/collection/components/atoms/tttx-checkbox/tttx-checkbox.stories.js

@@ -0,0 +1,69 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'Atoms/Checkbox',
+  component: 'tttx-checkbox',
+  argTypes: {
+    checkboxId: {
+      control: { type: 'text' },
+      default: 'checkbox',
+    },
+    label: {
+      control: { type: 'text' },
+      default: 'label',
+    },
+    inline: {
+      control: { type: 'boolean' },
+      default: false,
+    },
+    indeterminate: {
+      control: { type: 'boolean' },
+      default: false,
+    },
+    checked: {
+      control: { type: 'boolean' },
+      default: false,
+    },
+  },
+  parameters: {
+    actions: {
+      handles: ['checkboxChangeEvent'],
+    },
+  },
+  decorators: [withActions],
+};
+const Template = ({ label, inline, indeterminate, checked }) => `
+    <tttx-checkbox 
+        id="checkbox"
+        checkbox-id="checkbox" 
+        label="${label}" 
+        ${inline && 'inline'} 
+        ${indeterminate && 'indeterminate'} 
+        ${checked && 'checked'} 
+    />
+    <script>
+      checkbox.addEventListener('checkboxChangeEvent', (ev) => { console.log(ev) })
+    </script>
+`;
+export const Checkbox = Template.bind({});
+Checkbox.args = {
+  checkboxId: 'checkbox-id',
+  label: 'Example'
+};
+export const InlineCheckbox = Template.bind({});
+InlineCheckbox.args = {
+  checkboxId: 'checkbox-id',
+  label: 'Example',
+  inline: true
+};
+export const CheckedCheckbox = Template.bind({});
+CheckedCheckbox.args = {
+  checkboxId: 'checkbox-id',
+  label: 'Example',
+  checked: true
+};
+export const IndeterminateCheckbox = Template.bind({});
+IndeterminateCheckbox.args = {
+  checkboxId: 'checkbox-id',
+  label: 'Example',
+  indeterminate: true
+};

package/dist/collection/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption.js

@@ -0,0 +1,7 @@
+import { Host, h } from '@stencil/core';
+export class TttxCheckboxGroupCaption {
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group__caption' }, h("slot", null))));
+  }
+  static get is() { return "tttx-checkbox-group-caption"; }
+}

package/dist/collection/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading.js

@@ -0,0 +1,7 @@
+import { Host, h } from '@stencil/core';
+export class TttxCheckboxGroupHeading {
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group__heading' }, h("slot", null))));
+  }
+  static get is() { return "tttx-checkbox-group-heading"; }
+}