@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-file-field/co-file-field.utils.js

@@ -0,0 +1,47 @@
+/** Format bytes like the Figma spec: "59.25 KB" (base 1024, up to 2 decimals). */
+export function formatBytes(bytes) {
+    if (bytes == null || isNaN(bytes))
+        return '';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const fmt = (n) => n.toFixed(2).replace(/\.?0+$/, '');
+    if (bytes < 1024 * 1024)
+        return `${fmt(bytes / 1024)} KB`;
+    return `${fmt(bytes / (1024 * 1024))} MB`;
+}
+/**
+ * Left-truncate long file names ("....nshot from 2024-07-12.png"), keeping the
+ * tail where the date/extension lives — same convention as the V1 selector.
+ * The CSS rtl+ellipsis trick is avoided on purpose: bidi reorders leading
+ * digits/punctuation, and file names start with digits all the time.
+ */
+export function truncateLeft(name, max = 35) {
+    if (!name || name.length <= max)
+        return name;
+    return `...${name.slice(-max)}`;
+}
+const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'bmp']);
+function hasImageExtension(item) {
+    const base = (item.name || item.url || '').split('?')[0];
+    const i = base.lastIndexOf('.');
+    return i >= 0 && IMAGE_EXTS.has(base.slice(i + 1).toLowerCase());
+}
+/** An item renders in the previews grid when it's a stored image we can show. */
+export function isImage(item) {
+    if (item.status !== 'done')
+        return false;
+    const src = item.thumbnail || item.url;
+    if (!src)
+        return false;
+    if (item.thumbnail)
+        return true;
+    return hasImageExtension(item);
+}
+/**
+ * Best lightbox source: the original `url` only when it is itself an image —
+ * a PDF that entered the grid via its server-generated thumbnail must open
+ * the thumbnail (an `<img>` can't render the PDF).
+ */
+export function previewSrc(item) {
+    return hasImageExtension(item) ? item.url || item.thumbnail : item.thumbnail || item.url;
+}

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: '7c37f65d89a2798c881edec0ea153c92cbf83f50', class: {
+        return (h("div", { key: 'fb1894ff2656d74d2c892a6c857d98269604b04e', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: 'f8ccbc185bb0ba35eba8b3b6ef8b18ee71b9929a', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '589978fd28f922d3f62e101c8090cea005839ece', class: "co-helper-text__message" }, h("slot", { key: 'b59d0b6cf58c97a6ab4950b1cc7de1c1c9fe4f03' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: 'd56c274e9f44ae16b13a02ec262d0d14b109fc5b', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '5e776db146922fc1271bff50b1b45245baf088b3', class: "co-helper-text__message" }, h("slot", { key: 'c3f93747e7b903296d24f60f87c9e3c29c2cb1cd' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,33 +1,5 @@
 import { h, Host } from "@stencil/core";
-/** 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';
-/**
- * File naming convention in @phosphor-icons/core:
- *   regular → "plus.svg"
- *   bold/thin/light/fill/duotone → "plus-bold.svg", "plus-fill.svg", etc.
- */
-function toFilename(kebab, weight) {
-    return weight === 'regular' ? `${kebab}.svg` : `${kebab}-${weight}.svg`;
-}
-async 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) {
-        return '';
-    }
-}
+import { loadSvg } from "./iconLoader";
 /**
  * co-icon — Phosphor icon renderer.
  *
@@ -59,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '05b934c6c75b66802014bcb3365110bbd49e8267', "aria-hidden": "true", style: {
+        return (h(Host, { key: '65fc20ae25aff18456c778d69454259755477cc8', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '15ab00cbd1a8affffb54c257c1c4556a517a556b', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '867d361c4cd66611a38ccca0910ac93e9b41ed18', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -108,9 +80,10 @@ export class CoIcon {
                     "resolved": "\"bold\" | \"duotone\" | \"fill\" | \"light\" | \"regular\" | \"thin\"",
                     "references": {
                         "IconWeight": {
-                            "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-icon/co-icon.tsx",
-                            "id": "src/components/co-icon/co-icon.tsx::IconWeight"
+                            "location": "import",
+                            "path": "./iconLoader",
+                            "id": "src/components/co-icon/iconLoader.ts::IconWeight",
+                            "referenceLocation": "IconWeight"
                         }
                     }
                 },

package/dist/collection/components/co-icon/iconLoader.js

@@ -0,0 +1,39 @@
+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;
+}
+/**
+ * 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`;
+}
+/**
+ * Devuelve (y cachea) la PROMESA del SVG para `(weight, name)`. Las llamadas
+ * concurrentes para el mismo icono comparten un único fetch.
+ */
+export function loadSvg(name, weight) {
+    const key = `${weight}/${name}`;
+    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;
+}

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

@@ -7,31 +7,46 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: none;
+  border: 1px solid transparent;
   outline: none;
   padding: 0;
   flex-shrink: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease, background 0.15s ease;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  backdrop-filter: var(--co-icon-button-backdrop-filter, none);
-  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, none);
+  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
+  backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
 }
 
 /* ─── VARIANTS ─────────────────────────────────────────────── */
 /* Figma "Secundario" = dark / filled */
 .co-icon-button--filled {
-  background: var(--co-semantic-surface-primary);
+  background: color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);
   color: var(--co-semantic-on-primary);
+  border-color: color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent);
 }
 
 /* Figma "Primario" = light / outlined */
 .co-icon-button--outlined {
-  background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary));
+  background: color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);
   color: var(--co-icon-button-color, var(--co-semantic-on-secondary));
   border: 1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle));
 }
 
