@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/collection/components/co-transfer-list/co-transfer-list.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { initOverlayScroll } from "../../utils/overlayScroll";
 export class CoTransferList {
     constructor() {
         this.leftTitle = 'Available';
@@ -11,6 +12,7 @@ export class CoTransferList {
         this.status = 'default';
         this.leftChecked = new Set();
         this.rightChecked = new Set();
+        this.osInstances = [];
         this.toggleLeftCheck = (val) => {
             const next = new Set(this.leftChecked);
             if (next.has(val))
@@ -95,21 +97,31 @@ export class CoTransferList {
         return map[this.status] || null;
     }
     renderList(items, checked, toggle, title) {
-        return (h("div", { class: "co-transfer-list__panel" }, h("div", { class: "co-transfer-list__panel-header" }, h("span", { class: "co-transfer-list__panel-title" }, title), h("span", { class: "co-transfer-list__panel-count" }, items.length)), h("div", { class: "co-transfer-list__panel-body" }, items.length === 0 ? (h("div", { class: "co-transfer-list__empty" }, "No items")) : (items.map(item => (h("div", { class: {
+        return (h("div", { class: "co-transfer-list__panel" }, h("div", { class: "co-transfer-list__panel-header" }, h("span", { class: "co-transfer-list__panel-title" }, title), h("span", { class: "co-transfer-list__panel-count" }, items.length)), h("div", { class: "co-transfer-list__panel-body" }, h("div", { class: "co-transfer-list__panel-scroll" }, items.length === 0 ? (h("div", { class: "co-transfer-list__empty" }, "No items")) : (items.map(item => (h("div", { class: {
                 'co-transfer-list__item': true,
                 'co-transfer-list__item--checked': checked.has(item.value),
                 'co-transfer-list__item--disabled': !!item.disabled,
             }, onClick: () => !item.disabled && toggle(item.value) }, h("span", { class: {
                 'co-transfer-list__checkbox': true,
                 'co-transfer-list__checkbox--checked': checked.has(item.value),
-            } }, checked.has(item.value) && h("co-icon", { name: "check", size: 12 })), h("span", { class: "co-transfer-list__item-label" }, item.label))))))));
+            } }, checked.has(item.value) && h("co-icon", { name: "check", size: 12 })), h("span", { class: "co-transfer-list__item-label" }, item.label)))))))));
+    }
+    // Panels are always rendered, so init OverlayScrollbars once on both bodies.
+    componentDidLoad() {
+        var _a;
+        const bodies = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.co-transfer-list__panel-body');
+        bodies === null || bodies === void 0 ? void 0 : bodies.forEach((b) => this.osInstances.push(initOverlayScroll(b)));
+    }
+    disconnectedCallback() {
+        this.osInstances.forEach((i) => i.destroy());
+        this.osInstances = [];
     }
     render() {
-        return (h("div", { key: '0b3425fbb55ec96f309fdf391740ee14359034a4', class: {
+        return (h("div", { key: 'fd9cddc7be36b5acc9bc5852a9173b2ed950e529', class: {
                 'co-transfer-list': true,
                 'co-transfer-list--disabled': this.disabled,
                 [`co-transfer-list--${this.status}`]: this.status !== 'default',
-            } }, this.label && h("label", { key: '37c53632225953970667f84253d35877cf667e48', class: "co-transfer-list__label" }, this.label), h("div", { key: '3d94643dc2364cd339b55a37a5ea6b44937f668a', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: '5306033109d2312ed11d4ff53e24c8a3c4a580d5', class: "co-transfer-list__actions" }, h("button", { key: '45dd6be3e3dd75a4838448575ceb696943d4ec57', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: '80915bd7381bfbad9aa3212c4eb01fee2ba9867f', name: "caret-double-right", size: 16 })), h("button", { key: '4ded467eb23672b6b3b6253509c655c139d6059f', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: 'd0acc0b08bf6cb9097368db6a073a3351b08b80b', name: "caret-right", size: 16 })), h("button", { key: '7cff83ca213a328ea632de69193d586409be2fb7', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: 'f65dd14d1770c6550b7dec35a3efe7ce9fa602f4', name: "caret-left", size: 16 })), h("button", { key: 'f76511a8455733775e6ec9d9bda9a054fcc7d5b6', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: 'fa6258a00fa2c8bd74c6c0aba9dbf1d85e555bd4', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: 'abd0169f9dde72c0fabb0f05494f5b2b728eb097', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '6ec618da2807a84d80d398994952d0bc1e3ec3e8', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: 'dbeeea227af7e9bfaf3e64c8e1f7dc7b2a056e91', class: "co-transfer-list__helper-text" }, this.helperText)))));
+            } }, this.label && h("label", { key: '6bcde50bb852ee58443d44b43ce5d67ad425f013', class: "co-transfer-list__label" }, this.label), h("div", { key: '836b094c4ccf69d4cfbaace4283e87ec55c13d07', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: '8222a5f1207514f500e222a175ce9aef20e9df5f', class: "co-transfer-list__actions" }, h("button", { key: '21b61c709b1b66f293289fb8ae6e2e40fcdc1fb6', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: 'c575643b4988a6f36ce0b738a400d0f4270b339d', name: "caret-double-right", size: 16 })), h("button", { key: 'db88f4725eb0e8e0e9cd573bf4ee6613f9b752de', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: '789e6f0b3934a1ce571b1b24f78d215f263793b9', name: "caret-right", size: 16 })), h("button", { key: '72c2829abff4dc3453ccebb9846fb4b5b423a044', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: '2a77ca393a41134dd0b8befa085c1ff0caa050ef', name: "caret-left", size: 16 })), h("button", { key: '292bf6d2cc097523c6ea14a694cd134ed5526935', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: 'fc5f1f90f4eec18a4a3db20301a787280f77ba92', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: '112008f9b2f9ef0e72a4c3add8d89319fa5e1c89', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '712da720169f753bc161922edac625a44ea5e6d2', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: 'ad424d40bad49265e88cf3c0a524f74b5213e406', class: "co-transfer-list__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-transfer-list"; }
     static get encapsulation() { return "shadow"; }
@@ -315,4 +327,5 @@ export class CoTransferList {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/utils/dateI18n.js

@@ -0,0 +1,101 @@
+/**
+ * Built-in UI string dictionary for the date components (co-calendar,
+ * co-date-field, co-date-picker, co-date-range-picker).
+ *
+ * Strategy: the components ship es/en/pt strings keyed by the `locale` prop,
+ * with per-string prop overrides for full host control. Month/weekday NAMES and
+ * date order are NOT here — those come from `Intl` (locale-driven) in
+ * cobalt-date-utils. This dictionary is only for fixed UI text + aria labels.
+ */
+const DICT = {
+    es: {
+        prevMonth: 'Mes anterior',
+        nextMonth: 'Mes siguiente',
+        dateLabel: 'Fecha',
+        clearDate: 'Limpiar fecha',
+        today: 'Hoy',
+        yesterday: 'Ayer',
+        last7Days: 'Últimos 7 días',
+        last14Days: 'Últimos 14 días',
+        last30Days: 'Últimos 30 días',
+        last90Days: 'Últimos 90 días',
+        thisWeek: 'Esta semana',
+        thisMonth: 'Este mes',
+        lastMonth: 'Mes pasado',
+        thisYear: 'Este año',
+        lastYear: 'Año pasado',
+        custom: 'Personalizado',
+        apply: 'Aplicar',
+        cancel: 'Cancelar',
+        clear: 'Limpiar',
+        from: 'Desde',
+        to: 'Hasta',
+        selectDate: 'Seleccionar fecha',
+        setDate: 'Establecer fecha',
+    },
+    en: {
+        prevMonth: 'Previous month',
+        nextMonth: 'Next month',
+        dateLabel: 'Date',
+        clearDate: 'Clear date',
+        today: 'Today',
+        yesterday: 'Yesterday',
+        last7Days: 'Last 7 days',
+        last14Days: 'Last 14 days',
+        last30Days: 'Last 30 days',
+        last90Days: 'Last 90 days',
+        thisWeek: 'This week',
+        thisMonth: 'This month',
+        lastMonth: 'Last month',
+        thisYear: 'This year',
+        lastYear: 'Last year',
+        custom: 'Custom',
+        apply: 'Apply',
+        cancel: 'Cancel',
+        clear: 'Clear',
+        from: 'From',
+        to: 'To',
+        selectDate: 'Select date',
+        setDate: 'Set date',
+    },
+    pt: {
+        prevMonth: 'Mês anterior',
+        nextMonth: 'Próximo mês',
+        dateLabel: 'Data',
+        clearDate: 'Limpar data',
+        today: 'Hoje',
+        yesterday: 'Ontem',
+        last7Days: 'Últimos 7 dias',
+        last14Days: 'Últimos 14 dias',
+        last30Days: 'Últimos 30 dias',
+        last90Days: 'Últimos 90 dias',
+        thisWeek: 'Esta semana',
+        thisMonth: 'Este mês',
+        lastMonth: 'Mês passado',
+        thisYear: 'Este ano',
+        lastYear: 'Ano passado',
+        custom: 'Personalizado',
+        apply: 'Aplicar',
+        cancel: 'Cancelar',
+        clear: 'Limpar',
+        from: 'De',
+        to: 'Até',
+        selectDate: 'Selecionar data',
+        setDate: 'Definir data',
+    },
+};
+/** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */
+export function langFromLocale(locale) {
+    const l = (locale || '').toLowerCase();
+    if (l.startsWith('es'))
+        return 'es';
+    if (l.startsWith('pt'))
+        return 'pt';
+    if (l.startsWith('en'))
+        return 'en';
+    return 'en';
+}
+/** Resolve the built-in UI strings for a locale. */
+export function getDateStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}

package/dist/collection/utils/fileI18n.js

@@ -0,0 +1,76 @@
+/**
+ * Built-in UI string dictionary for co-file-field.
+ *
+ * Strategy mirrors dateI18n: the component ships es/en/pt strings keyed by the
+ * `locale` prop, with per-string prop overrides (uploadButtonText, dropText,
+ * uploadedTitle, helperText) for full host control. Templates use `{n}` (max
+ * files) and `{x}` (formatted max size) placeholders.
+ */
+const DICT = {
+    es: {
+        uploadButton: 'Cargar archivo',
+        dropHint: 'Arrastra y suelta archivos aquí',
+        helperBoth: 'Puedes subir hasta {n} archivos, cada uno hasta {x}',
+        helperFiles: 'Puedes subir hasta {n} archivos',
+        helperBytes: 'Cada archivo hasta {x}',
+        uploadedTitle: 'Archivos subidos',
+        removeFile: 'Eliminar archivo',
+        copyUrl: 'Copiar enlace',
+        copied: 'Copiado',
+        dragToReorder: 'Arrastra para reordenar',
+        openPreview: 'Abrir vista previa',
+        errInvalidFormat: 'Formato no permitido: .{x}',
+        errTooLarge: 'Archivo demasiado grande: {x}',
+        errMaxFiles: 'Puedes subir hasta {n} archivos',
+    },
+    en: {
+        uploadButton: 'Upload file',
+        dropHint: 'Drag and drop files here',
+        helperBoth: 'You can upload up to {n} files, each up to {x}',
+        helperFiles: 'You can upload up to {n} files',
+        helperBytes: 'Each file up to {x}',
+        uploadedTitle: 'Uploaded files',
+        removeFile: 'Remove file',
+        copyUrl: 'Copy link',
+        copied: 'Copied',
+        dragToReorder: 'Drag to reorder',
+        openPreview: 'Open preview',
+        errInvalidFormat: 'Invalid format: .{x}',
+        errTooLarge: 'File too large: {x}',
+        errMaxFiles: 'You can upload up to {n} files',
+    },
+    pt: {
+        uploadButton: 'Carregar arquivo',
+        dropHint: 'Arraste e solte arquivos aqui',
+        helperBoth: 'Você pode enviar até {n} arquivos, cada um até {x}',
+        helperFiles: 'Você pode enviar até {n} arquivos',
+        helperBytes: 'Cada arquivo até {x}',
+        uploadedTitle: 'Arquivos enviados',
+        removeFile: 'Remover arquivo',
+        copyUrl: 'Copiar link',
+        copied: 'Copiado',
+        dragToReorder: 'Arraste para reordenar',
+        openPreview: 'Abrir pré-visualização',
+        errInvalidFormat: 'Formato inválido: .{x}',
+        errTooLarge: 'Arquivo muito grande: {x}',
+        errMaxFiles: 'Você pode enviar até {n} arquivos',
+    },
+};
+/** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */
+export function langFromLocale(locale) {
+    const l = (locale || '').toLowerCase();
+    if (l.startsWith('es'))
+        return 'es';
+    if (l.startsWith('pt'))
+        return 'pt';
+    return 'en';
+}
+/** Resolve the built-in UI strings for a locale. */
+export function getFileStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}
+/** Fill the `{n}` / `{x}` placeholders of a template string. */
+export function fillTemplate(tpl, vars) {
+    var _a, _b;
+    return tpl.replace('{n}', String((_a = vars.n) !== null && _a !== void 0 ? _a : '')).replace('{x}', (_b = vars.x) !== null && _b !== void 0 ? _b : '');
+}

