@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -1,38 +1,49 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
 
-const coIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1;flex-shrink:0}span{display:contents}svg{display:block;width:100%;height:100%;fill:currentColor}`;
-
-/** Module-level cache shared across all instances */
-const iconCache = new Map();
 const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
+/** Caché compartido a nivel de módulo: clave → PROMESA del SVG (en vuelo o resuelta). */
+const iconCache = new Map();
+function getBasePath() {
+    return globalThis.__cobaltIconBasePath || CDN_BASE;
+}
 /**
- * File naming convention in @phosphor-icons/core:
- *   regular → "plus.svg"
- *   bold/thin/light/fill/duotone → "plus-bold.svg", "plus-fill.svg", etc.
+ * Convención de nombres en @phosphor-icons/core:
+ *   regular → "plus.svg" | otros → "plus-bold.svg", "plus-fill.svg", …
  */
 function toFilename(kebab, weight) {
     return weight === 'regular' ? `${kebab}.svg` : `${kebab}-${weight}.svg`;
 }
-async function loadSvg(name, weight) {
+/**
+ * Devuelve (y cachea) la PROMESA del SVG para `(weight, name)`. Las llamadas
+ * concurrentes para el mismo icono comparten un único fetch.
+ */
+function loadSvg(name, weight) {
     const key = `${weight}/${name}`;
-    if (iconCache.has(key))
-        return iconCache.get(key);
-    const filename = toFilename(name, weight);
-    const url = `${CDN_BASE}/${weight}/${filename}`;
-    try {
-        const res = await fetch(url);
-        if (!res.ok)
-            return '';
-        const svg = await res.text();
-        iconCache.set(key, svg);
-        return svg;
-    }
-    catch (_a) {
+    const cached = iconCache.get(key);
+    if (cached)
+        return cached; // hit incluso si el fetch sigue en vuelo
+    // Cache-bust opcional: ?v=<version> (ver setIconVersion). Permite Cache-Control
+    // immutable/largo en los SVG sin servir iconos stale al subir de versión de Phosphor.
+    const version = globalThis.__cobaltIconVersion;
+    const base = `${getBasePath()}/${weight}/${toFilename(name, weight)}`;
+    const url = version ? `${base}?v=${version}` : base;
+    // priority:'low' → los iconos ceden ante JS/CSS/datos críticos del boot
+    // (Fetch Priority API; ignorado sin daño donde no se soporta).
+    const p = fetch(url, { priority: 'low' })
+        .then((res) => (res.ok ? res.text() : '')) // 404 → '' (queda cacheado, no reintenta)
+        .catch(() => {
+        // Error de red: no envenenar el caché — permitir reintento futuro.
+        iconCache.delete(key);
         return '';
-    }
+    });
+    iconCache.set(key, p); // se guarda ANTES del await
+    return p;
 }
+
+const coIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1;flex-shrink:0}span{display:contents}svg{display:block;width:100%;height:100%;fill:currentColor}`;
+
 const CoIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -58,12 +69,12 @@ const CoIcon = class {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (index.h(index.Host, { key: '05b934c6c75b66802014bcb3365110bbd49e8267', "aria-hidden": "true", style: {
+        return (index.h(index.Host, { key: '65fc20ae25aff18456c778d69454259755477cc8', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, index.h("span", { key: '15ab00cbd1a8affffb54c257c1c4556a517a556b', part: "svg", innerHTML: this.svgContent })));
+            } }, index.h("span", { key: '867d361c4cd66611a38ccca0910ac93e9b41ed18', part: "svg", innerHTML: this.svgContent })));
     }
     static get watchers() { return {
         "name": [{

package/dist/cjs/co-input.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
+var requiredMark = require('./requiredMark-CqMGt1H1.js');
 
-const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-input--horizontal{flex-direction:row;align-items:flex-start}.co-input--horizontal .co-input__labels{flex-shrink:0;padding-top:var(--co-spacing-sm2);min-width:0}.co-input--horizontal .co-input__field-row{flex:1;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity 0.15s ease;box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}`;
+const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{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-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, 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);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity 0.15s ease;box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoInput = class {
     constructor(hostRef) {
@@ -13,8 +14,9 @@ const CoInput = class {
         this.coFocus = index.createEvent(this, "coFocus", 7);
         this.coBlur = index.createEvent(this, "coBlur", 7);
         this.coAction = index.createEvent(this, "coAction", 7);
-        /** Placeholder text */
-        this.placeholder = 'Placeholder';
+        /** Placeholder text. Empty by default — a literal "Placeholder" leaking into
+         *  product UIs when the consumer forgets the prop is worse than no hint. */
+        this.placeholder = '';
         /** Current value */
         this.value = '';
         /** Disabled state */
@@ -31,6 +33,8 @@ const CoInput = class {
         this.required = false;
         /** Validation status */
         this.status = 'default';
+        /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px) */
+        this.size = 'md';
         this.hasFocus = false;
         this.handleInput = (e) => {
             const target = e.target;
@@ -87,23 +91,24 @@ const CoInput = class {
             case 'success': return 'check-circle';
             case 'warning': return 'warning-circle';
             case 'info': return 'info';
-            default: return 'info';
+            default: return null;
         }
     }
     render() {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
-        return (index.h("div", { key: 'adf9b30a1e30c80aadd40cda78aa58aab550c8eb', class: {
+        return (index.h("div", { key: '3c628ddcc708f39637038f25118918fbe0f9cff2', class: {
                 'co-input': true,
                 [`co-input--${this.layout}`]: true,
+                [`co-input--${this.size}`]: true,
                 'co-input--disabled': this.disabled,
                 'co-input--focused': this.hasFocus,
                 'co-input--filled': this.hasValue,
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '04141c6c3bb90aed8ef85eff89223d881867f297', class: "co-input__labels" }, this.label && index.h("label", { key: '36cb0df1fd33f24bb71cbb4327907e51678eaab6', class: "co-input__label", part: "label" }, this.label), this.secondaryLabel && (index.h("span", { key: 'c9ad30c7e1808025c20da30d8e179fdc714c3652', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '2f0c9f1af58883225fa72148cef2f1998c0e71bc', class: "co-input__field-row" }, index.h("div", { key: '1cc1787860143d83c4f77f026ad50df7a257e975', class: "co-input__field", part: "field" }, this.iconLeft && (index.h("co-icon", { key: 'b6aa8992ea42362499c3f414e3762ec93405e37a', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), index.h("slot", { key: '45b2cac795f8e7bc4299cfc6a9349b4ea69f271e', name: "chips" }), index.h("div", { key: '8f429d3dcaaea5dc722bfdbe2c2d319946e42b8c', class: "co-input__input-wrapper" }, index.h("input", { key: '2e1c80fd93686f6ce541847483e0b3d75098c0b1', ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (index.h("button", { key: 'd17166364b0ee3509d72679200aae3ade43e9c62', class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '89513c64c7d590c77159f6a983ed4973289be0d2', class: "co-input__labels" }, this.label && index.h("label", { key: '4a0874ec1828c5a19ef87c23878d2317f3d441df', class: "co-input__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'e7a72a5c861923f43968ad95a6c47b46ae13b9ed', required: this.required })), this.secondaryLabel && (index.h("span", { key: '87911501ccb15a2bd4ef4e58e3537bc968e0f0d2', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '0c1a530d1a687798f0803564be36409b23d5a1fd', class: "co-input__field-row" }, index.h("div", { key: 'bb731973f9406d649c3aff55071bd50fd7ebc991', class: "co-input__field", part: "field" }, this.iconLeft && (index.h("co-icon", { key: '4d244ba725651414653c531e3017f8d3a6ccbfd4', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), index.h("slot", { key: '9c2c242a1887a05c4fcc88dbbb99c86ce0b5113f', name: "chips" }), index.h("div", { key: '8568e8abdc2c37b565b2446126638b43a649d721', class: "co-input__input-wrapper" }, index.h("input", { key: '6f311f448b23a936e1da7fe547e7510e236bcf99', ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (index.h("button", { key: '5826d5d68a03b1cec942a004578f969920a13609', class: {
                 'co-input__clear': true,
                 'co-input__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, index.h("co-icon", { key: '1bab39f254dc2dfb7457236ba6e56240fa223c0d', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (index.h("co-icon", { key: '8163a8a31350015fe18de0443984f96a12f0bfa0', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (index.h("co-icon", { key: 'd5444649632af9239e38d3585aa97a24df3ff7ad', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), index.h("slot", { key: 'a70abffe4a46e4400fe6bce5ec2f5bbadff07ee3', name: "suffix" }), index.h("slot", { key: '4c86167514a4cccfe6cbd002ecae42e718ce51bb' }), index.h("slot", { key: 'de44689baa43be6835c133465b74555fc8b2ec1a', name: "action" })), this.hasAction && (index.h("button", { key: '79fa0c13fdefb809023b2372d2bbd33b8bfbb8fe', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (index.h("co-icon", { key: 'd4382b393ed71a1f1964a04bface66b8c6df1918', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (index.h("span", { key: '117d048c07cf0c043638aac4f0e3f29140013ec4', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (index.h("div", { key: '1ec10258065fb8fbab2dbe823899a77c6f5ac62d', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, index.h("co-icon", { key: '82ff0fb23e25ab4caef0a34511f8f7281ae4e342', name: this.helperIcon, size: 14, class: "co-input__helper-icon" }), index.h("span", { key: 'de48de86e89c5cebd5c54a7d89716b17987bba91', class: "co-input__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, index.h("co-icon", { key: 'b987c7ceeb51c7a2bde1a53b6e80484b1fe2ff90', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (index.h("co-icon", { key: '07e2d8f0ffca417ed82d95b97cf42efaf24212e9', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (index.h("co-icon", { key: '7f1ce796c3d8fda6e3d5b5f63ffa819c6925daef', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), index.h("slot", { key: '7294036e68f6f2ff1efe57c957765415691b7d21', name: "suffix" }), index.h("slot", { key: 'ca865d10565b3b1f140b5d23c52781ea71f5f0ae' }), index.h("slot", { key: '2422fd84d5ce0f4d1c4eacedeaa72ea259cb1580', name: "action" })), this.hasAction && (index.h("button", { key: '5dd232fc1a449cf73ddda1e06d28c9d8a9dc4a0d', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (index.h("co-icon", { key: '7cada4fa70ea0ec79754c5a46a59367ea8c66fad', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (index.h("span", { key: 'f27e5c1ea7ff1f83714ae5f542558518dc00a937', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (index.h("div", { key: 'd806c9e918ac1edac3eb703926c0c405019190e1', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (index.h("co-icon", { key: '80f6b84d4354ccf965596cb9546a531cbbc932e0', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), index.h("span", { key: '8f01456c3cfec988ffc6f7c6a03c1ecc43ee4c2c', class: "co-input__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-json-field.cjs.entry.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var index = require('./index-BumlM92r.js');
+var requiredMark = require('./requiredMark-CqMGt1H1.js');
+
+const coJsonFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-json-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-json-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-json-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-json-field__field{display:flex;background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, 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);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;box-sizing:border-box;overflow:hidden}.co-json-field__native{width:100%;resize:vertical;border:none;outline:none;background:transparent;font-family:var(--co-font-family-mono, monospace);font-size:var(--co-font-size-13, 13px);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box;tab-size:2}.co-json-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-json-field--s .co-json-field__native{padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12, 12px)}.co-json-field--sm .co-json-field__native{padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-json-field--lg .co-json-field__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-14)}.co-json-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-json-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-json-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-json-field--disabled{opacity:0.6;pointer-events:none}.co-json-field--disabled .co-json-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-json-field--invalid .co-json-field__field,.co-json-field--error .co-json-field__field{border-color:var(--co-semantic-status-error)}.co-json-field--invalid.co-json-field--focused .co-json-field__field,.co-json-field--error.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-json-field__helper--error .co-json-field__helper-icon,.co-json-field__helper--error .co-json-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-json-field{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-json-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-json-field__label{white-space:normal}:host([layout='horizontal']) .co-json-field>:not(.co-json-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-json-field__field{background:var(--co-semantic-surface-secondary)}}`;
+
+const CoJsonField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coInput = index.createEvent(this, "coInput", 7);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        this.coValidity = index.createEvent(this, "coValidity", 7);
+        this.coFocus = index.createEvent(this, "coFocus", 7);
+        this.coBlur = index.createEvent(this, "coBlur", 7);
+        /** Committed JSON text. */
+        this.value = '';
+        this.placeholder = '{ }';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.rows = 8;
+        /** External validation status (e.g. from a form controller). */
+        this.status = 'default';
+        /** Message shown when the typed JSON cannot be parsed. */
+        this.invalidMessage = 'Invalid JSON';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Field size (mirrors co-input paddings; mono font scales 12/13/13/14).
+         *  Vertical extent still comes from `rows`. */
+        this.size = 'md';
+        /** Raw text in the textarea. */
+        this.draft = '';
+        /** Internal JSON parse-failure flag. */
+        this.internalInvalid = false;
+        this.hasFocus = false;
+        this.handleInput = (e) => {
+            this.draft = e.target.value;
+            this.validate(true);
+            this.coInput.emit(this.draft);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.value = this.draft;
+            this.coChange.emit(this.draft);
+            this.coBlur.emit();
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        this.draft = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        this.validate(false);
+    }
+    onValueChange() {
+        var _a;
+        // Don't clobber what the user is actively typing.
+        if (this.hasFocus)
+            return;
+        this.draft = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        this.validate(false);
+    }
+    get isInvalid() {
+        return this.status === 'error' || this.internalInvalid;
+    }
+    /** Re-evaluate JSON validity; emit coValidity when it changes. */
+    validate(emit) {
+        const text = this.draft.trim();
+        const valid = text === '' ? true : this.tryParse(text);
+        if (!valid !== this.internalInvalid) {
+            this.internalInvalid = !valid;
+            if (emit)
+                this.coValidity.emit({ valid, message: valid ? undefined : this.invalidMessage });
+        }
+        return valid;
+    }
+    tryParse(text) {
+        try {
+            JSON.parse(text);
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    render() {
+        const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
+        const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
+        return (index.h("div", { key: '0f1319b6cd930e576dbba45dfb3bbb9050c8a4c0', class: {
+                'co-json-field': true,
+                'co-json-field--disabled': this.disabled,
+                'co-json-field--focused': this.hasFocus,
+                'co-json-field--invalid': this.isInvalid,
+                [`co-json-field--${this.size}`]: true,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, this.label && (index.h("div", { key: '50cfffd0dedb3b091cebadf7b908594d855c1e92', class: "co-json-field__labels" }, index.h("label", { key: '77410a04bc4ca4f61dd8be107acb159a918f811c', class: "co-json-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '21f0c872f95b39e38e16388a0935aebe333640ad', required: this.required })))), index.h("div", { key: 'f7da7b3e56bc9bb1bfe1759f4e6ea260bd45b19e', class: "co-json-field__field", part: "field" }, index.h("textarea", { key: '8f5413bb82906a15d83130ca963b771e6539d7f6', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && index.h("input", { key: '5c844c980cafec58d64ff473022ace4b11f10b26', type: "hidden", name: this.name, value: this.draft }), helper && (index.h("div", { key: 'af8b770be33f336be652e0b6b567a602a59d8e63', class: {
+                'co-json-field__helper': true,
+                'co-json-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '8ed6b6f2444fbf408818b1ac9911f4513c963dee', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), index.h("span", { key: '9282196dfd8f2662c073d7589dd7fd93447101f8', class: "co-json-field__helper-text" }, helper)))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+CoJsonField.style = coJsonFieldCss();
+
+exports.co_json_field = CoJsonField;