@prolibu-suite/cobalt-core 0.1.2 → 0.2.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: '730e2f2657f5656ea6992bff86be3903615c51d1', 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: '8612481e2e111104047506dc8ca93980723ed6b2', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '9842f85b0f184f4d5e05c989535add23d4c423cc', class: "co-helper-text__message" }, h("slot", { key: '940cf28c1c0f5033c16970ac469029d1ebb1e5e4' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,6 +2,9 @@ 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';
+function getBasePath() {
+    return globalThis.__cobaltIconBasePath || CDN_BASE;
+}
 /**
  * File naming convention in @phosphor-icons/core:
  *   regular → "plus.svg"
@@ -15,7 +18,7 @@ async function loadSvg(name, weight) {
     if (iconCache.has(key))
         return iconCache.get(key);
     const filename = toFilename(name, weight);
-    const url = `${CDN_BASE}/${weight}/${filename}`;
+    const url = `${getBasePath()}/${weight}/${filename}`;
     try {
         const res = await fetch(url);
         if (!res.ok)
@@ -59,12 +62,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: '0fad4d5acc013ca70b12384477cb5413615c23d2', "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: '7e5199c496bb07aade0400b61415260f5fd2ee2a', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,6 +32,16 @@
   border: 1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle));
 }
 
+/* Ghost = fully transparent, no border */
+.co-icon-button--ghost {
+  background: transparent;
+  color: var(--co-icon-button-color, var(--co-semantic-text-default));
+  border: none;
+}
+.co-icon-button--ghost:hover:not(:disabled) {
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04));
+}
+
 /* ─── SIZES · ROUNDED ───────────────────────────────────────── */
 .co-icon-button--rounded.co-icon-button--xl {
   width: 80px; height: 80px;

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

@@ -23,10 +23,10 @@ export class CoIconButton {
     render() {
         var _a;
         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: {
+        return (h("button", { key: 'd21f938003cb69f4747b94566a2054e4e2af4a04', 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,

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;
 }
 
@@ -87,6 +96,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 +379,19 @@
 .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)');
+}

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: 'ea8acfc26e68ae3fb1af4f7de1bcbd2acd4e7ac7', 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: '95a64f4c0139c5d5dac014f5a23f9a04b262329f', class: "co-input__labels" }, this.label && h("label", { key: 'dca544199d539ba2ebc7f554edc92211fe6b5c31', class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { key: 'd3a156e415e060f506e48acc36dc243118afd7ca', required: this.required })), this.secondaryLabel && (h("span", { key: '8f15c42b9112f8fc35f60f43bb57552847354a71', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { key: '1ede7a8c1e233dbbf418009585f70c8656c037cb', class: "co-input__field-row" }, h("div", { key: '8c02baab4dd1515e95ad5a4dfff5f48f55a7d63c', class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { key: '6f1bc645fc200a045e032c7d35692db442b88646', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { key: 'bd5a9c82550358db4b150d4051552d37a9301af7', name: "chips" }), h("div", { key: '9ff10025bcae287a709719fd3dfae516404775b6', class: "co-input__input-wrapper" }, h("input", { key: '9c739fd0c317e5a9d90a1333323f6d2a866b1814', 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: '484e731b13fca8a9c5ce61fe72ddf6e48bb534a1', 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: '538191d5ef59bd4774b770a8607fd5d1974d1d94', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { key: '35a708d4fbb3e6a555870624639e508ec3fbcc55', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { key: 'a752b406a2bca43f7f97f6105182e8284e627d05', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { key: '064462000405431972bedc978973b720f72942fe', name: "suffix" }), h("slot", { key: '990b12d2673dff2d95cd90d0965a4c4bd651814e' }), h("slot", { key: '123cdc8ca7fe31edc41aa3d5c22ff04d1715267b', name: "action" })), this.hasAction && (h("button", { key: '37884d459ba4b9381f76423a30b94875522155ae', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { key: 'ff2d4309ba5fd1115e7055eeea0cd3ba5ccb7ca4', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { key: '7b7d08e859dbadaf44f27fad2c447034476ce47d', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { key: '5027ce06cacf8a9bef2b1ec59afce48b4a641494', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { key: '17a437667dfc378c997349c06cb25f0df0f34b58', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { key: 'c3361adf7357c3de5c52f034e248fb9050f73b20', 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,

package/dist/collection/components/co-json-field/co-json-field.css

@@ -0,0 +1,169 @@
+/* ============================================================
+   co-json-field — multiline JSON editor; mirrors co-input styling
+   with a monospace textarea.
+   ============================================================ */
+
+: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);
+}
+
+/* ---- Labels ---- */
+.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)');
+}
+
+/* ---- Field ---- */
+.co-json-field__field {
+  display: flex;
+  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;
+  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);
+}
+
+/* ---- Helper text ---- */
+.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);
+}
+
+/* ============================================================
+   States
+   ============================================================ */
+.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;
+}
+
+/* ---- Invalid / error (internal JSON parse OR external status) ---- */
+.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);
+}
+
+/* ── 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-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;
+}