package/dist/collection/utils/icon-config.js

@@ -0,0 +1,22 @@
+const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
+/**
+ * Override the base URL used by `<co-icon>` to resolve Phosphor SVG assets.
+ *
+ * Call once at app startup before any icon renders.
+ * The path should point to a directory containing `regular/`, `bold/`, `fill/`, etc.
+ * A trailing slash is optional — it will be normalized.
+ *
+ * @example
+ * // Serve icons from your own public folder:
+ * setIconBasePath('/phosphor')
+ *
+ * // Or from a custom CDN:
+ * setIconBasePath('https://my-cdn.com/phosphor-icons/2.1.1/assets')
+ */
+export function setIconBasePath(path) {
+    globalThis.__cobaltIconBasePath = path.endsWith('/') ? path.slice(0, -1) : path;
+}
+/** Returns the current icon base path (default: jsDelivr CDN). */
+export function getIconBasePath() {
+    return globalThis.__cobaltIconBasePath || CDN_BASE;
+}

package/dist/collection/utils/lightboxI18n.js

@@ -0,0 +1,42 @@
+/**
+ * Built-in UI string dictionary for co-lightbox (aria labels + tooltips).
+ * Same strategy as dateI18n/fileI18n: ships es/en/pt keyed by the `locale`
+ * prop. The `counter` template uses `{i}` / `{n}` placeholders.
+ */
+import { langFromLocale } from "./dateI18n";
+const DICT = {
+    es: {
+        close: 'Cerrar visor',
+        prevImage: 'Imagen anterior',
+        nextImage: 'Imagen siguiente',
+        zoomIn: 'Acercar',
+        zoomOut: 'Alejar',
+        zoomReset: 'Restablecer zoom',
+        openOriginal: 'Abrir original',
+        counter: '{i} de {n}',
+    },
+    en: {
+        close: 'Close viewer',
+        prevImage: 'Previous image',
+        nextImage: 'Next image',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        zoomReset: 'Reset zoom',
+        openOriginal: 'Open original',
+        counter: '{i} of {n}',
+    },
+    pt: {
+        close: 'Fechar visualizador',
+        prevImage: 'Imagem anterior',
+        nextImage: 'Próxima imagem',
+        zoomIn: 'Aproximar',
+        zoomOut: 'Afastar',
+        zoomReset: 'Redefinir zoom',
+        openOriginal: 'Abrir original',
+        counter: '{i} de {n}',
+    },
+};
+/** Resolve the built-in UI strings for a locale. */
+export function getLightboxStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}