+/* Ghost = fully transparent, no border, no frost until hover */
+.co-icon-button--ghost {
+  background: transparent;
+  color: var(--co-icon-button-color, var(--co-semantic-text-default));
+  border: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.co-icon-button--ghost:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 60%, 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));
+}
+
 /* ─── SIZES · ROUNDED ───────────────────────────────────────── */
 .co-icon-button--rounded.co-icon-button--xl {
   width: 80px; height: 80px;
@@ -100,3 +115,9 @@
   pointer-events: none;
 }
 .co-icon-button:hover:not(:disabled) { opacity: 0.88; }
+
+/* ─── FALLBACK: no backdrop-filter → solid surfaces ──────────── */
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-icon-button--filled { background: var(--co-semantic-surface-primary); }
+  .co-icon-button--outlined { background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary)); }
+}

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

@@ -21,12 +21,12 @@ export class CoIconButton {
         this.iconWeight = 'regular';
     }
     render() {
-        var _a;
+        var _a, _b;
         const iconSizeMap = {
-            xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 12,
+            xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 16,
         };
-        const iconSize = (_a = iconSizeMap[this.size]) !== null && _a !== void 0 ? _a : 24;
-        return (h("button", { key: '4a72c9edd929fee74c568a3e899ebf06df546736', class: {
+        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24;
+        return (h("button", { key: '3e53ed7dbb6d68bfecd22f29b16bb792bcc9c565', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
@@ -54,8 +54,8 @@ export class CoIconButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'filled' | 'outlined'",
-                    "resolved": "\"filled\" | \"outlined\"",
+                    "original": "'filled' | 'outlined' | 'ghost'",
+                    "resolved": "\"filled\" | \"ghost\" | \"outlined\"",
                     "references": {}
                 },
                 "required": false,
@@ -86,7 +86,7 @@ export class CoIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "shape",
                 "defaultValue": "'rounded'"
             },
@@ -188,6 +188,25 @@ export class CoIconButton {
                 "reflect": false,
                 "attribute": "icon-weight",
                 "defaultValue": "'regular'"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the size-derived glyph px (e.g. 24). Falls back to the size default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
             }
         };
     }

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

@@ -18,20 +18,29 @@
   gap: var(--co-spacing-sm2);
 }
 
-/* Horizontal layout: label beside input */
-.co-input--horizontal {
-  flex-direction: row;
-  align-items: flex-start;
-}
-
-.co-input--horizontal .co-input__labels {
-  flex-shrink: 0;
+/* ── 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-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;
 }
 
-.co-input--horizontal .co-input__field-row {
-  flex: 1;
+:host([layout='horizontal']) .co-input__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-input > :not(.co-input__labels) {
+  grid-column: 2;
   min-width: 0;
 }
 
@@ -76,7 +85,9 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  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;
@@ -87,6 +98,27 @@
   min-width: 0;
 }
 
+/* ---- Size variants ---- */
+.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);
+}
+
+/* md is the default (40px) — no override needed */
+
+.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);
+}
+
 /* When action button is present, field gets left-only radius and no right border */
 .co-input--has-action .co-input__field {
   border-radius: var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);
@@ -349,3 +381,23 @@
 .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); }
