@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-card/co-card.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 /**
- * @slot header  - Card header area (title, actions)
+ * @slot header  - Card header area (image, title, actions)
  * @slot         - Default slot for card body/content
- * @slot footer  - Card footer area
+ * @slot footer  - Card footer area (meta, actions)
  */
 export class CoCard {
     constructor() {
@@ -12,14 +12,30 @@ export class CoCard {
         this.padding = 'md';
         /** Make the card fully clickable */
         this.clickable = false;
+        /** Stretch the card to fill parent height */
+        this.stretch = false;
+        this.hasHeader = false;
+        this.hasFooter = false;
+        this.handleHeaderSlotChange = () => {
+            this.hasHeader = this.checkSlot('header');
+        };
+        this.handleFooterSlotChange = () => {
+            this.hasFooter = this.checkSlot('footer');
+        };
+    }
+    checkSlot(slotName) {
+        var _a, _b, _c;
+        const nodes = (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`)) === null || _b === void 0 ? void 0 : _b.assignedElements()) !== null && _c !== void 0 ? _c : [];
+        return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: '6b4f52af5fc9be705779b0965917552961dd1e3c', class: {
+        return (h("div", { key: 'cdebab62b3278f12ec11a48fc021f2b3581a26a9', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'fc8e0f408e41e7ae7266b1e2e6be5b2568a1eda5', class: "co-card__header", part: "header" }, h("slot", { key: 'd287de7e1ecdcbf015a0d5001646ae540947e8f2', name: "header" })), h("div", { key: '163e2aa54cb8b3c371af7ce98543e9fd3133e997', class: "co-card__body", part: "body" }, h("slot", { key: 'c78f6a0141d654c2ed86ac524decc2cdbc547fb4' })), h("div", { key: '75c86965c7b22aaa80b81684c3130935791c88c4', class: "co-card__footer", part: "footer" }, h("slot", { key: '0bd63594d516c0cd32c88be4f46414eb6aed5bb1', name: "footer" }))));
+                'co-card--stretch': this.stretch,
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '5617eec250a9bf610ff946eea91a9ce3a9779407', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '62cc9bec88df0e538667425958addb114631a3a0', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '2f47b30bece89900cf402bf4bfa6e8bc81a6a331', class: "co-card__body", part: "body" }, h("slot", { key: '252cd909fb7f094b7b806716b8e009858a1dd2c8' })), h("div", { key: 'aa2839cdf55f763bae3bd7fd61854ea0d513e9fa', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '0426f1e66c67a7b33789889a1daaea13f85969cc', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }
@@ -94,7 +110,34 @@ export class CoCard {
                 "reflect": false,
                 "attribute": "clickable",
                 "defaultValue": "false"
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch the card to fill parent height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stretch",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "hasHeader": {},
+            "hasFooter": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/co-checkbox/co-checkbox.css

@@ -63,7 +63,9 @@
 
 /* ─── UNCHECKED ─────────────────────────────────────────────── */
 .co-checkbox:not(.co-checkbox--checked) {
-  background: transparent;
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
 }
 
@@ -124,3 +126,7 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-checkbox:not(.co-checkbox--checked) { background: transparent; }
+}

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

@@ -26,16 +26,16 @@ export class CoCheckbox {
         };
     }
     render() {
-        return (h("div", { key: 'b625a299b62bc2f37a15ca5fcaa1f36546d4058c', class: {
+        return (h("div", { key: '3774b6812ff26ccc36ca477f0a9ed523b84f053c', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: 'bc4c0309684cdedb4a053d33f326eaee3b9294c7', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: '8a73af7e6841f80857ab034fdbfc5f687ecd9801', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, part: "box" }), this.label && (h("span", { key: '22f24e0990f3f34458fb9163ac7e0dac55fd860e', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, part: "box" }), this.label && (h("span", { key: '24dd11a23fdefe9e7ee694c2f5dea6810cb8d62c', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-checkbox-group/co-checkbox-group.css

@@ -114,7 +114,9 @@
 
 /* unchecked */
 .co-checkbox-group__box:not(.co-checkbox-group__box--checked) {
-  background: transparent;
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
 }
 
@@ -196,3 +198,33 @@
 .co-checkbox-group__helper--info .co-checkbox-group__helper-text {
   color: var(--co-semantic-status-info);
 }
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-checkbox-group {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-checkbox-group__labels {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: 0;
+  min-width: 0;
+}
+
+:host([layout='horizontal']) .co-checkbox-group__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-checkbox-group > :not(.co-checkbox-group__labels) {
+  grid-column: 2;
+  min-width: 0;
+}
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-checkbox-group__box:not(.co-checkbox-group__box--checked) { background: transparent; }
+}

package/dist/collection/components/co-checkbox-group/co-checkbox-group.js

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 export class CoCheckboxGroup {
     constructor() {
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         /** Validation status */
         this.status = 'default';
         /** Currently selected values (JSON string or string array) */
@@ -68,11 +70,11 @@ export class CoCheckboxGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: '8ee32aa13b2400827128fb157162319864a84d1b', class: {
+        return (h("div", { key: 'cb538aaa167b240cafcbd7421e11aa588a7c7b12', class: {
                 'co-checkbox-group': true,
                 'co-checkbox-group--disabled': this.disabled,
                 [`co-checkbox-group--${this.status}`]: this.status !== 'default',
-            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '65c1798c7a07466e12b588df18478e765bd7ac02', class: "co-checkbox-group__labels" }, this.label && h("span", { key: '14efc3cd4587e7d5ea2c690ab0b1f61dfb72563c', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '6916d63a80dec81cb458da66bb0c9ef8fe002136', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '67bfd91b5341f6fa46ed7421a6372f2d99bbad16', class: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '9e8e43ef8ec56df7cb7386af62ac27633cde08e9', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'f1c4af391f16486910353cfa271a99c0800efaf7', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'bb91d781eb3c76b3cf346d7c09b6aa67074cb7c6', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ea0258b1106e9a13ad869823606fa86ed3044431', class: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -87,7 +89,7 @@ export class CoCheckboxGroup {
                     'co-checkbox-group__box--checked': isChecked,
                     'co-checkbox-group__box--disabled': isDisabled,
                 }, role: "checkbox", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-checkbox-group__option-label" }, opt.label)));
-        })), this.helperText && (h("div", { key: '88849855d7a87e47e85a13d7c1087407122965c5', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '49dcb6fef25409270d39a3488eb4b9a2997df96a', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: '20154bc1731f79df63c0c119fd1150ccb626fc0c', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), this.helperText && (h("div", { key: 'c0f01f638a2380f8f124350f4feebe768359e16d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '81d770840578006abea0a2e36f5e7162c1773765', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: 'ae77c9a6f140d4fb59bfd0d2e4a61b9063d4cdab', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +162,26 @@ export class CoCheckboxGroup {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/co-chip/co-chip.css

@@ -90,6 +90,23 @@ button.co-chip:focus-visible {
   color: #fff;
 }
 
+.co-chip--filled.co-chip--pending {
+  background: var(--co-color-status-pending);
+  color: #fff;
+}
+.co-chip--filled.co-chip--progress {
+  background: var(--co-color-status-progress);
+  color: #fff;
+}
+.co-chip--filled.co-chip--review {
+  background: var(--co-color-status-review);
+  color: #fff;
+}
+.co-chip--filled.co-chip--submitted {
+  background: var(--co-color-status-submitted);
+  color: #fff;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    VARIANT: OUTLINED (transparent bg, border, dark text)
    ═══════════════════════════════════════════════════════════════ */
@@ -230,20 +247,23 @@ button.co-chip--disabled {
    ICON SLOTS & REMOVE BUTTON
    ═══════════════════════════════════════════════════════════════ */
 .co-chip__icon-left,
-.co-chip__icon-right {
+.co-chip__icon-right,
+.co-chip__dot {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
 }
 
 .co-chip--large .co-chip__icon-left,
-.co-chip--large .co-chip__icon-right {
+.co-chip--large .co-chip__icon-right,
+.co-chip--large .co-chip__dot {
   width: 16px;
   height: 16px;
 }
 
 .co-chip--small .co-chip__icon-left,
-.co-chip--small .co-chip__icon-right {
+.co-chip--small .co-chip__icon-right,
+.co-chip--small .co-chip__dot {
   width: 10px;
   height: 10px;
 }
@@ -254,7 +274,7 @@ button.co-chip--disabled {
   flex-shrink: 0;
   align-items: center;
   cursor: pointer;
-  opacity: 0.7;
+  opacity: 1;
   transition: opacity 0.1s ease;
   border: none;
   background: transparent;
@@ -263,12 +283,12 @@ button.co-chip--disabled {
 }
 
 .co-chip__remove:hover {
-  opacity: 1;
+  opacity: 0.7;
 }
 
 .co-chip--large .co-chip__remove {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
 }
 
 .co-chip--small .co-chip__remove {

package/dist/collection/components/co-chip/co-chip.js

@@ -23,8 +23,11 @@ export class CoChip {
         this.color = 'default';
         /** Icon weight applied to prop-based iconLeft / iconRight. */
         this.iconWeight = 'regular';
-        /** Show dismiss/remove button and emit coRemove on click */
+        /** Show dismiss/remove button and emit coRemove on click. Reflected so it
+         *  survives lazy hydration when set via a framework wrapper. */
         this.removable = false;
+        /** Show a leading colour dot (status/value colour). Reflected for hydration. */
+        this.dot = false;
         /** Make the chip clickable (emits coClick) */
         this.clickable = false;
         /** Disabled state */
@@ -48,9 +51,9 @@ export class CoChip {
         const hasLeftSlot = this.iconMode === 'left' || this.iconMode === 'both';
         const hasRightSlot = this.iconMode === 'both' && !this.removable;
         const iconSize = this.size === 'large' ? 16 : 10;
-        const removeIconSize = this.size === 'large' ? 14 : 10;
-        // Determine effective icon mode for CSS padding
-        const hasAnyLeft = hasLeftSlot || !!this.iconLeft;
+        const removeIconSize = this.size === 'large' ? 16 : 10;
+        // Determine effective icon mode for CSS padding (the dot counts as a left icon).
+        const hasAnyLeft = hasLeftSlot || !!this.iconLeft || this.dot;
         const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable;
         let effectiveIconMode;
         if (hasAnyLeft && hasAnyRight)
@@ -62,7 +65,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '3e7de666616d51e9d47b1487d50d0422064ec19a', class: {
+        return (h(Tag, { key: 'd99b4031df6b255c1ada8fd6a4743fe1b1119d3b', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -72,7 +75,7 @@ export class CoChip {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.iconLeft && !hasLeftSlot && (h("span", { key: '05b2c0b0b1fe7e0990280cc6d23a2f42dc0a9967', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: '419cc3a0ea59fd2665c04b2f038dfd8de5a36e1f', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '89d503ba64e57cc23cc93afbcf940ec0f2565c43', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '39859921763324755975405e4651faca5a6613cb', name: "icon-left" }))), h("span", { key: '8100ebb0c093432ac4e73f0de37de5073c12e3d6', class: "co-chip__label" }, h("slot", { key: 'dc9b8afe1c8c5f16c9b9f9aac7fdd3c488e2c677' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '02fc908ad6a03e61b55cc991a066a553b8980fdc', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '030e2339b9a6fd4e87105dbad3b0d2ce1b799c41', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '004133074573b2988e24328e534b39822df82112', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'f9336a3adff891707e139977e88e697286570894', name: "icon-right" }))), this.removable && (h("span", { key: '17c0dfcd42cbebee9ce30adb30a677e3d215c0b5', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '76adc4bebfe935b7a7852eb4c4c6cc1375f2aa53', name: "x-circle", size: removeIconSize, weight: "fill" })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: '7d65ad877a914122911524600347a9f568082875', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '25f2d43becce555ae671fcdfb0369a5c5dc783aa', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '77bac8466e6b47339c503213f6498bd3e1f5f430', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'e487eb428c8ea3f6e2caa75684ea89b8ae7bbafe', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '209e199ea5ec9682507c33a218e0639273fc1ae2', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'e589f0ea28365043fd51d1f06157ea618291be16', name: "icon-left" }))), h("span", { key: '08a575e1cd0ea92b0193d10e988b1c300b33caa2', class: "co-chip__label" }, h("slot", { key: 'a296df6fb688b28670ae6224b4affb841e8659bc' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: 'f014692392576afa93a4ea856a5c3842dd3ede8e', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '048d42664c073f234d4066b44946c1a5c0190dc1', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: 'd45c8b9801a370aa3d29bd24994bcafe42a14c59', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'cf26f624dc1442d97c588fb7adc80d0ab685cafd', name: "icon-right" }))), this.removable && (h("span", { key: '411bce99361ef1ec436572bf061077372f11b38b', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'e5a0ac43fc8912e6e9f69aef0886a8bb96f80910', name: "x-circle", size: removeIconSize, weight: "fill" })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -172,8 +175,8 @@ export class CoChip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'",
-                    "resolved": "\"default\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "original": "| 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'\n    | 'pending' | 'progress' | 'review' | 'submitted'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"pending\" | \"primary\" | \"progress\" | \"review\" | \"submitted\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -277,14 +280,53 @@ export class CoChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show dismiss/remove button and emit coRemove on click"
+                    "text": "Show dismiss/remove button and emit coRemove on click. Reflected so it\nsurvives lazy hydration when set via a framework wrapper."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "removable",
                 "defaultValue": "false"
             },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a leading colour dot (status/value colour). Reflected for hydration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dot",
+                "defaultValue": "false"
+            },
+            "dotColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour of the leading dot (hex or any CSS colour). Reflected for hydration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dot-color"
+            },
             "clickable": {
                 "type": "boolean",
                 "mutable": false,