package/dist/collection/utils/normalizeText.js

@@ -0,0 +1,94 @@
+/**
+ * Text normalization for accent/case-insensitive matching, shared by every
+ * component that filters options by a typed query (co-select, co-combobox,
+ * co-sidebar-nav, co-command-search, co-phone-field, co-column-picker).
+ *
+ * Strips diacritics via NFD decomposition + combining-mark removal so "mexico"
+ * matches "México", "espana" matches "España" and "camerun" matches
+ * "Camerún", then lowercases. Single source of truth.
+ */
+export function normalizeText(str) {
+    return String(str !== null && str !== void 0 ? str : "")
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .toLowerCase();
+}
+/** Diacritic/case-insensitive substring test (`needle` found in `haystack`). */
+export function textIncludes(haystack, needle) {
+    return normalizeText(haystack).includes(normalizeText(needle));
+}
+/**
+ * Relevance score of `query` against `label` (diacritic/case-insensitive):
+ *   4 = exact · 3 = label starts with query · 2 = a word in the label starts
+ *   with query · 1 = substring anywhere · 0 = no match.
+ * An empty query scores 1 (neutral). Used to rank autocomplete results so
+ * "me" surfaces "México" above "Camerún".
+ */
+export function matchScore(label, query) {
+    const l = normalizeText(label);
+    const q = normalizeText(query).trim();
+    if (!q)
+        return 1;
+    if (l === q)
+        return 4;
+    if (l.startsWith(q))
+        return 3;
+    if (l.split(/[\s,/()\-]+/).some((w) => w.startsWith(q)))
+        return 2;
+    if (l.includes(q))
+        return 1;
+    return 0;
+}
+/**
+ * Split `label` into the segment before / matching / after the first
+ * (diacritic/case-insensitive) occurrence of `query`, for highlighting. The
+ * returned slices come from the ORIGINAL label (accents intact) — we map the
+ * match position from the normalized string back to original codepoints, since
+ * stripping diacritics can shift indices. Returns null when there is no match
+ * or the query is empty.
+ */
+export function highlightMatch(label, query) {
+    const q = normalizeText(query);
+    if (!q)
+        return null;
+    const chars = Array.from(String(label !== null && label !== void 0 ? label : '')); // codepoint-safe
+    let norm = '';
+    const map = []; // map[normIndex] -> original codepoint index
+    chars.forEach((ch, i) => {
+        const n = normalizeText(ch);
+        for (let k = 0; k < n.length; k++)
+            map.push(i);
+        norm += n;
+    });
+    const start = norm.indexOf(q);
+    if (start < 0)
+        return null;
+    const a = map[start];
+    const b = map[start + q.length - 1] + 1;
+    return {
+        pre: chars.slice(0, a).join(''),
+        match: chars.slice(a, b).join(''),
+        post: chars.slice(b).join(''),
+    };
+}
+/**
+ * Filter `items` to those matching `query` and sort by relevance (best first),
+ * stable within a score tier (original order preserved on ties). `getText`
+ * returns the text to match — a string, or an array of fields (the best score
+ * across them wins, e.g. a country's name + dial code + ISO). Empty query
+ * returns the list unchanged.
+ */
+export function rankByMatch(items, query, getText) {
+    if (!normalizeText(query).trim())
+        return items;
+    const scoreOf = (item) => {
+        const text = getText(item);
+        const fields = Array.isArray(text) ? text : [text];
+        return Math.max(0, ...fields.map((f) => matchScore(f, query)));
+    };
+    return items
+        .map((item, i) => ({ item, i, score: scoreOf(item) }))
+        .filter((s) => s.score > 0)
+        .sort((a, b) => b.score - a.score || a.i - b.i)
+        .map((s) => s.item);
+}