+}

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
 /**
  * Text input field with label, helper text, icons, and clear functionality.
  * Supports vertical and horizontal label layouts, action button, and chips.
@@ -10,8 +11,9 @@ import { h } from "@stencil/core";
  */
 export class CoInput {
     constructor() {
-        /** 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 */
@@ -28,6 +30,8 @@ export class CoInput {
         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;
@@ -84,23 +88,24 @@ export class CoInput {
             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 (h("div", { key: 'adf9b30a1e30c80aadd40cda78aa58aab550c8eb', class: {
+        return (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) && (h("div", { key: '04141c6c3bb90aed8ef85eff89223d881867f297', class: "co-input__labels" }, this.label && h("label", { key: '36cb0df1fd33f24bb71cbb4327907e51678eaab6', class: "co-input__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'c9ad30c7e1808025c20da30d8e179fdc714c3652', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { key: '2f0c9f1af58883225fa72148cef2f1998c0e71bc', class: "co-input__field-row" }, h("div", { key: '1cc1787860143d83c4f77f026ad50df7a257e975', class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { key: 'b6aa8992ea42362499c3f414e3762ec93405e37a', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { key: '45b2cac795f8e7bc4299cfc6a9349b4ea69f271e', name: "chips" }), h("div", { key: '8f429d3dcaaea5dc722bfdbe2c2d319946e42b8c', class: "co-input__input-wrapper" }, 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 && (h("button", { key: 'd17166364b0ee3509d72679200aae3ade43e9c62', class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '89513c64c7d590c77159f6a983ed4973289be0d2', class: "co-input__labels" }, this.label && h("label", { key: '4a0874ec1828c5a19ef87c23878d2317f3d441df', class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { key: 'e7a72a5c861923f43968ad95a6c47b46ae13b9ed', required: this.required })), this.secondaryLabel && (h("span", { key: '87911501ccb15a2bd4ef4e58e3537bc968e0f0d2', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { key: '0c1a530d1a687798f0803564be36409b23d5a1fd', class: "co-input__field-row" }, h("div", { key: 'bb731973f9406d649c3aff55071bd50fd7ebc991', class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { key: '4d244ba725651414653c531e3017f8d3a6ccbfd4', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { key: '9c2c242a1887a05c4fcc88dbbb99c86ce0b5113f', name: "chips" }), h("div", { key: '8568e8abdc2c37b565b2446126638b43a649d721', class: "co-input__input-wrapper" }, 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 && (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" }, h("co-icon", { key: '1bab39f254dc2dfb7457236ba6e56240fa223c0d', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { key: '8163a8a31350015fe18de0443984f96a12f0bfa0', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { key: 'd5444649632af9239e38d3585aa97a24df3ff7ad', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { key: 'a70abffe4a46e4400fe6bce5ec2f5bbadff07ee3', name: "suffix" }), h("slot", { key: '4c86167514a4cccfe6cbd002ecae42e718ce51bb' }), h("slot", { key: 'de44689baa43be6835c133465b74555fc8b2ec1a', name: "action" })), this.hasAction && (h("button", { key: '79fa0c13fdefb809023b2372d2bbd33b8bfbb8fe', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { key: 'd4382b393ed71a1f1964a04bface66b8c6df1918', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { key: '117d048c07cf0c043638aac4f0e3f29140013ec4', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { key: '1ec10258065fb8fbab2dbe823899a77c6f5ac62d', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '82ff0fb23e25ab4caef0a34511f8f7281ae4e342', name: this.helperIcon, size: 14, class: "co-input__helper-icon" }), h("span", { key: 'de48de86e89c5cebd5c54a7d89716b17987bba91', class: "co-input__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { key: 'b987c7ceeb51c7a2bde1a53b6e80484b1fe2ff90', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { key: '07e2d8f0ffca417ed82d95b97cf42efaf24212e9', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { key: '7f1ce796c3d8fda6e3d5b5f63ffa819c6925daef', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { key: '7294036e68f6f2ff1efe57c957765415691b7d21', name: "suffix" }), h("slot", { key: 'ca865d10565b3b1f140b5d23c52781ea71f5f0ae' }), h("slot", { key: '2422fd84d5ce0f4d1c4eacedeaa72ea259cb1580', name: "action" })), this.hasAction && (h("button", { key: '5dd232fc1a449cf73ddda1e06d28c9d8a9dc4a0d', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { key: '7cada4fa70ea0ec79754c5a46a59367ea8c66fad', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { key: 'f27e5c1ea7ff1f83714ae5f542558518dc00a937', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { key: 'd806c9e918ac1edac3eb703926c0c405019190e1', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { key: '80f6b84d4354ccf965596cb9546a531cbbc932e0', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { key: '8f01456c3cfec988ffc6f7c6a03c1ecc43ee4c2c', class: "co-input__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-input"; }
     static get encapsulation() { return "shadow"; }
@@ -166,13 +171,13 @@ export class CoInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Placeholder text"
+                    "text": "Placeholder text. Empty by default \u2014 a literal \"Placeholder\" leaking into\nproduct UIs when the consumer forgets the prop is worse than no hint."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "'Placeholder'"
+                "defaultValue": "''"
             },
             "value": {
                 "type": "string",
@@ -327,7 +332,7 @@ export class CoInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "layout",
                 "defaultValue": "'vertical'"
             },
@@ -429,6 +434,26 @@ export class CoInput {
                 "attribute": "status",
                 "defaultValue": "'default'"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant: s (28px), sm (32px), md (40px, default), lg (48px)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "actionLabel": {
                 "type": "string",
                 "mutable": false,