@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -0,0 +1,376 @@
+'use strict';
+
+var index = require('./index-DoFnrUVH.js');
+var requiredMark = require('./requiredMark-DA6y-4rp.js');
+var normalizeText = require('./normalizeText-B-v-XPKf.js');
+
+/**
+ * Dial codes sorted by name. Covers the full ITU-T E.164 assignment.
+ * The iso2 key matches country-flag-icons' 3x2/{ISO2} naming.
+ */
+const DIAL_CODES = [
+    { iso2: 'AF', dialCode: '+93', name: 'Afghanistan' },
+    { iso2: 'AL', dialCode: '+355', name: 'Albania' },
+    { iso2: 'DZ', dialCode: '+213', name: 'Algeria' },
+    { iso2: 'AD', dialCode: '+376', name: 'Andorra' },
+    { iso2: 'AO', dialCode: '+244', name: 'Angola' },
+    { iso2: 'AG', dialCode: '+1268', name: 'Antigua and Barbuda' },
+    { iso2: 'AR', dialCode: '+54', name: 'Argentina' },
+    { iso2: 'AM', dialCode: '+374', name: 'Armenia' },
+    { iso2: 'AU', dialCode: '+61', name: 'Australia' },
+    { iso2: 'AT', dialCode: '+43', name: 'Austria' },
+    { iso2: 'AZ', dialCode: '+994', name: 'Azerbaijan' },
+    { iso2: 'BS', dialCode: '+1242', name: 'Bahamas' },
+    { iso2: 'BH', dialCode: '+973', name: 'Bahrain' },
+    { iso2: 'BD', dialCode: '+880', name: 'Bangladesh' },
+    { iso2: 'BB', dialCode: '+1246', name: 'Barbados' },
+    { iso2: 'BY', dialCode: '+375', name: 'Belarus' },
+    { iso2: 'BE', dialCode: '+32', name: 'Belgium' },
+    { iso2: 'BZ', dialCode: '+501', name: 'Belize' },
+    { iso2: 'BJ', dialCode: '+229', name: 'Benin' },
+    { iso2: 'BT', dialCode: '+975', name: 'Bhutan' },
+    { iso2: 'BO', dialCode: '+591', name: 'Bolivia' },
+    { iso2: 'BA', dialCode: '+387', name: 'Bosnia and Herzegovina' },
+    { iso2: 'BW', dialCode: '+267', name: 'Botswana' },
+    { iso2: 'BR', dialCode: '+55', name: 'Brazil' },
+    { iso2: 'BN', dialCode: '+673', name: 'Brunei' },
+    { iso2: 'BG', dialCode: '+359', name: 'Bulgaria' },
+    { iso2: 'BF', dialCode: '+226', name: 'Burkina Faso' },
+    { iso2: 'BI', dialCode: '+257', name: 'Burundi' },
+    { iso2: 'KH', dialCode: '+855', name: 'Cambodia' },
+    { iso2: 'CM', dialCode: '+237', name: 'Cameroon' },
+    { iso2: 'CA', dialCode: '+1', name: 'Canada' },
+    { iso2: 'CV', dialCode: '+238', name: 'Cape Verde' },
+    { iso2: 'CF', dialCode: '+236', name: 'Central African Republic' },
+    { iso2: 'TD', dialCode: '+235', name: 'Chad' },
+    { iso2: 'CL', dialCode: '+56', name: 'Chile' },
+    { iso2: 'CN', dialCode: '+86', name: 'China' },
+    { iso2: 'CO', dialCode: '+57', name: 'Colombia' },
+    { iso2: 'KM', dialCode: '+269', name: 'Comoros' },
+    { iso2: 'CD', dialCode: '+243', name: 'Congo (DRC)' },
+    { iso2: 'CG', dialCode: '+242', name: 'Congo (Republic)' },
+    { iso2: 'CR', dialCode: '+506', name: 'Costa Rica' },
+    { iso2: 'CI', dialCode: '+225', name: 'Côte d\'Ivoire' },
+    { iso2: 'HR', dialCode: '+385', name: 'Croatia' },
+    { iso2: 'CU', dialCode: '+53', name: 'Cuba' },
+    { iso2: 'CY', dialCode: '+357', name: 'Cyprus' },
+    { iso2: 'CZ', dialCode: '+420', name: 'Czech Republic' },
+    { iso2: 'DK', dialCode: '+45', name: 'Denmark' },
+    { iso2: 'DJ', dialCode: '+253', name: 'Djibouti' },
+    { iso2: 'DM', dialCode: '+1767', name: 'Dominica' },
+    { iso2: 'DO', dialCode: '+1809', name: 'Dominican Republic' },
+    { iso2: 'EC', dialCode: '+593', name: 'Ecuador' },
+    { iso2: 'EG', dialCode: '+20', name: 'Egypt' },
+    { iso2: 'SV', dialCode: '+503', name: 'El Salvador' },
+    { iso2: 'GQ', dialCode: '+240', name: 'Equatorial Guinea' },
+    { iso2: 'ER', dialCode: '+291', name: 'Eritrea' },
+    { iso2: 'EE', dialCode: '+372', name: 'Estonia' },
+    { iso2: 'SZ', dialCode: '+268', name: 'Eswatini' },
+    { iso2: 'ET', dialCode: '+251', name: 'Ethiopia' },
+    { iso2: 'FJ', dialCode: '+679', name: 'Fiji' },
+    { iso2: 'FI', dialCode: '+358', name: 'Finland' },
+    { iso2: 'FR', dialCode: '+33', name: 'France' },
+    { iso2: 'GA', dialCode: '+241', name: 'Gabon' },
+    { iso2: 'GM', dialCode: '+220', name: 'Gambia' },
+    { iso2: 'GE', dialCode: '+995', name: 'Georgia' },
+    { iso2: 'DE', dialCode: '+49', name: 'Germany' },
+    { iso2: 'GH', dialCode: '+233', name: 'Ghana' },
+    { iso2: 'GR', dialCode: '+30', name: 'Greece' },
+    { iso2: 'GD', dialCode: '+1473', name: 'Grenada' },
+    { iso2: 'GT', dialCode: '+502', name: 'Guatemala' },
+    { iso2: 'GN', dialCode: '+224', name: 'Guinea' },
+    { iso2: 'GW', dialCode: '+245', name: 'Guinea-Bissau' },
+    { iso2: 'GY', dialCode: '+592', name: 'Guyana' },
+    { iso2: 'HT', dialCode: '+509', name: 'Haiti' },
+    { iso2: 'HN', dialCode: '+504', name: 'Honduras' },
+    { iso2: 'HU', dialCode: '+36', name: 'Hungary' },
+    { iso2: 'IS', dialCode: '+354', name: 'Iceland' },
+    { iso2: 'IN', dialCode: '+91', name: 'India' },
+    { iso2: 'ID', dialCode: '+62', name: 'Indonesia' },
+    { iso2: 'IR', dialCode: '+98', name: 'Iran' },
+    { iso2: 'IQ', dialCode: '+964', name: 'Iraq' },
+    { iso2: 'IE', dialCode: '+353', name: 'Ireland' },
+    { iso2: 'IL', dialCode: '+972', name: 'Israel' },
+    { iso2: 'IT', dialCode: '+39', name: 'Italy' },
+    { iso2: 'JM', dialCode: '+1876', name: 'Jamaica' },
+    { iso2: 'JP', dialCode: '+81', name: 'Japan' },
+    { iso2: 'JO', dialCode: '+962', name: 'Jordan' },
+    { iso2: 'KZ', dialCode: '+7', name: 'Kazakhstan' },
+    { iso2: 'KE', dialCode: '+254', name: 'Kenya' },
+    { iso2: 'KI', dialCode: '+686', name: 'Kiribati' },
+    { iso2: 'KW', dialCode: '+965', name: 'Kuwait' },
+    { iso2: 'KG', dialCode: '+996', name: 'Kyrgyzstan' },
+    { iso2: 'LA', dialCode: '+856', name: 'Laos' },
+    { iso2: 'LV', dialCode: '+371', name: 'Latvia' },
+    { iso2: 'LB', dialCode: '+961', name: 'Lebanon' },
+    { iso2: 'LS', dialCode: '+266', name: 'Lesotho' },
+    { iso2: 'LR', dialCode: '+231', name: 'Liberia' },
+    { iso2: 'LY', dialCode: '+218', name: 'Libya' },
+    { iso2: 'LI', dialCode: '+423', name: 'Liechtenstein' },
+    { iso2: 'LT', dialCode: '+370', name: 'Lithuania' },
+    { iso2: 'LU', dialCode: '+352', name: 'Luxembourg' },
+    { iso2: 'MG', dialCode: '+261', name: 'Madagascar' },
+    { iso2: 'MW', dialCode: '+265', name: 'Malawi' },
+    { iso2: 'MY', dialCode: '+60', name: 'Malaysia' },
+    { iso2: 'MV', dialCode: '+960', name: 'Maldives' },
+    { iso2: 'ML', dialCode: '+223', name: 'Mali' },
+    { iso2: 'MT', dialCode: '+356', name: 'Malta' },
+    { iso2: 'MH', dialCode: '+692', name: 'Marshall Islands' },
+    { iso2: 'MR', dialCode: '+222', name: 'Mauritania' },
+    { iso2: 'MU', dialCode: '+230', name: 'Mauritius' },
+    { iso2: 'MX', dialCode: '+52', name: 'Mexico' },
+    { iso2: 'FM', dialCode: '+691', name: 'Micronesia' },
+    { iso2: 'MD', dialCode: '+373', name: 'Moldova' },
+    { iso2: 'MC', dialCode: '+377', name: 'Monaco' },
+    { iso2: 'MN', dialCode: '+976', name: 'Mongolia' },
+    { iso2: 'ME', dialCode: '+382', name: 'Montenegro' },
+    { iso2: 'MA', dialCode: '+212', name: 'Morocco' },
+    { iso2: 'MZ', dialCode: '+258', name: 'Mozambique' },
+    { iso2: 'MM', dialCode: '+95', name: 'Myanmar' },
+    { iso2: 'NA', dialCode: '+264', name: 'Namibia' },
+    { iso2: 'NR', dialCode: '+674', name: 'Nauru' },
+    { iso2: 'NP', dialCode: '+977', name: 'Nepal' },
+    { iso2: 'NL', dialCode: '+31', name: 'Netherlands' },
+    { iso2: 'NZ', dialCode: '+64', name: 'New Zealand' },
+    { iso2: 'NI', dialCode: '+505', name: 'Nicaragua' },
+    { iso2: 'NE', dialCode: '+227', name: 'Niger' },
+    { iso2: 'NG', dialCode: '+234', name: 'Nigeria' },
+    { iso2: 'KP', dialCode: '+850', name: 'North Korea' },
+    { iso2: 'MK', dialCode: '+389', name: 'North Macedonia' },
+    { iso2: 'NO', dialCode: '+47', name: 'Norway' },
+    { iso2: 'OM', dialCode: '+968', name: 'Oman' },
+    { iso2: 'PK', dialCode: '+92', name: 'Pakistan' },
+    { iso2: 'PW', dialCode: '+680', name: 'Palau' },
+    { iso2: 'PS', dialCode: '+970', name: 'Palestine' },
+    { iso2: 'PA', dialCode: '+507', name: 'Panama' },
+    { iso2: 'PG', dialCode: '+675', name: 'Papua New Guinea' },
+    { iso2: 'PY', dialCode: '+595', name: 'Paraguay' },
+    { iso2: 'PE', dialCode: '+51', name: 'Peru' },
+    { iso2: 'PH', dialCode: '+63', name: 'Philippines' },
+    { iso2: 'PL', dialCode: '+48', name: 'Poland' },
+    { iso2: 'PT', dialCode: '+351', name: 'Portugal' },
+    { iso2: 'QA', dialCode: '+974', name: 'Qatar' },
+    { iso2: 'RO', dialCode: '+40', name: 'Romania' },
+    { iso2: 'RU', dialCode: '+7', name: 'Russia' },
+    { iso2: 'RW', dialCode: '+250', name: 'Rwanda' },
+    { iso2: 'KN', dialCode: '+1869', name: 'Saint Kitts and Nevis' },
+    { iso2: 'LC', dialCode: '+1758', name: 'Saint Lucia' },
+    { iso2: 'VC', dialCode: '+1784', name: 'Saint Vincent and the Grenadines' },
+    { iso2: 'WS', dialCode: '+685', name: 'Samoa' },
+    { iso2: 'SM', dialCode: '+378', name: 'San Marino' },
+    { iso2: 'ST', dialCode: '+239', name: 'São Tomé and Príncipe' },
+    { iso2: 'SA', dialCode: '+966', name: 'Saudi Arabia' },
+    { iso2: 'SN', dialCode: '+221', name: 'Senegal' },
+    { iso2: 'RS', dialCode: '+381', name: 'Serbia' },
+    { iso2: 'SC', dialCode: '+248', name: 'Seychelles' },
+    { iso2: 'SL', dialCode: '+232', name: 'Sierra Leone' },
+    { iso2: 'SG', dialCode: '+65', name: 'Singapore' },
+    { iso2: 'SK', dialCode: '+421', name: 'Slovakia' },
+    { iso2: 'SI', dialCode: '+386', name: 'Slovenia' },
+    { iso2: 'SB', dialCode: '+677', name: 'Solomon Islands' },
+    { iso2: 'SO', dialCode: '+252', name: 'Somalia' },
+    { iso2: 'ZA', dialCode: '+27', name: 'South Africa' },
+    { iso2: 'KR', dialCode: '+82', name: 'South Korea' },
+    { iso2: 'SS', dialCode: '+211', name: 'South Sudan' },
+    { iso2: 'ES', dialCode: '+34', name: 'Spain' },
+    { iso2: 'LK', dialCode: '+94', name: 'Sri Lanka' },
+    { iso2: 'SD', dialCode: '+249', name: 'Sudan' },
+    { iso2: 'SR', dialCode: '+597', name: 'Suriname' },
+    { iso2: 'SE', dialCode: '+46', name: 'Sweden' },
+    { iso2: 'CH', dialCode: '+41', name: 'Switzerland' },
+    { iso2: 'SY', dialCode: '+963', name: 'Syria' },
+    { iso2: 'TW', dialCode: '+886', name: 'Taiwan' },
+    { iso2: 'TJ', dialCode: '+992', name: 'Tajikistan' },
+    { iso2: 'TZ', dialCode: '+255', name: 'Tanzania' },
+    { iso2: 'TH', dialCode: '+66', name: 'Thailand' },
+    { iso2: 'TL', dialCode: '+670', name: 'Timor-Leste' },
+    { iso2: 'TG', dialCode: '+228', name: 'Togo' },
+    { iso2: 'TO', dialCode: '+676', name: 'Tonga' },
+    { iso2: 'TT', dialCode: '+1868', name: 'Trinidad and Tobago' },
+    { iso2: 'TN', dialCode: '+216', name: 'Tunisia' },
+    { iso2: 'TR', dialCode: '+90', name: 'Turkey' },
+    { iso2: 'TM', dialCode: '+993', name: 'Turkmenistan' },
+    { iso2: 'TV', dialCode: '+688', name: 'Tuvalu' },
+    { iso2: 'UG', dialCode: '+256', name: 'Uganda' },
+    { iso2: 'UA', dialCode: '+380', name: 'Ukraine' },
+    { iso2: 'AE', dialCode: '+971', name: 'United Arab Emirates' },
+    { iso2: 'GB', dialCode: '+44', name: 'United Kingdom' },
+    { iso2: 'US', dialCode: '+1', name: 'United States' },
+    { iso2: 'UY', dialCode: '+598', name: 'Uruguay' },
+    { iso2: 'UZ', dialCode: '+998', name: 'Uzbekistan' },
+    { iso2: 'VU', dialCode: '+678', name: 'Vanuatu' },
+    { iso2: 'VA', dialCode: '+379', name: 'Vatican City' },
+    { iso2: 'VE', dialCode: '+58', name: 'Venezuela' },
+    { iso2: 'VN', dialCode: '+84', name: 'Vietnam' },
+    { iso2: 'YE', dialCode: '+967', name: 'Yemen' },
+    { iso2: 'ZM', dialCode: '+260', name: 'Zambia' },
+    { iso2: 'ZW', dialCode: '+263', name: 'Zimbabwe' },
+];
+/** ISO2 code → DialCode entry lookup. */
+const DIAL_CODE_MAP = Object.fromEntries(DIAL_CODES.map((d) => [d.iso2, d]));
+
+const coPhoneFieldCss = () => `: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;position:relative}.co-phone-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative;font-family:var(--co-font-family-primary)}.co-phone-field--disabled{opacity:0.5;pointer-events:none}.co-phone-field__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.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-phone-field__container{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}.co-phone-field--error .co-phone-field__container{border-color:var(--co-color-status-error)}.co-phone-field__container:focus-within{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-phone-field__selector{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0;background:none;border:none;border-right:1px solid var(--co-semantic-border-subtle);padding-right:var(--co-spacing-sm);margin-right:var(--co-spacing-sm);cursor:pointer;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);white-space:nowrap}.co-phone-field__selector:hover{opacity:0.8}.co-phone-field__flag{width:20px;height:15px;border-radius:2px;object-fit:cover}.co-phone-field__dial-code{font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);font-weight:500}.co-phone-field__chevron{display:flex;align-items:center;color:var(--co-semantic-text-muted)}.co-phone-field__input{flex:1;min-width:0;padding:0;border:none;outline:none;font-size:inherit;font-family:inherit;font-weight:400;letter-spacing:inherit;color:var(--co-semantic-text-default);background:transparent;line-height:1}.co-phone-field__input::placeholder{color:var(--co-semantic-text-muted)}.co-phone-field__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);max-height:280px;display:flex;flex-direction:column;overflow:hidden}.co-phone-field__search{padding:var(--co-spacing-sm);border-bottom:1px solid var(--co-semantic-border-subtle)}.co-phone-field__search-input{width:100%;padding:var(--co-spacing-xs) var(--co-spacing-sm);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs);font-size:var(--co-font-size-14);font-family:var(--co-font-family-primary);outline:none;background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);box-sizing:border-box}.co-phone-field__search-input:focus{border-color:var(--co-semantic-border-focus)}.co-phone-field__options{overflow-y:auto;flex:1}.co-phone-field__option{display:flex;align-items:center;gap:var(--co-spacing-sm);width:100%;padding:var(--co-spacing-sm) var(--co-spacing-md);border:none;background:none;cursor:pointer;font-size:var(--co-font-size-14);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);text-align:left}.co-phone-field__option:hover{background:var(--co-semantic-surface-hover)}.co-phone-field__option--selected{background:color-mix(in srgb, var(--co-semantic-border-focus) 8%, transparent);font-weight:500}.co-phone-field__option-flag{width:20px;height:15px;border-radius:2px;object-fit:cover;flex-shrink:0}.co-phone-field__match{font-weight:700}.co-phone-field__option-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-phone-field__option-code{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);white-space:nowrap}.co-phone-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted)}.co-phone-field__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-phone-field--error .co-phone-field__helper{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-phone-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-phone-field__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-phone-field__label{white-space:normal}:host([layout='horizontal']) .co-phone-field>:not(.co-phone-field__label){grid-column:2;min-width:0}`;
+
+const CoPhoneField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        /** Placeholder for the number input. */
+        this.placeholder = '';
+        /** Current full value (dialCode + number). */
+        this.value = '';
+        /** Disable the entire field. */
+        this.disabled = false;
+        /** Required indicator. */
+        this.required = false;
+        /** Validation status. */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Default country ISO2 code (e.g. "CO", "US"). Optional — if not set, starts empty. */
+        this.defaultCountry = '';
+        this.selectedIso2 = '';
+        this.numberPart = '';
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.handleOutsideClick = (e) => {
+            if (!this.isOpen)
+                return;
+            const path = e.composedPath();
+            const shadowRoot = this.host.shadowRoot;
+            if (!shadowRoot)
+                return;
+            const dropdown = shadowRoot.querySelector('.co-phone-field__dropdown');
+            const selector = shadowRoot.querySelector('.co-phone-field__selector');
+            if (dropdown && path.includes(dropdown))
+                return;
+            if (selector && path.includes(selector))
+                return;
+            this.isOpen = false;
+            this.searchQuery = '';
+        };
+    }
+    get selectedEntry() {
+        var _a;
+        if (!this.selectedIso2)
+            return null;
+        return (_a = DIAL_CODE_MAP[this.selectedIso2]) !== null && _a !== void 0 ? _a : null;
+    }
+    get filteredCountries() {
+        if (!this.searchQuery.trim())
+            return DIAL_CODES;
+        return normalizeText.rankByMatch(DIAL_CODES, this.searchQuery, (d) => [d.name, d.dialCode, d.iso2]);
+    }
+    /** Country name with the matched substring wrapped for highlighting. */
+    renderName(name) {
+        const seg = this.searchQuery.trim() ? normalizeText.highlightMatch(name, this.searchQuery) : null;
+        if (!seg)
+            return name;
+        return [seg.pre, index.h("span", { class: "co-phone-field__match" }, seg.match), seg.post];
+    }
+    onValueChange(newVal) {
+        if (!newVal) {
+            this.numberPart = '';
+            return;
+        }
+        // Try to parse dial code from value.
+        const match = this.findDialCodeInValue(newVal);
+        if (match) {
+            this.selectedIso2 = match.iso2;
+            this.numberPart = newVal.slice(match.dialCode.length).trim();
+        }
+        else {
+            this.numberPart = newVal;
+        }
+    }
+    onDefaultCountryChange(iso2) {
+        if (DIAL_CODE_MAP[iso2] && !this.value) {
+            this.selectedIso2 = iso2;
+        }
+    }
+    componentWillLoad() {
+        if (this.defaultCountry && DIAL_CODE_MAP[this.defaultCountry]) {
+            this.selectedIso2 = this.defaultCountry;
+        }
+        if (this.value) {
+            this.onValueChange(this.value);
+        }
+    }
+    get hasCountry() {
+        return !!this.selectedIso2 && !!this.selectedEntry;
+    }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle',
+            success: 'check-circle',
+            warning: 'warning',
+            info: 'info',
+        };
+        return map[this.status] || null;
+    }
+    findDialCodeInValue(val) {
+        if (!val.startsWith('+'))
+            return null;
+        // Try longest matching dial code first (max 5 digits after +).
+        for (let len = 5; len >= 1; len--) {
+            const prefix = val.slice(0, len + 1); // includes '+'
+            const entry = DIAL_CODES.find((d) => d.dialCode === prefix);
+            if (entry)
+                return entry;
+        }
+        return null;
+    }
+    emitValue() {
+        var _a, _b;
+        const dialCode = (_b = (_a = this.selectedEntry) === null || _a === void 0 ? void 0 : _a.dialCode) !== null && _b !== void 0 ? _b : '';
+        const full = this.numberPart
+            ? `${dialCode}${this.numberPart}`
+            : '';
+        this.value = full;
+        this.coChange.emit(full);
+    }
+    handleCountrySelect(entry) {
+        this.selectedIso2 = entry.iso2;
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.emitValue();
+    }
+    handleNumberInput(e) {
+        const input = e.target;
+        this.numberPart = input.value;
+        this.emitValue();
+    }
+    handleToggleDropdown() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (!this.isOpen)
+            this.searchQuery = '';
+    }
+    handleSearchInput(e) {
+        this.searchQuery = e.target.value;
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleOutsideClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick, true);
+    }
+    render() {
+        const entry = this.selectedEntry;
+        const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
+        return (index.h("div", { key: '61e58d6f39daa5130148bb229fed15e3402a4987', class: `co-phone-field ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (index.h("label", { key: 'cc24f2c92d24fa66828268158193b9dd64d050ae', class: "co-phone-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'ff8ab5e5247eb30dff31dfcdd3c9ac2ac3bc8dfb', required: this.required }))), index.h("div", { key: '1b766042a786a1f22409951c97aabc6c7ab82f44', class: "co-phone-field__container" }, index.h("button", { key: 'db0a2cf11103634f0402e6c7a6c6aa1121bc403b', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (index.h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (index.h("co-icon", { name: "phone", size: 16 })), index.h("span", { key: '5ad781fe48f4e3f5c88a0cd9f4a92e69cebaf393', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), index.h("span", { key: '69d004f8325baca6373bd6e9550fde42ce2b7fbe', class: "co-phone-field__chevron" }, index.h("co-icon", { key: 'd2a2f07e9d3aa20a2eb3ad3408c06e6d3efc2e22', name: "caret-down", size: 14 }))), index.h("input", { key: '258f24c54235fc4a38ef5c2cf42d68f5a80b73a8', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (index.h("div", { key: 'c13b342deec9b8f6cc8c3da73858a9329de1e5c3', class: "co-phone-field__dropdown", role: "listbox" }, index.h("div", { key: '1f791495027ada8c1486e58b539867eb10554281', class: "co-phone-field__search" }, index.h("input", { key: '3ff02dd2e24efc501443c281ce93a96d4f4a3d7a', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), index.h("div", { key: '05109209b87485b0c1d84711eb7c1628d09a75f4', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (index.h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, index.h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), index.h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), index.h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (index.h("div", { key: 'deb3306ebdd5cf47f68f9e3c62f8a3e7570692a6', class: "co-phone-field__helper" }, this.statusIcon && (index.h("co-icon", { key: '5bc8a04b4d0690dcae07eb2f9296ff80da52a9a6', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), index.h("span", { key: '9d32dcb09ef84562bde2ccd0341dfca85a982000', class: "co-phone-field__helper-text" }, this.helperText)))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "defaultCountry": [{
+                "onDefaultCountryChange": 0
+            }]
+    }; }
+};
+CoPhoneField.style = coPhoneFieldCss();
+
+exports.co_phone_field = CoPhoneField;

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
-var positioning = require('./positioning-DozpXyBd.js');
+var index = require('./index-DoFnrUVH.js');
+var positioning = require('./positioning-DwHW399W.js');
 
 const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:visible}.co-popover__panel--positioned{visibility:visible}`;
 
@@ -192,12 +192,12 @@ const CoPopover = class {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (index.h("div", { key: 'a10448fae8b1ab711c359f7dc0c7a01432700638', class: "co-popover" }, index.h("div", { key: '4e42cabce7bb62a866b080870d31cb03ea62ccdf', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, index.h("slot", { key: 'a5d85e222124e3af63266e4b99b460d62581200b', name: "trigger" })), this.open && (index.h("div", { key: '9143a817e7b46b41ba393480743f3ca38e507a84', class: "co-popover__panel", ref: (el) => {
+        return (index.h("div", { key: '4a41d0ad2982a876a0363d16aa10fce661dfbe2f', class: "co-popover" }, index.h("div", { key: 'fa8d4ad46ca09489beeafeb9a08106c09c2c8d70', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, index.h("slot", { key: '820c4741ee9f6d2e3d171b25b987c174a523db89', name: "trigger" })), this.open && (index.h("div", { key: '8abfea810cc0a2041c1280594a0c5c2eb71b1fd8', class: "co-popover__panel", ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.scheduleUpdate();
                 }
-            } }, index.h("slot", { key: '6230166198f8d5535d5de3d9bdf4a4d8d0c82cb7' })))));
+            } }, index.h("slot", { key: '50632e7bb1cbb34b05cf5f6f0ba86d458a074bc0' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-progress-bar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coProgressBarCss = () => `:host{display:block;width:100%}.co-progress-bar{width:100%;border-radius:9999px;overflow:hidden;background:var(--co-semantic-border-subtle);position:relative}.co-progress-bar__fill{height:100%;border-radius:9999px;transition:width 0.3s ease}.co-progress-bar--solid .co-progress-bar__fill{background:var(--co-semantic-status-info)}.co-progress-bar--solid.co-progress-bar--success .co-progress-bar__fill{background:var(--co-semantic-status-success)}.co-progress-bar--solid.co-progress-bar--warning .co-progress-bar__fill{background:var(--co-semantic-status-warning)}.co-progress-bar--solid.co-progress-bar--error .co-progress-bar__fill{background:var(--co-semantic-status-error)}.co-progress-bar--dashed{background:transparent;border:2px dashed var(--co-semantic-border-subtle)}.co-progress-bar--dashed .co-progress-bar__fill{background:transparent;border-bottom:2px dashed var(--co-semantic-status-info);border-radius:0}.co-progress-bar--dashed.co-progress-bar--success .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-success)}.co-progress-bar--dashed.co-progress-bar--warning .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-warning)}.co-progress-bar--dashed.co-progress-bar--error .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-error)}.co-progress-bar--dashed.co-progress-bar--default{border-color:var(--co-semantic-border-muted)}`;
 
@@ -18,11 +18,11 @@ const CoProgressBar = class {
     }
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
-        return (index.h("div", { key: '5ab2dc67ce36b5a00d1dbd0b54360ff9dd627441', class: {
+        return (index.h("div", { key: '6d81d6941a783cbed036d81c4f0f9ffd2e5d504d', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
-            }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, index.h("div", { key: 'a4e85bcdae00711762b73619830b22e29957d3f6', class: "co-progress-bar__fill", style: { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, index.h("div", { key: '2a16b4532e464cf3bd2db8d809600b40d750b125', class: "co-progress-bar__fill", style: { width: `${clamped}%` } })));
     }
 };
 CoProgressBar.style = coProgressBarCss();

package/dist/cjs/co-progress-circle.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var index = require('./index-DoFnrUVH.js');
+
+const coProgressCircleCss = () => `:host{display:inline-flex}.co-progress-circle{--_color:var(--co-semantic-status-info, #2563eb);--_track:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08));position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:conic-gradient(     var(--_color) var(--co-pc-angle, 0deg),     var(--_track) var(--co-pc-angle, 0deg)   );transition:background 0.3s ease}.co-progress-circle__track{position:absolute;inset:var(--co-pc-stroke, 4px);border-radius:50%;background:var(--co-semantic-surface-page, #fff)}.co-progress-circle__label{position:relative;z-index:1;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-11, 11px);font-weight:600;color:var(--_color);line-height:1;pointer-events:none}.co-progress-circle--success{--_color:var(--co-semantic-status-success, #0a7724)}.co-progress-circle--warning{--_color:var(--co-semantic-status-warning, #f59e0b)}.co-progress-circle--error{--_color:var(--co-semantic-status-error, #aa2e1b)}`;
+
+const CoProgressCircle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Progress value 0-100 */
+        this.value = 0;
+        /** Status / color variant */
+        this.status = 'default';
+        /** Diameter of the circle in px */
+        this.size = 40;
+        /** Stroke width in px */
+        this.strokeWidth = 2;
+        /** Show percentage label inside */
+        this.showLabel = true;
+    }
+    render() {
+        const clamped = Math.max(0, Math.min(100, this.value));
+        const angle = (clamped / 100) * 360;
+        const safeStroke = Math.min(this.strokeWidth, this.size / 2);
+        return (index.h("div", { key: '992ae1f0476cad32f27779742265333134c31d2e', class: {
+                'co-progress-circle': true,
+                [`co-progress-circle--${this.status}`]: true,
+            }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                '--co-pc-angle': `${angle}deg`,
+                '--co-pc-stroke': `${safeStroke}px`,
+            } }, index.h("div", { key: 'f39ad29a8ef70bc4c7f6c6afbeb817b7d3b3fcdd', class: "co-progress-circle__track" }), this.showLabel && (index.h("span", { key: 'b639b4730e3707cfaa613057805c4a196cc584d1', class: "co-progress-circle__label" }, clamped, "%"))));
+    }
+};
+CoProgressCircle.style = coProgressCircleCss();
+
+exports.co_progress_circle = CoProgressCircle;

package/dist/cjs/co-radio-group.cjs.entry.js

@@ -1,13 +1,15 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
-const coRadioGroupCss = () => `: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-radio-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-radio-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-radio-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-radio-group--disabled .co-radio-group__label,.co-radio-group--disabled .co-radio-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-radio-group__options{display:flex;gap:var(--co-spacing-md)}.co-radio-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-radio-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-radio-group__item--disabled{cursor:not-allowed}.co-radio-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-radio-group__item--disabled .co-radio-group__option-label{color:var(--co-semantic-text-disabled)}.co-radio-group__circle{position:relative;display:inline-flex;align-items:center;justify-content:center;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color 0.15s ease;overflow:hidden}.co-radio-group__circle--small{width:16px;height:16px}.co-radio-group__circle--large{width:24px;height:24px}.co-radio-group__circle:not(.co-radio-group__circle--checked){border-color:var(--co-semantic-border-default)}.co-radio-group__circle--checked{border-color:var(--co-semantic-border-strong)}.co-radio-group__circle--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio-group__circle--small.co-radio-group__circle--checked::after{width:8px;height:8px}.co-radio-group__circle--large.co-radio-group__circle--checked::after{width:14px;height:14px}.co-radio-group__circle--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-radio-group--error .co-radio-group__circle{border-color:var(--co-semantic-status-error)}.co-radio-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-radio-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-radio-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-radio-group__helper--error .co-radio-group__helper-icon,.co-radio-group__helper--error .co-radio-group__helper-text{color:var(--co-semantic-status-error)}.co-radio-group__helper--success .co-radio-group__helper-icon,.co-radio-group__helper--success .co-radio-group__helper-text{color:var(--co-semantic-status-success)}.co-radio-group__helper--warning .co-radio-group__helper-icon,.co-radio-group__helper--warning .co-radio-group__helper-text{color:var(--co-color-status-review)}.co-radio-group__helper--info .co-radio-group__helper-icon,.co-radio-group__helper--info .co-radio-group__helper-text{color:var(--co-semantic-status-info)}`;
+const coRadioGroupCss = () => `: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-radio-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-radio-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-radio-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-radio-group--disabled .co-radio-group__label,.co-radio-group--disabled .co-radio-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-radio-group__options{display:flex;gap:var(--co-spacing-md)}.co-radio-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-radio-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-radio-group__item--disabled{cursor:not-allowed}.co-radio-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-radio-group__item--disabled .co-radio-group__option-label{color:var(--co-semantic-text-disabled)}.co-radio-group__circle{position:relative;display:inline-flex;align-items:center;justify-content:center;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color 0.15s ease;overflow:hidden}.co-radio-group__circle--small{width:16px;height:16px}.co-radio-group__circle--large{width:24px;height:24px}.co-radio-group__circle:not(.co-radio-group__circle--checked){border-color:var(--co-semantic-border-default)}.co-radio-group__circle--checked{border-color:var(--co-semantic-border-strong)}.co-radio-group__circle--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio-group__circle--small.co-radio-group__circle--checked::after{width:8px;height:8px}.co-radio-group__circle--large.co-radio-group__circle--checked::after{width:14px;height:14px}.co-radio-group__circle--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-radio-group--error .co-radio-group__circle{border-color:var(--co-semantic-status-error)}.co-radio-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-radio-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-radio-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-radio-group__helper--error .co-radio-group__helper-icon,.co-radio-group__helper--error .co-radio-group__helper-text{color:var(--co-semantic-status-error)}.co-radio-group__helper--success .co-radio-group__helper-icon,.co-radio-group__helper--success .co-radio-group__helper-text{color:var(--co-semantic-status-success)}.co-radio-group__helper--warning .co-radio-group__helper-icon,.co-radio-group__helper--warning .co-radio-group__helper-text{color:var(--co-color-status-review)}.co-radio-group__helper--info .co-radio-group__helper-icon,.co-radio-group__helper--info .co-radio-group__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-radio-group{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-radio-group__labels{grid-column:1;grid-row:1;padding-top:0;min-width:0}:host([layout='horizontal']) .co-radio-group__label{white-space:normal}:host([layout='horizontal']) .co-radio-group>:not(.co-radio-group__labels){grid-column:2;min-width:0}`;
 
 const CoRadioGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.coChange = index.createEvent(this, "coChange", 7);
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         /** Validation status */
         this.status = 'default';
         /**
@@ -64,11 +66,11 @@ const CoRadioGroup = class {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (index.h("div", { key: '6a875a097c5cb6fd75f956ffd451d94d4fc7c9c1', class: {
+        return (index.h("div", { key: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: '2ed50c07f0426ecc5e4a2bc109ecb8aacb29857d', class: "co-radio-group__labels" }, this.label && index.h("span", { key: '35e5f62b3814875586d980c13667d437a5c5aeba', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: 'a9b1be35040c5e5ada94b1f11777edb6b62894ab', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '09fb5ebf55964f5ddbb5f19399b1c0feea999e99', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: 'a6670dd8052801c17380161a875e5504c773f7cf', class: "co-radio-group__labels" }, this.label && index.h("span", { key: '2e11c6a1dc36e880975315147fd731a7811fd42f', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: 'cf844f3dfd22693afefb47bad0f467edd7e33329', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: 'e2650512d0b9c217f4d6f0c041157e546f582fa2', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -83,7 +85,7 @@ const CoRadioGroup = class {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), index.h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (index.h("div", { key: 'e11e7fb1b45e4da8833f0c3282663f336032cc09', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: 'f927971702b90722b92b827f52c4cb6411584db7', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), index.h("span", { key: 'b7440f200219b6ab6521f1bee1715fa7cd1ebeb9', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (index.h("div", { key: '8684377f807fe91a0d88337e61cb7c7de0226832', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: '2e12226109aec413ac76f71d0c32ac98f41b12f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), index.h("span", { key: 'e4d32771b3fe3a49ee1f907c0545fff31441e887', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coRadioCss = () => `:host{display:inline-flex;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-radio-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-radio-row--disabled{cursor:not-allowed}.co-radio__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-radio-row--disabled .co-radio__label{color:var(--co-semantic-text-disabled)}.co-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);outline:none;padding:0;background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color 0.15s ease;overflow:hidden}.co-radio--small{width:16px;height:16px}.co-radio--large{width:24px;height:24px}.co-radio:not(.co-radio--checked){border-color:var(--co-semantic-border-default)}.co-radio--checked{border-color:var(--co-semantic-border-strong)}.co-radio--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio--small.co-radio--checked::after{width:8px;height:8px}.co-radio--large.co-radio--checked::after{width:14px;height:14px}.co-radio--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
 
@@ -24,15 +24,15 @@ const CoRadio = class {
         };
     }
     render() {
-        return (index.h("div", { key: '1b0c0c230d757c32c176917be73288a333a6e3da', class: {
+        return (index.h("div", { key: '5fb19abe8e70008fffa64cd1bce654d7052e9d7d', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, index.h("button", { key: '189e5608b3bc05dff13bf0538c2ac0cd4a1fb09f', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, index.h("button", { key: 'f9fc1b87defc09feda1937643d34e3cfad9662ed', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (index.h("span", { key: 'bca38596d30ba104dc98fb47a0067c0932e6a139', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (index.h("span", { key: '3b4d359191f1dd87909ed760afd1ab86d9024162', class: "co-radio__label", part: "label" }, this.label))));
     }
 };
 CoRadio.style = coRadioCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coRatingCss = () => `:host{display:inline-block;font-family:var(--co-font-family-primary);line-height:1}.co-rating{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-rating__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;cursor:default;padding:0 var(--co-spacing-xs)}.co-rating--disabled .co-rating__label{color:var(--co-semantic-text-disabled)}.co-rating__stars{display:inline-flex;gap:var(--co-spacing-xs)}.co-rating__star{display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-border-subtle);transition:color 0.1s ease, transform 0.1s ease}.co-rating__star:hover:not(:disabled){transform:scale(1.15)}.co-rating__star--active{color:#F5A623;}.co-rating__star--hover{color:#F5A623}.co-rating--disabled .co-rating__star{cursor:not-allowed;opacity:0.5}.co-rating--readonly .co-rating__star{cursor:default}.co-rating__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-rating__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-rating__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-rating__helper--error .co-rating__helper-icon,.co-rating__helper--error .co-rating__helper-text{color:var(--co-semantic-status-error)}.co-rating__helper--success .co-rating__helper-icon,.co-rating__helper--success .co-rating__helper-text{color:var(--co-semantic-status-success)}.co-rating__helper--warning .co-rating__helper-icon,.co-rating__helper--warning .co-rating__helper-text{color:var(--co-color-status-review)}.co-rating__helper--info .co-rating__helper-icon,.co-rating__helper--info .co-rating__helper-text{color:var(--co-semantic-status-info)}`;
 
@@ -43,16 +43,16 @@ const CoRating = class {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (index.h("div", { key: '4c2c5b8f54ed3f49ec8e9d432e223d126ee4f946', class: {
+        return (index.h("div", { key: '67e3b30b95acbb48d96d572ac133b324b6872314', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && index.h("label", { key: '70bcf6917d40f33101a430419d7bc7def19632cd', class: "co-rating__label" }, this.label), index.h("div", { key: '89a03c91bc6ca3656172fdf8edcff7ad5a5054f4', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (index.h("button", { class: {
+            } }, this.label && index.h("label", { key: '06467dde87ab5b78e8db46bc7db542c57a58fcad', class: "co-rating__label" }, this.label), index.h("div", { key: '5a50067af1c8512c17ab787d156d214d3e8c7728', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (index.h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, index.h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (index.h("div", { key: 'beae1348592e8ced57592034aebd508086c4b9fb', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: 'fe2833e6d772511a14d05abc607ae22607bc077c', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), index.h("span", { key: '6a70587b62f3109c9b829fca66a3033922a386c3', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, index.h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (index.h("div", { key: 'f040eba3fd1edd6ed9c6d6387d96f7f910abb855', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '97603b28a2f29269f378af63324d706bf77e62ee', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), index.h("span", { key: '756b3518725bbfad6432907e78f4ced05add8700', class: "co-rating__helper-text" }, this.helperText)))));
     }
 };
 CoRating.style = coRatingCss();