package/dist/collection/utils/overlayScroll.js

@@ -0,0 +1,20 @@
+import { OverlayScrollbars } from "overlayscrollbars";
+/**
+ * Initialize a floating, auto-hide OverlayScrollbars instance on `target`.
+ * Shared by co-* components so the theme/behavior stays consistent and the
+ * fiddly init config lives in one place.
+ *
+ * The scrollbar overlays the content (no reserved gutter) and scrolls natively
+ * under the hood — so virtual/infinite scrolling keeps working. `onScroll`
+ * receives the OS viewport element: read `scrollTop` / `scrollHeight` /
+ * `clientHeight` from IT (OS moves the real scrolling there, so a native
+ * `onScroll` on the host no longer fires).
+ *
+ * Requires the OverlayScrollbars CSS + the `.os-scrollbar.os-theme-co` theme to
+ * be present in the component's shadow root (each co-* CSS @imports them).
+ */
+export function initOverlayScroll(target, onScroll) {
+    return OverlayScrollbars(target, { scrollbars: { theme: 'os-theme-co', autoHide: 'leave', autoHideDelay: 300 } }, onScroll
+        ? { scroll: (instance) => onScroll(instance.elements().viewport) }
+        : undefined);
+}

package/dist/collection/utils/positioning.js

@@ -61,7 +61,7 @@ export function computePosition(triggerRect, panelRect, options) {
             left = triggerRect.right + offset;
         else
             left = triggerRect.left - panelRect.width - offset;
-        const align = placement.split('-')[1] || 'start';
+        const align = placement.split('-')[1] || 'center';
         if (align === 'start')
             top = triggerRect.top;
         else if (align === 'end')
@@ -74,7 +74,7 @@ export function computePosition(triggerRect, panelRect, options) {
             top = triggerRect.top - panelRect.height - offset;
         else
             top = triggerRect.bottom + offset;
-        const align = placement.split('-')[1] || 'start';
+        const align = placement.split('-')[1] || 'center';
         if (align === 'start')
             left = triggerRect.left;
         else if (align === 'end')
@@ -96,8 +96,8 @@ export function computePosition(triggerRect, panelRect, options) {
  * Walk up the FLATTENED tree (after slot projection) to find the nearest
  * ancestor that creates a containing block for `position: fixed`. Per CSS spec,
  * `transform`, `perspective`, `filter`, `backdrop-filter`,
- * `contain: paint|layout|strict|content`, or `will-change: transform` all trap
- * `position: fixed`.
+ * `contain: paint|layout|strict|content`, `will-change: transform`, or
+ * `container-type` (size | inline-size) all trap `position: fixed`.
  *
  * The flattened tree differs from the DOM tree in two places:
  *   1. Shadow boundaries: `parentElement` stops at the shadow root, so we
@@ -106,23 +106,30 @@ export function computePosition(triggerRect, panelRect, options) {
  *      INSIDE the host's shadow, not its DOM parent. We use `assignedSlot`
  *      to follow that projection.
  */
-export function getOffsetAncestor(el) {
-    const next = (n) => {
-        var _a, _b;
-        if (!n)
-            return null;
-        const assignedSlot = n.assignedSlot;
-        if (assignedSlot)
-            return assignedSlot.parentElement;
-        const parent = n.parentElement;
-        if (parent)
-            return parent;
-        const root = (_b = (_a = n).getRootNode) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (root instanceof ShadowRoot)
-            return root.host;
+/**
+ * Step to the next ancestor in the FLATTENED tree (slot projection + shadow
+ * boundaries), so traversal works for elements slotted into a shadow-DOM host:
+ *   1. `assignedSlot` → the slot's parent inside the host's shadow (projection).
+ *   2. light-DOM `parentElement`.
+ *   3. at a shadow root top, cross to the host element.
+ */
+function flattenedParent(n) {
+    var _a, _b;
+    if (!n)
         return null;
-    };
-    let node = next(el);
+    const assignedSlot = n.assignedSlot;
+    if (assignedSlot)
+        return assignedSlot.parentElement;
+    const parent = n.parentElement;
+    if (parent)
+        return parent;
+    const root = (_b = (_a = n).getRootNode) === null || _b === void 0 ? void 0 : _b.call(_a);
+    if (root instanceof ShadowRoot)
+        return root.host;
+    return null;
+}
+export function getOffsetAncestor(el) {
+    let node = flattenedParent(el);
     while (node && node !== document.body && node !== document.documentElement) {
         const style = getComputedStyle(node);
         const transform = style.transform && style.transform !== 'none';
@@ -131,23 +138,31 @@ export function getOffsetAncestor(el) {
         const backdropFilter = style.backdropFilter && style.backdropFilter !== 'none';
         const willChange = (style.willChange || '').includes('transform');
         const contain = /paint|layout|strict|content/.test(style.contain || '');
-        if (transform || perspective || filter || backdropFilter || willChange || contain) {
+        const containerType = style.containerType && style.containerType !== 'normal';
+        if (transform || perspective || filter || backdropFilter || willChange || contain || containerType) {
             return node;
         }
-        node = next(node);
+        node = flattenedParent(node);
     }
     return null;
 }
 /**
  * Find the nearest ancestor of `start` that scrolls (overflow).
+ *
+ * Walks the FLATTENED tree (via {@link flattenedParent}) so it can reach a
+ * scroll container that lives in an ancestor's shadow DOM — e.g. `co-popover`
+ * slotted into a `<co-drawer>`/`<co-modal>` whose `__body` (the actual scroller)
+ * is inside the host's shadow. A plain `parentNode` walk never reaches it, which
+ * left popovers detached on modal-body scroll (scroll events are not composed,
+ * so the window capture listener never sees them either).
  */
 export function findNearestScrollParent(start) {
-    let node = start.parentElement;
-    while (node && node !== document.body) {
+    let node = flattenedParent(start);
+    while (node && node !== document.body && node !== document.documentElement) {
         if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
             return node;
         }
-        node = node.parentElement;
+        node = flattenedParent(node);
     }
     return null;
 }

package/dist/collection/utils/requiredMark.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+/**
+ * Shared required-field indicator for every co-* form field, so they all render
+ * the same `* (required)` marker. The asterisk is literal; the "(required)"
+ * caption text comes from the `--co-field-required-text` CSS custom property
+ * (host app sets it per locale) with an English fallback. Styling lives in the
+ * `.co-field-required` / `.co-field-required__caption` rules each component's
+ * CSS carries (next to the `::before` content rule) — NOT inline, so hosts can
+ * restyle via `::part(required)`.
+ */
+export const RequiredMark = ({ required }) => required ? (h("span", { class: "co-field-required", part: "required" }, "*", h("span", { class: "co-field-required__caption" }))) : null;

package/dist/components/co-accordion.js

@@ -1 +1 @@
-import{t as o,p as e,H as c,c as a,h as i}from"./index.js";import{d as t}from"./p-wwWquAtm.js";const n=e(class extends c{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.coToggle=a(this,"coToggle",7),this.open=!0,this.heading="",this.disabled=!1,this.handleToggle=()=>{this.disabled||(this.open=!this.open,this.coToggle.emit(this.open))}}render(){return i("div",{key:"f26b3ecda6d8b4f2b6b6be847608656cb9f39a1a",class:{"co-accordion":!0,"co-accordion--open":this.open,"co-accordion--disabled":this.disabled},part:"accordion"},i("button",{key:"4e031dbd0f54f6aaba81af805a10971e3c15b266",class:"co-accordion__header",type:"button","aria-expanded":this.open?"true":"false",disabled:this.disabled,onClick:this.handleToggle,part:"header"},i("span",{key:"f1c3d6fb96d2c4f047018865fc566e0d9e1f7085",class:"co-accordion__heading",part:"heading"},i("slot",{key:"6fe9f7496141b7e12ea640e3b3d94c844815a258",name:"header"},this.heading)),i("span",{key:"0b041a19ae47c17daca2a88abfb7a8bc83efecdc",class:"co-accordion__caret",part:"caret"},i("co-icon",{key:"3d9038651feadb75ec318e85dc22631a0584822d",name:"caret-up",size:20}))),i("div",{key:"25ce0b4ac40a0fdc861ba20aa9999d6d2aeb67b0",class:"co-accordion__body",part:"body"},i("div",{key:"9853aa5532e37f9298fcaf1472026c810ecfc870",class:"co-accordion__body-inner",part:"body-inner"},i("slot",{key:"b08e3121381eb7a9052476deee507e2f2d577980"}))))}static get style(){return":host{display:block}.co-accordion{display:flex;flex-direction:column;width:100%}.co-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:none;background:transparent;cursor:pointer;font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);text-align:left}.co-accordion__heading{flex:1;font-size:var(--co-font-size-24);font-weight:500;line-height:1.25;letter-spacing:-0.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__caret{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--co-semantic-text-default);transition:transform 0.2s ease;transform:rotate(180deg);}.co-accordion--open .co-accordion__caret{transform:rotate(0deg);}.co-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease}.co-accordion__body-inner{min-height:0;overflow:hidden;padding-top:var(--co-spacing-2xl);}.co-accordion--open .co-accordion__body{grid-template-rows:1fr}.co-accordion:not(.co-accordion--open) .co-accordion__body-inner{visibility:hidden;transition:visibility 0s linear 0.25s}.co-accordion--open .co-accordion__body-inner{visibility:visible;transition:visibility 0s linear 0s}.co-accordion__header:focus-visible{outline:2px solid var(--co-color-primary-azul, #2563eb);outline-offset:4px;border-radius:var(--co-border-radius-xs, 8px)}.co-accordion--disabled .co-accordion__header{opacity:0.5;cursor:not-allowed}"}},[257,"co-accordion",{open:[1540],heading:[1],disabled:[4]}]);function r(){"undefined"!=typeof customElements&&["co-accordion","co-icon"].forEach((e=>{switch(e){case"co-accordion":customElements.get(o(e))||customElements.define(o(e),n);break;case"co-icon":customElements.get(o(e))||t()}}))}r();const d=n,s=r;export{d as CoAccordion,s as defineCustomElement}
+import{t as e,p as o,H as c,c as i,h as a}from"./index.js";import{d as t}from"./p-DPi_U-Kl.js";const n=o(class extends c{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coToggle=i(this,"coToggle",7),this.open=!0,this.heading="",this.subheading="",this.disabled=!1,this.hasSubheadingSlot=!1,this.handleToggle=()=>{this.disabled||(this.open=!this.open,this.coToggle.emit(this.open))}}componentWillLoad(){this.hasSubheadingSlot=!!this.el.querySelector('[slot="subheading"]')}componentWillRender(){this.hasSubheadingSlot=!!this.el.querySelector('[slot="subheading"]')}get showSubheading(){return!(!this.subheading||!this.subheading.trim())||this.hasSubheadingSlot}render(){return a("div",{key:"6a6073c42e0e0d7c1949717e702af49a174c5cc7",class:{"co-accordion":!0,"co-accordion--open":this.open,"co-accordion--disabled":this.disabled},part:"accordion"},a("button",{key:"e69c8e0b9d9aacc0c4fea50a9b4e85d0bbeec961",class:"co-accordion__header",type:"button","aria-expanded":this.open?"true":"false",disabled:this.disabled,onClick:this.handleToggle,part:"header"},a("span",{key:"75037112bc403bf5887aec00bd815aff57b8d9f0",class:"co-accordion__heading-group"},a("span",{key:"f91d04da6b694bf7187a58d197e255c31e036d37",class:"co-accordion__heading",part:"heading"},a("slot",{key:"186f0c02cb8648d2d9d5e7b87684518d78f915e7",name:"header"},this.heading)),this.showSubheading&&a("span",{key:"6a44307de2f0f83b26b6e0f40460847f648cf868",class:"co-accordion__subheading",part:"subheading"},a("slot",{key:"0586b988ed182b936398c618ecc33d32e64e60e3",name:"subheading"},this.subheading))),a("span",{key:"a3665b1f92145c6b3d61a9814238635a8c269bdc",class:"co-accordion__caret",part:"caret"},a("co-icon",{key:"e1a4d45ae4fe6cdce335f609c737ca5647269733",name:"caret-up",size:20}))),a("div",{key:"fe2829a080e937dbd7c1dfd966b42e33ac0fb461",class:"co-accordion__body",part:"body"},a("div",{key:"499715f298ce7f6fa027702c3856e6eecf20c870",class:"co-accordion__body-inner",part:"body-inner"},a("slot",{key:"bfd0303f4c7bd1b47a5fce8bfe8acfcc77f0b6ff"}))))}get el(){return this}static get style(){return":host{display:block}.co-accordion{display:flex;flex-direction:column;width:100%}.co-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:none;background:transparent;cursor:pointer;font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);text-align:left}.co-accordion__heading-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px)}.co-accordion__heading{font-size:var(--co-font-size-24);font-weight:500;line-height:1.25;letter-spacing:-0.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__subheading{font-size:var(--co-font-size-14);font-weight:400;line-height:1.3;letter-spacing:normal;color:var(--co-semantic-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__caret{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--co-semantic-text-default);transition:transform 0.2s ease;transform:rotate(180deg);}.co-accordion--open .co-accordion__caret{transform:rotate(0deg);}.co-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease}.co-accordion__body-inner{min-height:0;overflow:hidden;padding-top:var(--co-spacing-2xl);}.co-accordion--open .co-accordion__body{grid-template-rows:1fr}.co-accordion:not(.co-accordion--open) .co-accordion__body-inner{visibility:hidden;transition:visibility 0s linear 0.25s}.co-accordion--open .co-accordion__body-inner{visibility:visible;transition:visibility 0s linear 0s}.co-accordion__header:focus-visible{outline:2px solid var(--co-color-primary-azul, #2563eb);outline-offset:4px;border-radius:var(--co-border-radius-xs, 8px)}.co-accordion--disabled .co-accordion__header{opacity:0.5;cursor:not-allowed}"}},[257,"co-accordion",{open:[1540],heading:[1],subheading:[1],disabled:[4],hasSubheadingSlot:[32]}]);function s(){"undefined"!=typeof customElements&&["co-accordion","co-icon"].forEach((o=>{switch(o){case"co-accordion":customElements.get(e(o))||customElements.define(e(o),n);break;case"co-icon":customElements.get(e(o))||t()}}))}s();const r=n,d=s;export{r as CoAccordion,d as defineCustomElement}