@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,508 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+/**
+ * Multiline text input field with label, helper text, character counter,
+ * and clear functionality. Mirrors `co-input` styling but renders a native
+ * `<textarea>` for multiline content (bios, descriptions, notes).
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered textarea wrapper
+ * @part input - The native textarea element
+ * @part helper - The helper/error text row
+ * @part counter - The character counter element
+ */
+export class CoTextarea {
+    constructor() {
+        /** Current value */
+        this.value = '';
+        /** Placeholder text */
+        this.placeholder = '';
+        /** Whether the field is required */
+        this.required = false;
+        /** Disabled state */
+        this.disabled = false;
+        /** Read-only state */
+        this.readonly = false;
+        /** Number of visible text rows */
+        this.rows = 4;
+        /** Validation status */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Field size (mirrors co-input paddings/font: s / sm / md / lg).
+         *  Vertical extent still comes from `rows`. */
+        this.size = 'md';
+        /** Show clear button when textarea has value */
+        this.clearable = false;
+        /** Resize behavior of the textarea */
+        this.resize = 'vertical';
+        this.hasFocus = false;
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.value = target.value;
+            this.coInput.emit(this.value);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.coChange.emit(this.value);
+            this.coBlur.emit();
+        };
+        this.handleClear = () => {
+            var _a;
+            this.value = '';
+            this.coClear.emit();
+            this.coInput.emit('');
+            (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    get hasValue() {
+        return this.value != null && this.value !== '';
+    }
+    get charCount() {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : '').length;
+    }
+    render() {
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
+        const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
+        return (h("div", { key: 'bbc105515a08e5ddf757c3095aa220d9ff3c1643', class: {
+                'co-textarea': true,
+                'co-textarea--disabled': this.disabled,
+                'co-textarea--focused': this.hasFocus,
+                'co-textarea--filled': this.hasValue,
+                'co-textarea--over-limit': isOverLimit,
+                [`co-textarea--${this.size}`]: true,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '54eeba06154d9ce2ec18e41046cdab973c7b30ab', class: "co-textarea__labels" }, this.label && (h("label", { key: 'b7f996ad516af104753219042d6fa3f0db32f462', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '29801d7d5958919629d93c6ae70312f44196b907', required: this.required }))), this.secondaryLabel && (h("span", { key: 'fe3637ec4dc07d95ba73d372b93d4205bf9b836c', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ca1f28e1b809c0e6071a98f654ec0b9d5f55d474', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'f5db20027591b83a255e746dcda548f6b308972f', ref: (el) => (this.textareaEl = el), class: {
+                'co-textarea__native': true,
+                [`co-textarea__native--resize-${this.resize}`]: true,
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'd795cedb2bc45a8fa15a364eabb54dba869672f5', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '72406240943ffe5644a83e5b00f028a246de792c', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'efeb161b6c9cf518d55446d7ed319d343afa736c', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '0741e7389c3bd2ee683b16fe6a06705f81826bd7', class: {
+                'co-textarea__helper': true,
+                'co-textarea__helper--error': this.status === 'error',
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '51bd6497349280c1e09bfe4fc8b066726318c08d', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '63d07623f709027a4a0f4eac8a25fb6b72b8043b', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'e9b6498ea76e13e69bf58cf8996cafa3561f4609', class: {
+                'co-textarea__counter': true,
+                'co-textarea__counter--over': isOverLimit,
+            }, part: "counter" }, this.charCount, "/", this.maxLength))))));
+    }
+    static get is() { return "co-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed above the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary label displayed on the right side"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Read-only state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible text rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character length. When set, a counter is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "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'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input paddings/font: s / sm / md / lg).\nVertical extent still comes from `rows`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear button when textarea has value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'none' | 'both'",
+                    "resolved": "\"both\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resize behavior of the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize",
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke with the current text"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the committed text on blur"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coFocus",
+                "name": "coFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coBlur",
+                "name": "coBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when clear button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -41,7 +41,7 @@ export class CoToast {
             'co-toast--multiline': hasDescription,
             'co-toast--stacked': isStacked,
         };
-        return (h("div", { key: 'bc18e157f1d28c5850448163fbe3b1ed0148086d', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: '1df6ceb6a20446f54d6bd429181e8b9ddb3c4701', class: "co-toast__icon" }, h("co-icon", { key: 'caa37fcb26774cd4211e6b01ed0080c0be2869dc', name: resolvedIcon, size: 20 }))), h("div", { key: '9e9635bfd87c0a0f9251ae2790ab1ece02d4e9e7', class: "co-toast__body" }, h("div", { key: '97d5f8880f5f1e6caaa90edf83237a2a8c6f9b80', class: "co-toast__content" }, h("span", { key: 'a51722ec68d7440d090698c4cdf07c578503a01a', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: '1ee7c20bf0a5332fe1090281658c3b932cc85872', class: "co-toast__description" }, this.description))), isStacked && (h("div", { key: 'ce5ae543e27144213b0a3a9c846f6dc12892a142', class: "co-toast__actions" }, h("slot", { key: '8af658d42453d12ca0471ce38621cdad609aa08d', name: "action" })))), !isStacked && (h("div", { key: 'b0439dc3101c0859c1f2c7f7ed3c578a3b361117', class: "co-toast__actions" }, h("slot", { key: '3a0a7d99e1fe886c073ded7e9e7805fe5ef66571', name: "action" }))), this.dismissible && (h("button", { key: '4e4374e8c12221b67b79ba8e1d51521fcfda06a3', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'd074d462adebdc7c44a95eed9482eeb973e4c9a5', name: "x", size: 16 })))));
+        return (h("div", { key: '2113d3f769ae8575ff5031a558625fda2e1482cc', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: '7019ff2526714c5dfc79ed276f4905399752b3dd', class: "co-toast__icon" }, h("co-icon", { key: 'a99bd1cd1d7e47e618924ca13b44f461d42828c8', name: resolvedIcon, size: 20 }))), h("div", { key: '0ab3a6e6fb7cd6315f85a350c8813b6e9530911b', class: "co-toast__body" }, h("div", { key: '24e9d31de0a9d0b4eb128702ecde67b081166638', class: "co-toast__content" }, h("span", { key: '7dc886e4103b626c08208fb0e4504ba2c8654922', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f98fb4331439a518192ea34174dae62ba4156c7c', class: "co-toast__description" }, this.description))), isStacked && (h("div", { key: '6298bc22d84a34057d918e39a29d94d62b9fd571', class: "co-toast__actions" }, h("slot", { key: '71d176dcc20b2fb91e134ede5e09e06166350856', name: "action" })))), !isStacked && (h("div", { key: '5cc30d3a60648e2d599a63989ffeb90e28ff6b72', class: "co-toast__actions" }, h("slot", { key: 'bb8a00f5ce4b7737b70960e95a986542278b90c6', name: "action" }))), this.dismissible && (h("button", { key: 'c9f5da7275c6cdd3c4bf512821b1d05309d74090', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'c9bf8eb4639d0e558739d3cf63fc169d4c7721eb', name: "x", size: 16 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-toggle-button/co-toggle-button.css

@@ -2,16 +2,32 @@
 
 :host {
   display: inline-flex;
+  /* Squircle radius, size-aware — mirrors co-button shape="square".
+     Lives on :host so the group can read it (via reflected size) to
+     restore outer corners while flattening the inner seam. */
+  --co-toggle-button-radius: var(--co-border-radius-sm);
 }
+:host([size='l'])  { --co-toggle-button-radius: var(--co-border-radius-lg); }
+:host([size='m'])  { --co-toggle-button-radius: var(--co-border-radius-sm); }
+:host([size='s'])  { --co-toggle-button-radius: var(--co-border-radius-xs); }
+:host([size='xs']) { --co-toggle-button-radius: var(--co-border-radius-xs); }
 
 .co-toggle-button {
   display: inline-flex;
+  width: var(--co-toggle-button-width, auto);
   align-items: center;
   justify-content: center;
   gap: var(--co-spacing-sm2);
   border: 1px solid var(--co-semantic-border-subtle);
-  border-radius: var(--co-border-radius-xs);
-  background: var(--co-semantic-surface-secondary);
+  /* Per-corner so the group can flatten just the seam corners (--co-tbr-*),
+     falling back to the squircle radius for standalone / outer corners. */
+  border-top-left-radius:     var(--co-tbr-tl, var(--co-toggle-button-radius));
+  border-top-right-radius:    var(--co-tbr-tr, var(--co-toggle-button-radius));
+  border-bottom-right-radius: var(--co-tbr-br, var(--co-toggle-button-radius));
+  border-bottom-left-radius:  var(--co-tbr-bl, var(--co-toggle-button-radius));
+  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));
   color: var(--co-semantic-text-default);
   font-family: var(--co-font-family-primary);
   font-weight: 500;
@@ -39,14 +55,18 @@
   background: var(--co-semantic-surface-hover);
 }
 
+/* Active tab: solid Cobalt black (matches co-button primary "Aplicar").
+   No translucency — over the drawer's white surface a frosted black just
+   reads as gray, which loses the strong active affordance. */
 .co-toggle-button--selected {
-  background: var(--co-semantic-surface-primary);
-  color: var(--co-semantic-on-primary);
-  border-color: var(--co-semantic-surface-primary);
+  background: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-color-base-blanco, #fff);
+  border-color: var(--co-color-base-negro, #1f1c1b);
 }
 
 .co-toggle-button--selected:hover:not(:disabled) {
-  opacity: 0.9;
+  background: var(--co-color-gray-800, #0a0a0a);
+  border-color: var(--co-color-gray-800, #0a0a0a);
 }
 
 .co-toggle-button--disabled {
@@ -57,3 +77,7 @@
 .co-toggle-button__label {
   line-height: 1;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-toggle-button { background: var(--co-semantic-surface-secondary); }
+}

package/dist/collection/components/co-toggle-button/co-toggle-button.js

@@ -14,13 +14,13 @@ export class CoToggleButton {
     }
     render() {
         const iconSize = this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
-        return (h("button", { key: '3e9708b464063577fdb47ad010950caaf4b765bc', class: {
+        return (h("button", { key: 'b8dd3d02b6494ae0984147116facf334bf6217b7', class: {
                 'co-toggle-button': true,
                 'co-toggle-button--selected': this.selected,
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: 'd33ccf292a46a623b7b8207123b64726a5d26a75', name: this.iconLeft, size: iconSize }), this.label && h("span", { key: '04410e0e57339f16115d99651a7ab25d6b640bf6', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '4f1ac0a23cc78470866aa9e1220d7ba9d08c817e', name: this.iconRight, size: iconSize })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: '76400887fc6373c1cce6aed8872f30562bd21e86', name: this.iconLeft, size: iconSize }), this.label && h("span", { key: 'c4658c1f800f20211b2eed6e5b44139362a7bf8d', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '153f4a2a3c24a1e95ecdfe5f77d257421b21aec3', name: this.iconRight, size: iconSize })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -149,7 +149,7 @@ export class CoToggleButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'m'"
             },