@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
+var requiredMark = require('./requiredMark-DA6y-4rp.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: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--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)')}`;
 
 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: '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) && (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: '95a64f4c0139c5d5dac014f5a23f9a04b262329f', class: "co-input__labels" }, this.label && index.h("label", { key: 'dca544199d539ba2ebc7f554edc92211fe6b5c31', class: "co-input__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'd3a156e415e060f506e48acc36dc243118afd7ca', required: this.required })), this.secondaryLabel && (index.h("span", { key: '8f15c42b9112f8fc35f60f43bb57552847354a71', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '1ede7a8c1e233dbbf418009585f70c8656c037cb', class: "co-input__field-row" }, index.h("div", { key: '8c02baab4dd1515e95ad5a4dfff5f48f55a7d63c', class: "co-input__field", part: "field" }, this.iconLeft && (index.h("co-icon", { key: '6f1bc645fc200a045e032c7d35692db442b88646', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), index.h("slot", { key: 'bd5a9c82550358db4b150d4051552d37a9301af7', name: "chips" }), index.h("div", { key: '9ff10025bcae287a709719fd3dfae516404775b6', class: "co-input__input-wrapper" }, index.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 && (index.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" }, 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: '538191d5ef59bd4774b770a8607fd5d1974d1d94', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (index.h("co-icon", { key: '35a708d4fbb3e6a555870624639e508ec3fbcc55', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (index.h("co-icon", { key: 'a752b406a2bca43f7f97f6105182e8284e627d05', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), index.h("slot", { key: '064462000405431972bedc978973b720f72942fe', name: "suffix" }), index.h("slot", { key: '990b12d2673dff2d95cd90d0965a4c4bd651814e' }), index.h("slot", { key: '123cdc8ca7fe31edc41aa3d5c22ff04d1715267b', name: "action" })), this.hasAction && (index.h("button", { key: '37884d459ba4b9381f76423a30b94875522155ae', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (index.h("co-icon", { key: 'ff2d4309ba5fd1115e7055eeea0cd3ba5ccb7ca4', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (index.h("span", { key: '7b7d08e859dbadaf44f27fad2c447034476ce47d', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (index.h("div", { key: '5027ce06cacf8a9bef2b1ec59afce48b4a641494', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (index.h("co-icon", { key: '17a437667dfc378c997349c06cb25f0df0f34b58', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), index.h("span", { key: 'c3361adf7357c3de5c52f034e248fb9050f73b20', 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,109 @@
+'use strict';
+
+var index = require('./index-DoFnrUVH.js');
+var requiredMark = require('./requiredMark-DA6y-4rp.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: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)}.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}`;
+
+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';
+        /** 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: '90ec8c329801fb0b4ace08669d6b502037dfa16b', class: {
+                'co-json-field': true,
+                'co-json-field--disabled': this.disabled,
+                'co-json-field--focused': this.hasFocus,
+                'co-json-field--invalid': this.isInvalid,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, this.label && (index.h("div", { key: 'a701737ea2c5b108dec90091566f2d3a397ec3b7', class: "co-json-field__labels" }, index.h("label", { key: 'd1b7d6b5f683fe9bf8e644ba4deb3bfba0d93040', class: "co-json-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '249e52050171e00b27a7fd9751a3595440371cc0', required: this.required })))), index.h("div", { key: '4c6453d7e4670124e4a48cb449b3bae639ee3b1f', class: "co-json-field__field", part: "field" }, index.h("textarea", { key: 'bcccb3efa34a50aa1a7a6f0c3db2e5431a0dafde', 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: '5cf1f53f4b77532d6473fcfa964985509c57e782', type: "hidden", name: this.name, value: this.draft }), helper && (index.h("div", { key: 'b906abdf2335b84df2d3976cde5eb7018ed549d3', class: {
+                'co-json-field__helper': true,
+                'co-json-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '0111116f0dc1a4608ac18ed5db04a6bd1342f6a6', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), index.h("span", { key: '54b8b02fcf03b53105e9254c69e3ea5228e882c2', 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;

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

@@ -0,0 +1,344 @@
+'use strict';
+
+var index = require('./index-DoFnrUVH.js');
+var dateI18n = require('./dateI18n-BdiNAl0_.js');
+
+/**
+ * Built-in UI string dictionary for co-lightbox (aria labels + tooltips).
+ * Same strategy as dateI18n/fileI18n: ships es/en/pt keyed by the `locale`
+ * prop. The `counter` template uses `{i}` / `{n}` placeholders.
+ */
+const DICT = {
+    es: {
+        close: 'Cerrar visor',
+        prevImage: 'Imagen anterior',
+        nextImage: 'Imagen siguiente',
+        zoomIn: 'Acercar',
+        zoomOut: 'Alejar',
+        zoomReset: 'Restablecer zoom',
+        openOriginal: 'Abrir original',
+        counter: '{i} de {n}',
+    },
+    en: {
+        close: 'Close viewer',
+        prevImage: 'Previous image',
+        nextImage: 'Next image',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        zoomReset: 'Reset zoom',
+        openOriginal: 'Open original',
+        counter: '{i} of {n}',
+    },
+    pt: {
+        close: 'Fechar visualizador',
+        prevImage: 'Imagem anterior',
+        nextImage: 'Próxima imagem',
+        zoomIn: 'Aproximar',
+        zoomOut: 'Afastar',
+        zoomReset: 'Redefinir zoom',
+        openOriginal: 'Abrir original',
+        counter: '{i} de {n}',
+    },
+};
+/** Resolve the built-in UI strings for a locale. */
+function getLightboxStrings(locale) {
+    return DICT[dateI18n.langFromLocale(locale)];
+}
+
+const coLightboxCss = () => `:host{display:contents;font-family:var(--co-font-family-primary)}.co-lightbox{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:var(--co-color-opacity-negro-80);opacity:0;pointer-events:none;transition:opacity 0.2s ease}.co-lightbox--open{opacity:1;pointer-events:auto}.co-lightbox__toolbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-lg);background:linear-gradient(var(--co-color-opacity-negro-50), transparent)}.co-lightbox__caption{flex:1;min-width:0;color:var(--co-color-base-blanco);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-lightbox__zoom{display:flex;align-items:center;gap:var(--co-spacing-xxs);padding:0 var(--co-spacing-xs);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8)}.co-lightbox__btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--co-spacing-xs);border:none;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-color-base-blanco);font-family:inherit;font-size:var(--co-font-size-13);cursor:pointer;transition:background 0.15s ease}.co-lightbox__btn:hover{background:var(--co-color-opacity-blanco-16)}.co-lightbox__zoom-value{min-width:48px;font-variant-numeric:tabular-nums}.co-lightbox__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.co-lightbox__img{max-width:calc(100vw - var(--co-spacing-5xl) * 2);max-height:calc(100vh - var(--co-spacing-5xl) * 2);border-radius:var(--co-border-radius-xs);user-select:none;transition:transform 0.18s ease}.co-lightbox__img--zoomed{cursor:grab}.co-lightbox__img--dragging{cursor:grabbing;transition:none}.co-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);cursor:pointer;transition:background 0.15s ease}.co-lightbox__nav:hover{background:var(--co-color-opacity-blanco-25)}.co-lightbox__nav--prev{left:var(--co-spacing-lg)}.co-lightbox__nav--next{right:var(--co-spacing-lg)}.co-lightbox__counter{position:absolute;bottom:var(--co-spacing-lg);left:50%;transform:translateX(-50%);z-index:2;padding:var(--co-spacing-xs) var(--co-spacing-md);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);font-size:var(--co-font-size-13);font-variant-numeric:tabular-nums}`;
+
+const MIN_SCALE = 1;
+const MAX_SCALE = 8;
+const WHEEL_FACTOR = 1.15;
+const DBLCLICK_SCALE = 2.5;
+const CoLightbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coClose = index.createEvent(this, "coClose", 3);
+        this.coChange = index.createEvent(this, "coChange", 3);
+        /** JSON array of {@link LightboxImage} (controlled by the host). */
+        this.images = '[]';
+        /** Index shown when the viewer opens. */
+        this.startIndex = 0;
+        /** Whether the viewer is visible. */
+        this.open = false;
+        this.index = 0;
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+        this.lastImagesStr = '';
+        this.lastParsed = [];
+        this.dragStart = { x: 0, y: 0, tx: 0, ty: 0 };
+        /** Focus the close button on the render that follows opening. */
+        this.pendingFocus = false;
+        this.handleKey = (e) => {
+            if (!this.open)
+                return;
+            switch (e.key) {
+                case 'Escape':
+                    this.requestClose();
+                    break;
+                case 'ArrowLeft':
+                    this.goTo(-1);
+                    break;
+                case 'ArrowRight':
+                    this.goTo(1);
+                    break;
+                case '+':
+                case '=':
+                    this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0);
+                    break;
+                case '-':
+                    this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0);
+                    break;
+                case '0':
+                    this.resetView();
+                    break;
+                case 'Tab':
+                    this.trapTab(e);
+                    return;
+                default:
+                    return; // unhandled keys pass through untouched
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this.requestClose = () => {
+            this.coClose.emit();
+        };
+        this.handleWheel = (e) => {
+            e.preventDefault();
+            const [px, py] = this.stagePoint(e);
+            const factor = e.deltaY < 0 ? WHEEL_FACTOR : 1 / WHEEL_FACTOR;
+            this.zoomAt(this.scale * factor, px, py);
+        };
+        this.handleDblClick = (e) => {
+            const [px, py] = this.stagePoint(e);
+            this.zoomAt(this.scale > MIN_SCALE ? MIN_SCALE : DBLCLICK_SCALE, px, py);
+        };
+        this.handlePointerDown = (e) => {
+            var _a;
+            if (this.scale <= MIN_SCALE)
+                return;
+            e.preventDefault();
+            this.dragging = true;
+            this.dragStart = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.dragging)
+                return;
+            const tx = this.dragStart.tx + (e.clientX - this.dragStart.x);
+            const ty = this.dragStart.ty + (e.clientY - this.dragStart.y);
+            [this.tx, this.ty] = this.clampPan(tx, ty, this.scale);
+        };
+        this.handlePointerUp = (e) => {
+            var _a;
+            if (!this.dragging)
+                return;
+            this.dragging = false;
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+        };
+        this.openOriginal = () => {
+            const img = this.parsedImages[this.index];
+            if (img === null || img === void 0 ? void 0 : img.src)
+                window.open(img.src, '_blank', 'noopener');
+        };
+        this.stop = (e) => e.stopPropagation();
+    }
+    get parsedImages() {
+        const raw = this.images;
+        if (typeof raw !== 'string' || !raw.trim())
+            return [];
+        if (raw === this.lastImagesStr)
+            return this.lastParsed;
+        let parsed = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parsed = p.filter((i) => i && i.src);
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        this.lastImagesStr = raw;
+        this.lastParsed = parsed;
+        return parsed;
+    }
+    componentWillLoad() {
+        this.index = this.clampIndex(this.startIndex);
+    }
+    connectedCallback() {
+        if (this.open)
+            this.attachKeyListener();
+    }
+    disconnectedCallback() {
+        this.detachKeyListener();
+    }
+    componentDidRender() {
+        var _a;
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            (_a = this.closeBtnEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onOpenChange(open) {
+        var _a, _b, _c;
+        if (open) {
+            this.index = this.clampIndex(this.startIndex);
+            this.resetView();
+            this.preloadNeighbors();
+            this.attachKeyListener();
+            // aria-modal dialog: move focus in on open, restore it on close.
+            this.previouslyFocused = (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined;
+            this.pendingFocus = true;
+        }
+        else {
+            this.detachKeyListener();
+            (_c = (_b = this.previouslyFocused) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+            this.previouslyFocused = undefined;
+        }
+    }
+    onStartIndexChange(v) {
+        if (this.open) {
+            this.index = this.clampIndex(v);
+            this.resetView();
+        }
+    }
+    onImagesChange() {
+        this.index = this.clampIndex(this.index);
+    }
+    // Manual capture-phase listener (not @Listen): while the viewer is open it
+    // must own the keyboard — an ancestor co-drawer/co-modal also listens for
+    // Escape on document, and without capture + stopPropagation one keypress
+    // would close both (losing unsaved drawer state). Capture runs first, and
+    // preventDefault keeps arrows/+/- from scrolling the page behind the scrim.
+    attachKeyListener() {
+        window.addEventListener('keydown', this.handleKey, { capture: true });
+    }
+    detachKeyListener() {
+        window.removeEventListener('keydown', this.handleKey, { capture: true });
+    }
+    /** Minimal focus trap: Tab cycles through the viewer's own buttons. */
+    trapTab(e) {
+        var _a, _b, _c;
+        const focusables = Array.from((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button')) !== null && _b !== void 0 ? _b : []);
+        if (focusables.length === 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const active = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement;
+        const i = focusables.indexOf(active);
+        const delta = e.shiftKey ? -1 : 1;
+        const next = focusables[(i + delta + focusables.length) % focusables.length];
+        next.focus();
+    }
+    clampIndex(i) {
+        const n = this.parsedImages.length;
+        if (n === 0)
+            return 0;
+        return Math.min(Math.max(0, i), n - 1);
+    }
+    resetView() {
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+    }
+    goTo(delta) {
+        const n = this.parsedImages.length;
+        if (n < 2)
+            return;
+        this.index = (this.index + delta + n) % n;
+        this.resetView();
+        this.coChange.emit(this.index);
+        this.preloadNeighbors();
+    }
+    preloadNeighbors() {
+        const imgs = this.parsedImages;
+        if (imgs.length < 2)
+            return;
+        for (const d of [1, -1]) {
+            const neighbor = imgs[(this.index + d + imgs.length) % imgs.length];
+            if (neighbor === null || neighbor === void 0 ? void 0 : neighbor.src)
+                new Image().src = neighbor.src;
+        }
+    }
+    // ── Zoom / pan ────────────────────────────────────────────────
+    /** Pan is clamped so the scaled image can't be dragged fully off-stage. */
+    clampPan(tx, ty, scale) {
+        const stage = this.stageEl;
+        const img = this.imgEl;
+        if (!stage || !img)
+            return [tx, ty];
+        const maxTx = Math.max(0, (img.offsetWidth * scale - stage.clientWidth) / 2);
+        const maxTy = Math.max(0, (img.offsetHeight * scale - stage.clientHeight) / 2);
+        return [Math.min(Math.max(tx, -maxTx), maxTx), Math.min(Math.max(ty, -maxTy), maxTy)];
+    }
+    /**
+     * Zoom keeping the stage point (px,py — relative to the stage center) fixed:
+     * t' = p − (p − t)·(s'/s), with transform-origin at the center.
+     */
+    zoomAt(nextScale, px, py) {
+        const s = this.scale;
+        const ns = Math.min(Math.max(nextScale, MIN_SCALE), MAX_SCALE);
+        if (ns === s)
+            return;
+        const ratio = ns / s;
+        let tx = px - (px - this.tx) * ratio;
+        let ty = py - (py - this.ty) * ratio;
+        if (ns === MIN_SCALE) {
+            tx = 0;
+            ty = 0;
+        }
+        else {
+            [tx, ty] = this.clampPan(tx, ty, ns);
+        }
+        this.scale = ns;
+        this.tx = tx;
+        this.ty = ty;
+    }
+    stagePoint(e) {
+        var _a;
+        const rect = (_a = this.stageEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return [0, 0];
+        return [e.clientX - rect.left - rect.width / 2, e.clientY - rect.top - rect.height / 2];
+    }
+    render() {
+        const s = getLightboxStrings(this.locale);
+        const imgs = this.parsedImages;
+        const img = imgs[this.index];
+        const multi = imgs.length > 1;
+        const counter = s.counter
+            .replace('{i}', String(this.index + 1))
+            .replace('{n}', String(imgs.length));
+        return (index.h("div", { key: '7df4d99f46591697c48d3a069239811d997a4390', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (index.h("div", { key: '2bb47942785b8273f7f3699ab74a67e101ac3eb1', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, index.h("span", { key: 'e47844036d53ed71322c8e0cb3b4e926571f1031', class: "co-lightbox__caption", title: img.alt }, img.alt), index.h("div", { key: 'c7cf53faeb4f303e79316587df60b31964daa549', class: "co-lightbox__zoom" }, index.h("button", { key: '77b34981937a114d22670414b75d041fdd3d074e', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, index.h("co-icon", { key: '16ff12d54c8a3d1cd16342adb79c0baa3ada38a4', name: "minus", size: 16 })), index.h("button", { key: '66c850302c30966f4ab7d1b0ed1efc41651ebba8', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), index.h("button", { key: 'd9441914db2193d661c3e5a6f1ba65fa70b6f1cf', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, index.h("co-icon", { key: 'ace38453321e1a8e0df4bb6ffccff15906e7b8e3', name: "plus", size: 16 }))), index.h("button", { key: 'bb81d23f14638c2b1a134573ab2a44a848f58abe', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, index.h("co-icon", { key: '42bf9277561388580d2b0797d7d732815629776f', name: "arrow-square-out", size: 16 })), index.h("button", { key: '500b2af225fd4692fbd472c5b6287a6d3d5f77e9', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, index.h("co-icon", { key: '7141d31ad2a3e09131dd8084b669c7c3fd13b9e2', name: "x", size: 16 })))), img && (index.h("div", { key: '47a092023486d0ac585cf0e35a1d0a374c69fd51', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, index.h("img", { key: '3868a39927e3bfc01201e372c5c30b3dcde73562', class: {
+                'co-lightbox__img': true,
+                'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
+                'co-lightbox__img--dragging': this.dragging,
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (index.h("button", { key: 'b3e3dcab9fd5caeb5a56e621febfde4d0da22147', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(-1);
+            } }, index.h("co-icon", { key: '6dcc8cd799b4acfd1bf048600c5d3e9b97dba746', name: "caret-left", size: 24 }))), img && multi && (index.h("button", { key: 'a47298cf2436b35b95773cf9151e84192056caf5', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(1);
+            } }, index.h("co-icon", { key: '7efe343ba92c77e2f760bd7ea236caf325a50c1e', name: "caret-right", size: 24 }))), img && multi && (index.h("div", { key: '008f102eb44447b7f762c0cd4ba8c19e9fed2ee5', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }],
+        "startIndex": [{
+                "onStartIndexChange": 0
+            }],
+        "images": [{
+                "onImagesChange": 0
+            }]
+    }; }
+};
+CoLightbox.style = coLightboxCss();
+
+exports.co_lightbox = CoLightbox;

package/dist/cjs/co-list-item.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
-const coListItemCss = () => `:host{display:block}.co-list-item{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-md) var(--co-spacing-lg);font-family:var(--co-font-family-primary);cursor:pointer;border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;box-sizing:border-box;min-height:40px}.co-list-item--dense{gap:var(--co-spacing-sm);padding:6px var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);min-height:32px}.co-list-item--dense .co-list-item__label{font-size:var(--co-font-size-14)}.co-list-item:hover:not(.co-list-item--disabled){background:var(--co-semantic-surface-hover)}.co-list-item--selected{background:var(--co-semantic-surface-muted)}.co-list-item--disabled{opacity:0.4;cursor:not-allowed}.co-list-item__prefix,.co-list-item__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-list-item__prefix:empty,.co-list-item__suffix:empty{display:none}.co-list-item__content{display:flex;flex-direction:column;flex:1;min-width:0}.co-list-item__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-list-item__description{font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
+const coListItemCss = () => `:host{display:block}.co-list-item{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-md) var(--co-spacing-lg);font-family:var(--co-font-family-primary);cursor:pointer;border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;box-sizing:border-box;min-height:40px}.co-list-item--dense{gap:var(--co-spacing-sm);padding:6px var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);min-height:32px}.co-list-item--dense .co-list-item__label{font-size:var(--co-font-size-14)}.co-list-item:hover:not(.co-list-item--disabled){background:var(--co-semantic-surface-hover)}.co-list-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-list-item--selected{background:var(--co-semantic-surface-muted)}.co-list-item--disabled{opacity:0.4;cursor:not-allowed}.co-list-item__prefix,.co-list-item__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-list-item__prefix:empty,.co-list-item__suffix:empty{display:none}.co-list-item__content{display:flex;flex-direction:column;flex:1;min-width:0}.co-list-item__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-list-item__description{font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
 
 const CoListItem = class {
     constructor(hostRef) {
@@ -20,15 +20,25 @@ const CoListItem = class {
                 return;
             this.coSelect.emit();
         };
+        // Keyboard operable like a native option/button: Enter or Space activates it
+        // (Space is prevented so the page doesn't scroll).
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault();
+                this.coSelect.emit();
+            }
+        };
     }
     render() {
-        return (index.h("div", { key: 'd33007d04b1c3d85465715cf0d8899f565db8a55', class: {
+        return (index.h("div", { key: 'c20c81d99d5377684e95422ef24edc7349b56d78', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", "aria-selected": this.selected ? 'true' : 'false', onClick: this.handleClick }, index.h("span", { key: '6c75c653a89cd7a32ec0b942e1960b71e5fa0d8f', class: "co-list-item__prefix" }, this.icon && index.h("co-icon", { key: 'bcfff961805fe5637a7ae21b9b81f90338a8903f', name: this.icon, size: 18 }), index.h("slot", { key: '271b3820399dc30e6401b679302e23b4fe02452a', name: "prefix" })), index.h("div", { key: '0fd1a2012e58309619586e2aaaca0020ed1acf6e', class: "co-list-item__content" }, this.label && index.h("span", { key: 'a0d4b2f9c0fbdbcd845839dac939bda59c3b100f', class: "co-list-item__label" }, this.label), this.description && index.h("span", { key: 'f674f27bf5ac21a8cb92843bf80045014d86cf2d', class: "co-list-item__description" }, this.description), index.h("slot", { key: 'ee35575016ff414f343255dd652d1a1cf5c01a5d' })), index.h("span", { key: '348369d7f90b489bf098520c5ddc5135dc6b3c37', class: "co-list-item__suffix" }, index.h("slot", { key: 'bed7564f82ac2198b04459d777019b7f722b22f3', name: "suffix" }))));
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("span", { key: '763f88155a5c3f29a44cfd4d49da29636c590bde', class: "co-list-item__prefix" }, this.icon && index.h("co-icon", { key: 'da92fc7a6b988eb204a5f3bfd267ebd79fcf1230', name: this.icon, size: 18 }), index.h("slot", { key: 'e00510cf206ce0f863f993bd0ad57bc6d8af2a0d', name: "prefix" })), index.h("div", { key: '3b5ad6d35640d57d9019e4a020effeef66b16c32', class: "co-list-item__content" }, this.label && index.h("span", { key: 'c745840c3b94ef786c8efd34567506eab39e969d', class: "co-list-item__label" }, this.label), this.description && index.h("span", { key: '0988768cf7fde689ed1e995efaefd4168ca17af0', class: "co-list-item__description" }, this.description), index.h("slot", { key: 'bf6c9f3d55980b433a4d858c58c799f7c3e2898e' })), index.h("span", { key: '6fb267f7ac2fae4b57efff3a3b6cd2b5f4161d79', class: "co-list-item__suffix" }, index.h("slot", { key: '9ed7454c37b83cde16a66ce990cad1cf3368e3d9', name: "suffix" }))));
     }
 };
 CoListItem.style = coListItemCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coLoaderCss = () => `:host{display:contents;--co-loader-ball:15px;--co-loader-step:25px;--co-loader-text:var(--co-font-size-14);--co-loader-gap:10px}:host([size="sm"]){--co-loader-ball:8px;--co-loader-step:14px;--co-loader-text:var(--co-font-size-12);--co-loader-gap:6px}:host([size="lg"]){--co-loader-ball:20px;--co-loader-step:33px;--co-loader-gap:12px}.co-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-loader-gap)}.co-loader--overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.72);z-index:10}.co-loader__balls{position:relative;width:calc(var(--co-loader-step) * 3);height:var(--co-loader-ball)}.co-loader__ball{position:absolute;width:var(--co-loader-ball);height:var(--co-loader-ball);border-radius:50%;animation:co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1)}.co-loader__ball--blue{background-color:#4285f4}.co-loader__ball--yellow{background-color:#fdbd00;animation-delay:0.4s}.co-loader__ball--red{background-color:#d4145a;animation-delay:0.8s}.co-loader__text{margin:0;font-family:var(--co-font-family-primary);font-size:var(--co-loader-text);color:var(--co-semantic-text-secondary);text-align:center;white-space:pre-line}@keyframes co-loader-bounce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(var(--co-loader-step)) scale(1.2)}50%{transform:translateX(calc(var(--co-loader-step) * 2)) scale(0.8)}75%{transform:translateX(var(--co-loader-step)) scale(1.2)}}`;
 

package/dist/cjs/co-menu-divider.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coMenuDividerCss = () => `:host{display:block}.co-menu-divider{border:0;border-top:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));margin:var(--co-spacing-xs, 4px) 0}`;
 
@@ -9,7 +9,7 @@ const CoMenuDivider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("hr", { key: '50dcc97db96c79c6ce7398d627e991750a0f05ac', class: "co-menu-divider", role: "separator" });
+        return index.h("hr", { key: '6e4378c89e42bfa38073213cb7a27dfb3401f663', class: "co-menu-divider", role: "separator" });
     }
 };
 CoMenuDivider.style = coMenuDividerCss();