@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RequiredMark } from './requiredMark-CEbXKHcU.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)}: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 coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity 0.15s ease;box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoInput = class {
     constructor(hostRef) {
@@ -94,7 +94,7 @@ const CoInput = class {
     }
     render() {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
-        return (h("div", { key: 'ea8acfc26e68ae3fb1af4f7de1bcbd2acd4e7ac7', class: {
+        return (h("div", { key: '3c628ddcc708f39637038f25118918fbe0f9cff2', class: {
                 'co-input': true,
                 [`co-input--${this.layout}`]: true,
                 [`co-input--${this.size}`]: true,
@@ -103,10 +103,10 @@ const CoInput = class {
                 '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: '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: {
+            }, 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: '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)))));
+            }, 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)))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RequiredMark } from './requiredMark-CEbXKHcU.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 coJsonFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-json-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-json-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-json-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-json-field__field{display:flex;background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;box-sizing:border-box;overflow:hidden}.co-json-field__native{width:100%;resize:vertical;border:none;outline:none;background:transparent;font-family:var(--co-font-family-mono, monospace);font-size:var(--co-font-size-13, 13px);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box;tab-size:2}.co-json-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-json-field--s .co-json-field__native{padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12, 12px)}.co-json-field--sm .co-json-field__native{padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-json-field--lg .co-json-field__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-14)}.co-json-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-json-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-json-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-json-field--disabled{opacity:0.6;pointer-events:none}.co-json-field--disabled .co-json-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-json-field--invalid .co-json-field__field,.co-json-field--error .co-json-field__field{border-color:var(--co-semantic-status-error)}.co-json-field--invalid.co-json-field--focused .co-json-field__field,.co-json-field--error.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-json-field__helper--error .co-json-field__helper-icon,.co-json-field__helper--error .co-json-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-json-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-json-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-json-field__label{white-space:normal}:host([layout='horizontal']) .co-json-field>:not(.co-json-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-json-field__field{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoJsonField = class {
     constructor(hostRef) {
@@ -24,6 +24,9 @@ const CoJsonField = class {
         this.invalidMessage = 'Invalid JSON';
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Field size (mirrors co-input paddings; mono font scales 12/13/13/14).
+         *  Vertical extent still comes from `rows`. */
+        this.size = 'md';
         /** Raw text in the textarea. */
         this.draft = '';
         /** Internal JSON parse-failure flag. */
@@ -84,16 +87,17 @@ const CoJsonField = class {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '90ec8c329801fb0b4ace08669d6b502037dfa16b', class: {
+        return (h("div", { key: '0f1319b6cd930e576dbba45dfb3bbb9050c8a4c0', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
+                [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'a701737ea2c5b108dec90091566f2d3a397ec3b7', class: "co-json-field__labels" }, h("label", { key: 'd1b7d6b5f683fe9bf8e644ba4deb3bfba0d93040', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '249e52050171e00b27a7fd9751a3595440371cc0', required: this.required })))), h("div", { key: '4c6453d7e4670124e4a48cb449b3bae639ee3b1f', class: "co-json-field__field", part: "field" }, 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 && h("input", { key: '5cf1f53f4b77532d6473fcfa964985509c57e782', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'b906abdf2335b84df2d3976cde5eb7018ed549d3', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '50cfffd0dedb3b091cebadf7b908594d855c1e92', class: "co-json-field__labels" }, h("label", { key: '77410a04bc4ca4f61dd8be107acb159a918f811c', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '21f0c872f95b39e38e16388a0935aebe333640ad', required: this.required })))), h("div", { key: 'f7da7b3e56bc9bb1bfe1759f4e6ea260bd45b19e', class: "co-json-field__field", part: "field" }, h("textarea", { key: '8f5413bb82906a15d83130ca963b771e6539d7f6', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '5c844c980cafec58d64ff473022ace4b11f10b26', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'af8b770be33f336be652e0b6b567a602a59d8e63', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0111116f0dc1a4608ac18ed5db04a6bd1342f6a6', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '54b8b02fcf03b53105e9254c69e3ea5228e882c2', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8ed6b6f2444fbf408818b1ac9911f4513c963dee', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '9282196dfd8f2662c073d7589dd7fd93447101f8', class: "co-json-field__helper-text" }, helper)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
 import { l as langFromLocale } from './dateI18n-C1DCLOEl.js';
 
 /**
@@ -312,17 +312,17 @@ const CoLightbox = class {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (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 && (h("div", { key: '2bb47942785b8273f7f3699ab74a67e101ac3eb1', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'e47844036d53ed71322c8e0cb3b4e926571f1031', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'c7cf53faeb4f303e79316587df60b31964daa549', class: "co-lightbox__zoom" }, 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) }, h("co-icon", { key: '16ff12d54c8a3d1cd16342adb79c0baa3ada38a4', name: "minus", size: 16 })), 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), "%"), 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) }, h("co-icon", { key: 'ace38453321e1a8e0df4bb6ffccff15906e7b8e3', name: "plus", size: 16 }))), h("button", { key: 'bb81d23f14638c2b1a134573ab2a44a848f58abe', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '42bf9277561388580d2b0797d7d732815629776f', name: "arrow-square-out", size: 16 })), 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 }, h("co-icon", { key: '7141d31ad2a3e09131dd8084b669c7c3fd13b9e2', name: "x", size: 16 })))), img && (h("div", { key: '47a092023486d0ac585cf0e35a1d0a374c69fd51', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '3868a39927e3bfc01201e372c5c30b3dcde73562', class: {
+        return (h("div", { key: 'bfffaae28680b214a562aa3c3ec52aaf16a61571', 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 && (h("div", { key: 'e1bed6448e4878d0e459bdda89d1da98712d8207', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '7ff4d35aaa6c4207c2b623951f14802278e1c631', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'bf369f9204faf17c9047c339d893933159078714', class: "co-lightbox__zoom" }, h("button", { key: '94aa9ab08f21bf7d9e77e4ad31325cd13a80bb4d', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'd04c038ec26081190c67eedcccf8e4c61c8cf6d7', name: "minus", size: 16 })), h("button", { key: 'd4333d0c970e71012786915be49be6c0efada12f', 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), "%"), h("button", { key: 'b9efbf3e3912fb557eba59cce0300468a8e86861', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '1d56f6fca5858ba8413f378bc6ac63870663143a', name: "plus", size: 16 }))), h("button", { key: '0fc6adbb0b1c80cb2e8da9eb09dfe107349a59cf', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'b1151b279b700caa0712ff74b09c0440d4b37dd4', name: "arrow-square-out", size: 16 })), h("button", { key: '984f9d2b9498d9715dabff254d2f3da9a42d9172', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '054e307f9116c8dca66412ae54dfee8e3a86da9b', name: "x", size: 16 })))), img && (h("div", { key: 'cd21ae63400375474fca02ebf77c35d4b4fd8b55', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'b33b767ba92e4a1ed685409b1a96acc98767c4f7', 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 && (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) => {
+            }, 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 && (h("button", { key: '0b35f47557bf3e05db3c98e0df2c6e8d6f5cef94', 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);
-            } }, h("co-icon", { key: '6dcc8cd799b4acfd1bf048600c5d3e9b97dba746', name: "caret-left", size: 24 }))), img && multi && (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) => {
+            } }, h("co-icon", { key: 'f84159324fe97c957f0e8b2f0b92f865f180f7ed', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '7c1a9f250bb4b881112a57a2f3455b3c82fc77cc', 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);
-            } }, h("co-icon", { key: '7efe343ba92c77e2f760bd7ea236caf325a50c1e', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '008f102eb44447b7f762c0cd4ba8c19e9fed2ee5', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '00efc2dd2e09c2dc1df35b6317e5bc42a63b2c20', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '7b148b3a2a1c3032c037439293b2b4c6e0100c52', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-list-footer.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, c as createEvent, h } from './index-CYsftTKf.js';
+
+const coListFooterCss = () => `:host{display:block}.co-list-footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-list-footer__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-list-footer__btn:hover{opacity:0.85}.co-list-footer__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-list-footer__btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-list-footer__btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}`;
+
+const CoListFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coPrimary = createEvent(this, "coPrimary", 7);
+        this.coSecondary = createEvent(this, "coSecondary", 7);
+        /** Primary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.primaryIcon = 'plus';
+        /** Secondary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.secondaryIcon = 'plus';
+        this.handlePrimary = () => this.coPrimary.emit();
+        this.handleSecondary = () => this.coSecondary.emit();
+    }
+    render() {
+        return (h("div", { key: '408e27a26e9d2d1802ba336690c84c745a79a22d', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '9a597df6466ebf5c5720b50d0d4d2993ba3af9ab', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'c743c1399b14d175c51ea553d508110e8bcaef05', name: this.secondaryIcon, size: 16 }), h("span", { key: '3c32ad1ea326da99debeb716980b38cf9777b168' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: 'ce57a3fe3456d4cd3959d556304de9de7558ec40', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '584416793ecbf91a960b2b55f54e703ba1d0ca5c', name: this.primaryIcon, size: 16 }), h("span", { key: 'f227d58236ab0f4d31b398cfc9bf7419efd57d02' }, this.primaryLabel))), h("slot", { key: '601ef71ed5374dab62a79ad875da9b6f7a0fcfed' })));
+    }
+};
+CoListFooter.style = coListFooterCss();
+
+export { CoListFooter as co_list_footer };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.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: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 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__content>.co-list-item__tip{min-width:0;max-width:100%}.co-list-item__label{display:block;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{display:block;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) {
@@ -13,6 +13,21 @@ const CoListItem = class {
         /** Compact variant — tighter padding + smaller radius for dropdowns / menus
          *  (the default size is tuned for sidebar nav rows). */
         this.dense = false;
+        /** Whether the label / description is currently ellipsis-truncated (drives the tooltip). */
+        this.labelTruncated = false;
+        this.descTruncated = false;
+        // Drives co-tooltip's `disabled`: show the full-text tooltip ONLY when the
+        // label / description is actually ellipsis-truncated. Guarded writes prevent
+        // a render loop; read synchronously, so it's correct before co-tooltip reads
+        // `disabled` on the trigger's mouseenter.
+        this.measureTruncation = () => {
+            const l = this.labelEl ? this.labelEl.scrollWidth > this.labelEl.clientWidth + 1 : false;
+            const d = this.descEl ? this.descEl.scrollWidth > this.descEl.clientWidth + 1 : false;
+            if (l !== this.labelTruncated)
+                this.labelTruncated = l;
+            if (d !== this.descTruncated)
+                this.descTruncated = d;
+        };
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -29,15 +44,56 @@ const CoListItem = class {
             }
         };
     }
+    componentDidLoad() {
+        // A ResizeObserver re-measures when the row gets its real width — e.g. a
+        // top-layer popover panel going from display:none to shown (where a one-shot
+        // load-time measure would read 0) — and on any later resize.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.ro = new ResizeObserver(() => this.measureTruncation());
+            if (this.labelEl)
+                this.ro.observe(this.labelEl);
+            if (this.descEl)
+                this.ro.observe(this.descEl);
+        }
+        this.measureTruncation();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro = undefined;
+    }
+    // A width-stable text swap (same column, new text) won't trip the
+    // ResizeObserver — re-measure on prop change; rAF so the DOM holds the new
+    // text first.
+    onTextChange() {
+        requestAnimationFrame(this.measureTruncation);
+    }
     render() {
-        return (h("div", { key: 'c20c81d99d5377684e95422ef24edc7349b56d78', class: {
+        return (h("div", { key: '984e2c7fcb5f4124c871dda103e450b858143c0f', 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", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '763f88155a5c3f29a44cfd4d49da29636c590bde', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'da92fc7a6b988eb204a5f3bfd267ebd79fcf1230', name: this.icon, size: 18 }), h("slot", { key: 'e00510cf206ce0f863f993bd0ad57bc6d8af2a0d', name: "prefix" })), h("div", { key: '3b5ad6d35640d57d9019e4a020effeef66b16c32', class: "co-list-item__content" }, this.label && h("span", { key: 'c745840c3b94ef786c8efd34567506eab39e969d', class: "co-list-item__label" }, this.label), this.description && h("span", { key: '0988768cf7fde689ed1e995efaefd4168ca17af0', class: "co-list-item__description" }, this.description), h("slot", { key: 'bf6c9f3d55980b433a4d858c58c799f7c3e2898e' })), h("span", { key: '6fb267f7ac2fae4b57efff3a3b6cd2b5f4161d79', class: "co-list-item__suffix" }, h("slot", { key: '9ed7454c37b83cde16a66ce990cad1cf3368e3d9', 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 }, h("span", { key: 'd1a3466d6ecc565435d3918a596bc7620cce2197', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '2374265eac83fb8d86ee26ab3317da2c2c9d2998', name: this.icon, size: 18 }), h("slot", { key: '6bb538d2212c2bd25d61c54a59120295ff55692b', name: "prefix" })), h("div", { key: '052ed53fb59580780a0d1c2b1dbdff7711fbb585', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '027cb3026c0ac2efdfb76f7eeb9600d21899e865', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '3b27db5590486bab2c4b8819548dbb13c332a13b', class: "co-list-item__label", ref: (el) => {
+                this.labelEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.label))), this.description && (h("co-tooltip", { key: '220243aafd77d681315f0847cb3db72110330b7e', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'fb8543457be7e67c7eca8461f207dad833503462', class: "co-list-item__description", ref: (el) => {
+                this.descEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.description))), h("slot", { key: 'ed7e997155bec808ef01c6300109f435a5e698b1' })), h("span", { key: '1601e81a0d25f685b69ebea30a13b1dac9337866', class: "co-list-item__suffix" }, h("slot", { key: 'f23ac07bc12c9a02810574bcb30b2a323b07b3ee', name: "suffix" }))));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "label": [{
+                "onTextChange": 0
+            }],
+        "description": [{
+                "onTextChange": 0
+            }]
+    }; }
 };
 CoListItem.style = coListItemCss();
 

package/dist/esm/co-loader_2.entry.js

@@ -0,0 +1,290 @@
+import { r as registerInstance, h, c as createEvent, a as getElement } from './index-CYsftTKf.js';
+import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.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)}}@media (prefers-reduced-motion: reduce){.co-loader__ball{animation:none}.co-loader__ball--blue{transform:translateX(0)}.co-loader__ball--yellow{transform:translateX(var(--co-loader-step))}.co-loader__ball--red{transform:translateX(calc(var(--co-loader-step) * 2))}}`;
+
+const CoLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Show the loader. When false the component renders nothing so it doesn't
+         *  hold layout space or run animations while hidden. */
+        this.visible = true;
+        /** Render as an absolute-positioned overlay over the nearest positioned
+         *  ancestor. When false (default) the loader is inline. */
+        this.overlay = false;
+        /** Size of the ball animation. `sm` ~42px wide for tight UI like dropdown
+         *  bodies; `md` (default) ~75px for drawers/boot; `lg` ~100px for big
+         *  empty screens. */
+        this.size = 'md';
+        /** Optional text label below the balls. Multi-line is supported. */
+        this.text = '';
+        /** CSS color for the overlay backdrop. Only applied when `overlay=true`. */
+        this.background = '';
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const style = this.overlay && this.background ? { background: this.background } : undefined;
+        return (h("div", { class: { 'co-loader': true, 'co-loader--overlay': this.overlay }, style: style, part: "root", role: "status", "aria-live": "polite" }, h("div", { class: "co-loader__balls", part: "balls" }, h("span", { class: "co-loader__ball co-loader__ball--blue" }), h("span", { class: "co-loader__ball co-loader__ball--yellow" }), h("span", { class: "co-loader__ball co-loader__ball--red" })), this.text && h("p", { class: "co-loader__text", part: "text" }, this.text)));
+    }
+};
+CoLoader.style = coLoaderCss();
+
+// focusTrap.ts
+//
+// Focus-trap helpers for co-overlay. The Tab-cycling decision is a PURE function
+// (`resolveTabIndex`) so it can be unit-tested in a node env, mirroring the
+// `overlayAfterClose` split. The DOM query lives here too but is only invoked by
+// the component at runtime.
+/** CSS selector matching natively tabbable elements. */
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+/**
+ * Decide which focusable index a Tab / Shift+Tab keystroke should move to.
+ *
+ * @param count       number of focusable elements inside the trap
+ * @param activeIndex index of the currently focused element, or -1 when focus
+ *                    is outside the trap (e.g. it escaped to the body)
+ * @param shiftKey    whether Shift is held (backward tabbing)
+ * @returns the index to focus, or -1 when there is nothing to trap
+ *
+ * Pure — no DOM — so the wrap-around edge cases stay unit-testable.
+ */
+function resolveTabIndex(count, activeIndex, shiftKey) {
+    if (count <= 0)
+        return -1;
+    if (shiftKey) {
+        // Backward: from the first element (or from outside) wrap to the last.
+        return activeIndex <= 0 ? count - 1 : activeIndex - 1;
+    }
+    // Forward: from the last element (or from outside) wrap to the first.
+    return activeIndex === -1 || activeIndex >= count - 1 ? 0 : activeIndex + 1;
+}
+/**
+ * Collect the tabbable elements slotted into the overlay's light DOM, skipping
+ * hidden / aria-hidden ones. (Focusables nested inside further shadow roots are
+ * out of scope — the common dialog/modal content lives in the slotted subtree.)
+ */
+function getFocusableElements(root) {
+    const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+    return nodes.filter((el) => !el.hasAttribute('disabled') &&
+        el.getAttribute('aria-hidden') !== 'true' &&
+        // offsetParent is null for display:none; getClientRects covers position:fixed.
+        (el.offsetParent !== null || el.getClientRects().length > 0));
+}
+
+const coOverlayCss = () => `:host{display:contents}.co-overlay{position:fixed;inset:0;z-index:1000;margin:0;border:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;overflow:visible;display:flex;align-items:center;justify-content:center;background:var(--co-overlay-bg, rgba(0, 0, 0, 0.4));-webkit-backdrop-filter:blur(var(--co-overlay-blur, 2px));backdrop-filter:blur(var(--co-overlay-blur, 2px));opacity:0;pointer-events:none;transition:opacity 0.2s ease}.co-overlay--open{opacity:1;pointer-events:auto;transition:opacity 0.12s ease}`;
+
+/**
+ * Module-level body-scroll lock shared by every overlay instance.
+ * Ref-counted so stacked/nested overlays (e.g. a modal opened from a drawer)
+ * don't release the lock until the LAST one closes.
+ */
+let lockCount = 0;
+let savedOverflow = '';
+function lockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0) {
+        savedOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    lockCount++;
+}
+function unlockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0)
+        return;
+    lockCount--;
+    if (lockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+    }
+}
+function nextFrame(cb) {
+    if (typeof requestAnimationFrame === 'function')
+        requestAnimationFrame(cb);
+    else
+        cb();
+}
+const CoOverlay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coClose = createEvent(this, "coClose", 7);
+        this.coAfterClose = createEvent(this, "coAfterClose", 3);
+        this.coAfterOpen = createEvent(this, "coAfterOpen", 3);
+        /** Whether the overlay is visible */
+        this.open = false;
+        /**
+         * Opt-in accessible focus trap. When true, opening the overlay records the
+         * previously-focused element, moves focus into the overlay, cycles Tab /
+         * Shift+Tab within the slotted content, and restores focus on close.
+         * Default false → existing consumers are unchanged.
+         */
+        this.trapFocus = false;
+        /**
+         * Opt-in: emit `coClose` when Escape is pressed while open.
+         * Default false → existing consumers are unchanged.
+         */
+        this.closeOnEscape = false;
+        /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
+        this.hasLock = false;
+        this.handleClick = () => {
+            this.coClose.emit();
+        };
+        this.handleTransitionEnd = (e) => {
+            if (e.target !== this.overlayEl)
+                return;
+            const ev = afterEventFor(e.propertyName, this.open, 'opacity');
+            if (ev === 'after-open')
+                this.coAfterOpen.emit();
+            else if (ev === 'after-close')
+                this.coAfterClose.emit();
+        };
+    }
+    onOpenChange(isOpen) {
+        if (isOpen)
+            this.acquireLock();
+        else
+            this.releaseLock();
+        this.syncPopover();
+        if (this.trapFocus) {
+            if (isOpen)
+                this.captureAndFocus();
+            else
+                this.restoreFocus();
+        }
+    }
+    componentDidLoad() {
+        // Handle the case where the overlay mounts already open.
+        if (this.open)
+            this.acquireLock();
+        this.syncPopover();
+        if (this.open && this.trapFocus)
+            this.captureAndFocus();
+    }
+    disconnectedCallback() {
+        // Safety: never leave the body locked if removed while open.
+        this.releaseLock();
+        // Safety: return focus if we were removed while trapping.
+        if (this.trapFocus)
+            this.restoreFocus();
+    }
+    acquireLock() {
+        if (this.hasLock)
+            return;
+        this.hasLock = true;
+        lockBodyScroll();
+    }
+    releaseLock() {
+        if (!this.hasLock)
+            return;
+        this.hasLock = false;
+        unlockBodyScroll();
+    }
+    /**
+     * Promote the scrim to the browser top layer so it covers the whole viewport
+     * regardless of ancestor `filter`/`mask`/`transform` (which would otherwise
+     * make `position: fixed` resolve against that ancestor, confining the scrim).
+     * The Popover API promotes WITHOUT moving the DOM node, so slots and Stencil
+     * reconciliation are untouched. No-ops gracefully where unsupported.
+     */
+    syncPopover() {
+        const el = this.overlayEl;
+        if (!el || typeof el.showPopover !== 'function')
+            return;
+        try {
+            const isShown = el.matches(':popover-open');
+            if (this.open && !isShown)
+                el.showPopover();
+            else if (!this.open && isShown)
+                el.hidePopover();
+        }
+        catch (_a) {
+            /* not connected yet, or already in the desired state */
+        }
+    }
+    /** Record the current focus and move it into the overlay (guarded by trapFocus). */
+    captureAndFocus() {
+        if (typeof document !== 'undefined') {
+            this.returnFocusEl = document.activeElement;
+        }
+        // Defer so slotted content / the open transition is ready to take focus.
+        nextFrame(() => {
+            var _a;
+            if (!this.open)
+                return;
+            const focusables = getFocusableElements(this.el);
+            if (focusables.length > 0)
+                focusables[0].focus();
+            else
+                (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    /** Restore focus to the element that had it before the trap engaged. */
+    restoreFocus() {
+        const target = this.returnFocusEl;
+        this.returnFocusEl = null;
+        if (target && typeof target.focus === 'function')
+            target.focus();
+    }
+    /** Deepest active element, descending through nested shadow roots. */
+    deepActiveElement() {
+        if (typeof document === 'undefined')
+            return null;
+        let node = document.activeElement;
+        while (node && node.shadowRoot && node.shadowRoot.activeElement) {
+            node = node.shadowRoot.activeElement;
+        }
+        return node;
+    }
+    handleKeydown(e) {
+        if (!this.open)
+            return;
+        if (this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+            return;
+        }
+        if (this.trapFocus && e.key === 'Tab')
+            this.trapTab(e);
+    }
+    trapTab(e) {
+        var _a;
+        const focusables = getFocusableElements(this.el);
+        if (focusables.length === 0) {
+            // Nothing to move to — keep focus pinned to the overlay container.
+            e.preventDefault();
+            (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        const activeIndex = focusables.indexOf(this.deepActiveElement());
+        const nextIndex = resolveTabIndex(focusables.length, activeIndex, e.shiftKey);
+        if (nextIndex < 0)
+            return;
+        e.preventDefault();
+        focusables[nextIndex].focus();
+    }
+    render() {
+        return (h("div", { key: 'e6a474574b171c1f4f0b55b9165aa22ee7faa7f1', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '05a95bc4822c57de49137f2e604f4dbb54f81f9e' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+CoOverlay.style = coOverlayCss();
+
+export { CoLoader as co_loader, CoOverlay as co_overlay };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, h } from './index-CYsftTKf.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}`;
 
@@ -7,7 +7,7 @@ const CoMenuDivider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("hr", { key: '6e4378c89e42bfa38073213cb7a27dfb3401f663', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '08549f09b4a76d1bc2cd572a8f09ed9289551175', class: "co-menu-divider", role: "separator" });
     }
 };
 CoMenuDivider.style = coMenuDividerCss();