wj-elements 0.3.8 → 0.4.1

package/dist/wje-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n *\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @slot - The avatar main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty --wje-avatar-width;\n * @cssproperty --wje-avatar-height;\n * @cssproperty --wje-avatar-font-size;\n * @cssproperty --wje-avatar-font-weight;\n * @cssproperty --wje-avatar-color;\n * @cssproperty --wje-avatar-background-color;\n * @cssproperty --wje-avatar-border-radius;\n * @cssproperty --wje-avatar-border-color;\n * @cssproperty --wje-avatar-border-width;\n * @cssproperty --wje-avatar-border-style;\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials', 'label'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' || name === 'initials') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        if (label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n *\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @attribute {boolean} initials - Renders generated initials from `label` instead of the default slotted content.\n * @attribute {string} label - Provides the source text for generated initials and the accessible label of the avatar.\n * @attribute {string} size - Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.\n * @attribute {string} status-placement - Positions the `status` slot on one of the avatar corners.\n * @slot default - Slot for the main avatar content, typically an image.\n * @slot icon - Slot for an icon rendered inside the avatar.\n * @slot status - Slot for a status badge or indicator positioned on the avatar edge.\n * @slot secondary - Slot for additional secondary content rendered with the avatar.\n * @csspart native - The component's native wrapper.\n * @csspart status - The positioned slot container for status content.\n * @csspart secondary - The slot container for secondary avatar content.\n * @cssproperty [--wje-avatar-size] - Controls the overall rendered size of the avatar shell.\n * @cssproperty [--wje-avatar-font-size] - Controls the font size used for initials and text content.\n * @cssproperty [--wje-avatar-font-weight] - Controls the font weight used for initials and text content.\n * @cssproperty [--wje-avatar-color] - Controls the text color inside the avatar.\n * @cssproperty [--wje-avatar-background-color] - Controls the background color of the avatar surface.\n * @cssproperty [--wje-avatar-border-radius] - Controls the avatar border radius.\n * @cssproperty [--wje-avatar-border-color] - Controls the avatar border color when a border is applied.\n * @cssproperty [--wje-avatar-border-width] - Controls the avatar border width when a border is applied.\n * @cssproperty [--wje-avatar-border-style] - Controls the avatar border style when a border is applied.\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials', 'label'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' || name === 'initials') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        if (label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":";;;;AAuCO,SAAS,gBAAgB,MAAM;AAClC,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,KAAI,6BAAM,SAAQ,KAAK;AACnC,WAAO,KAAK,WAAW,CAAC,IAAI,OAAO;AAAA,EACvC;AAEA,QAAM,IAAI,KAAK,IAAI,IAAI,IAAI;AAG3B,QAAM,MAAM;AACZ,QAAM,MAAM;AAGZ,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO;AAAA,IACH,YAAY,OAAO,CAAC,KAAK,GAAG,MAAM,GAAG;AAAA,IACrC,OAAO,OAAO,CAAC,KAAK,KAAK,MAAM,KAAK;AAAA,EAC5C;AACA;AAsBO,SAAS,YAAY,QAAQ,SAAS,GAAG;AAC5C,MAAI,QAAQ,OAAO,MAAM,GAAG;AAC5B,MAAI,WAAW,MAAM,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,YAAW;AAEnD,MAAI,MAAM,SAAS,KAAK,SAAS,GAAG;AAChC,gBAAY,MAAM,MAAM,SAAS,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,YAAW;AAAA,EACnE;AACA,SAAO;AACX;;AC1De,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAK;AAyDT;AAAA;AAAA;AAAA,qCAAY;AAAA,EAxDZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,EAAE;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,YAAY,OAAO;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA,EAEA,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AACjD,QAAI,SAAS,WAAW,SAAS,YAAY;AACzC,WAAK,SAAQ;AAAA,IACjB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,eAAe;AAErC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,YAAY,IAAI;AAExB,QAAI,KAAK,UAAU;AACf,UAAI,WAAW,YAAY,KAAK,KAAK;AACrC,YAAM,EAAE,YAAY,UAAU,gBAAgB,QAAQ;AAEtD,WAAK,MAAM,YAAY,iCAAiC,UAAU;AAClE,WAAK,MAAM,YAAY,sBAAsB,KAAK;AAElD,cAAQ,YAAY;AAAA,IACxB,OAAO;AACH,UAAI,WAAW,SAAS,cAAc,MAAM;AAC5C,eAAS,aAAa,QAAQ,MAAM;AAEpC,cAAQ,YAAY,QAAQ;AAAA,IAChC;AAEA,QAAI,SAAS,SAAS,cAAc,MAAM;AAC1C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,WAAW;AAC1C,cAAU,aAAa,QAAQ,WAAW;AAE1C,YAAQ,YAAY,MAAM;AAC1B,YAAQ,YAAY,SAAS;AAE7B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;;AACP,UAAM,SAAQ,UAAK,UAAL,mBAAY;AAC1B,QAAI,OAAO;AACP,WAAK,aAAa,EAAE,OAAO;AAAA,IAC/B;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACN,WAAO,KAAK,qBAAqB,SAAS,EAAE,SAAS;AAAA,EACzD;AACJ;AC1LA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-button.js

@@ -11,7 +11,7 @@ var _Button_instances, populateCustomEvent_fn;
 import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
 import { bool } from "./utils.js";
 import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-DVyMc4Wv.js";
+import { I as Icon } from "./icon-CReYMzAK.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-5);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n}\n\n:host {\n    --wje-padding-top: 0.4rem;\n    --wje-padding-start: 0.5rem;\n    --wje-padding-end: 0.5rem;\n    --wje-padding-bottom: 0.4rem;\n\n    display: inline-flex;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n    display: block;\n}\n\n.native-button {\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n    border-width: var(--wje-button-border-width);\n    border-style: var(--wje-button-border-style);\n    border-color: var(--wje-button-border-color);\n    background-color: transparent;\n    /*color: var(--wje-button-color);*/\n    line-height: 1;\n    contain: layout style;\n    cursor: pointer;\n    z-index: 0;\n    box-sizing: border-box;\n    appearance: none;\n    margin: 0;\n    border-radius: var(--wje-button-border-radius);\n    padding-top: var(--wje-padding-top);\n    padding-bottom: var(--wje-padding-bottom);\n    padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n    white-space: nowrap;\n}\n\n.native-button:hover {\n    outline-style: solid;\n    outline-width: var(--wje-button-outline-width);\n    transition: outline-width 0.1s linear;\n}\n\n@media (any-hover: hover) {\n    .wje-button-solid.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-9);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-outline.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-primary-9);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-link.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: transparent;\n        color: var(--wje-color-primary-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-9);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-outline.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-complete-9);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-link.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: transparent;\n        color: var(--wje-color-complete-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-success:hover {\n        background-color: var(--wje-color-success-9);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-outline.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-success-9);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-link.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: transparent;\n        color: var(--wje-color-success-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-9);\n        border-color: var(--wje-color-warning-9);\n        color: var(--wje-color-black);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-outline.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: var(--wje-color-warning-11);\n        color: var(--wje-color-warning-11);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-link.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: transparent;\n        color: var(--wje-color-warning-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-9);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-outline.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-danger-9);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-link.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: transparent;\n        color: var(--wje-color-danger-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-9);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-1);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-9);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-0);\n        border-color: var(--wje-color-contrast-3);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-2);\n        border-color: var(--wje-color-contrast-5);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n}\n\n.button-inner {\n    display: flex;\n    position: relative;\n    flex-flow: row nowrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n    border-width: var(--wje-button-border-width);\n    border-radius: var(--wje-button-border-radius);\n    border-color: transparent;\n    background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n    border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n    border-radius: var(--wje-border-radius-circle);\n    aspect-ratio: 1/1;\n    width: 1.988rem;\n    display: flex;\n    align-items: center;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='small']) .native-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n}\n\n:host([size='large']) .native-button {\n    --wje-padding-top: 0.6rem;\n    --wje-padding-start: 0.7rem;\n    --wje-padding-end: 0.7rem;\n    --wje-padding-bottom: 0.6rem;\n}\n\n:host([size='small'][circle]) .native-button {\n    width: 1.688rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='large'][circle]) .native-button {\n    width: 2.388rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name='caret'] {\n    padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) {\n    .native-button {\n        aspect-ratio: 1/1;\n        width: 1.988rem;\n        display: flex;\n        align-items: center;\n    }\n    slot[name='caret'] {\n        padding: 0;\n        display: block;\n    }\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";

package/dist/wje-carousel-item.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Carousel Item ]\n*/\n\n:host {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    width: var(--wje-carousel-size, 100%);\n    max-height: 100%;\n    aspect-ratio: var(--wje-carousel-item-aspect-ratio);\n    scroll-snap-align: center;\n    scroll-snap-stop: always;\n}\n\n.native-carousel-item {\n    width: 100%;\n    height: 100%;\n    display: flex;\n}\n::slotted(wje-img) {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: contain;\n    display: flex;\n}\n";
+const styles = "/*\n[ WJ Carousel Item ]\n*/\n\n:host {\n    display: flex;\n    align-items: stretch;\n    justify-content: flex-start;\n    flex-direction: column;\n    width: var(--wje-carousel-item-basis, var(--wje-carousel-size, 100%));\n    min-width: 0;\n    max-width: 100%;\n    max-height: 100%;\n    align-self: stretch;\n    aspect-ratio: var(--wje-carousel-item-aspect-ratio, inherit);\n    scroll-snap-align: start;\n    scroll-snap-stop: always;\n    box-sizing: border-box;\n}\n\n.native-carousel-item {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex: 1 1 auto;\n    align-items: stretch;\n    justify-content: flex-start;\n    min-width: 0;\n    box-sizing: border-box;\n}\n\nslot {\n    display: flex;\n    width: 100%;\n    height: 100%;\n    flex: 1 1 auto;\n    align-items: stretch;\n    justify-content: center;\n    min-width: 0;\n}\n\n:host([single-content]) ::slotted(*) {\n    width: 100%;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n::slotted(wje-img) {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: contain;\n    display: flex;\n}\n";
 class CarouselItem extends WJElement {
   /**
    * CarouselItem constructor method.
@@ -46,6 +46,7 @@ class CarouselItem extends WJElement {
     native.classList.add("native-carousel-item");
     native.setAttribute("part", "native");
     let slot = document.createElement("slot");
+    this.defaultSlot = slot;
     native.appendChild(slot);
     fragment.appendChild(native);
     return fragment;
@@ -55,6 +56,23 @@ class CarouselItem extends WJElement {
    */
   afterDraw() {
     event.addListener(this, "click", "wje-carousel-item:click");
+    this.syncContentLayoutMode();
+    if (this.defaultSlot && !this.defaultSlot.dataset.wjeCarouselItemBound) {
+      this.defaultSlot.addEventListener("slotchange", () => this.syncContentLayoutMode());
+      this.defaultSlot.dataset.wjeCarouselItemBound = "true";
+    }
+  }
+  /**
+   * Keeps a simple layout hint for single-wrapper content.
+   */
+  syncContentLayoutMode() {
+    var _a;
+    const assignedElements = ((_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) || [];
+    if (assignedElements.length === 1) {
+      this.setAttribute("single-content", "");
+      return;
+    }
+    this.removeAttribute("single-content");
   }
 }
 WJElement.define("wje-carousel-item", CarouselItem);

package/dist/wje-carousel-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-carousel-item.js","sources":["../packages/wje-carousel-item/carousel-item.element.js","../packages/wje-carousel-item/carousel-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents CarouselItem element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/carousel-item\n * @status stable\n * @augments WJElement\n * @slot - The carousel item main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-carousel-item-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-carousel-item-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-carousel-item-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-carousel-item-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-carousel-item-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-carousel-item-margin-inline=0] - Margin inline of the component;\n */\nexport default class CarouselItem extends WJElement {\n    /**\n     * CarouselItem constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CarouselItem element.\n     * @type {string}\n     */\n    className = 'CarouselItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the CarouselItem.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CarouselItem element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel-item');\n        native.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * After draw event for the CarouselItem element.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-carousel-item:click');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CarouselItem from './carousel-item.element.js';\n\n// export * from \"./carousel-item.element.js\";\nexport default CarouselItem;\n\nWJElement.define('wje-carousel-item', CarouselItem);\n"],"names":[],"mappings":";;;;;;AAoBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,sBAAsB;AAC3C,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,yBAAyB;AAAA,EAC9D;AACJ;AC7EA,UAAU,OAAO,qBAAqB,YAAY;"}
+{"version":3,"file":"wje-carousel-item.js","sources":["../packages/wje-carousel-item/carousel-item.element.js","../packages/wje-carousel-item/carousel-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents CarouselItem element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/carousel-item\n * @status stable\n * @augments WJElement\n * @slot - The carousel item main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-carousel-item-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-carousel-item-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-carousel-item-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-carousel-item-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-carousel-item-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-carousel-item-margin-inline=0] - Margin inline of the component;\n */\nexport default class CarouselItem extends WJElement {\n    /**\n     * CarouselItem constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CarouselItem element.\n     * @type {string}\n     */\n    className = 'CarouselItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the CarouselItem.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CarouselItem element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel-item');\n        native.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n        this.defaultSlot = slot;\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * After draw event for the CarouselItem element.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-carousel-item:click');\n        this.syncContentLayoutMode();\n\n        if (this.defaultSlot && !this.defaultSlot.dataset.wjeCarouselItemBound) {\n            this.defaultSlot.addEventListener('slotchange', () => this.syncContentLayoutMode());\n            this.defaultSlot.dataset.wjeCarouselItemBound = 'true';\n        }\n    }\n\n    /**\n     * Keeps a simple layout hint for single-wrapper content.\n     */\n    syncContentLayoutMode() {\n        const assignedElements = this.defaultSlot?.assignedElements({ flatten: true }) || [];\n\n        if (assignedElements.length === 1) {\n            this.setAttribute('single-content', '');\n            return;\n        }\n\n        this.removeAttribute('single-content');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CarouselItem from './carousel-item.element.js';\n\n// export * from \"./carousel-item.element.js\";\nexport default CarouselItem;\n\nWJElement.define('wje-carousel-item', CarouselItem);\n"],"names":[],"mappings":";;;;;;AAoBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,sBAAsB;AAC3C,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,cAAc;AAEnB,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,yBAAyB;AAC1D,SAAK,sBAAqB;AAE1B,QAAI,KAAK,eAAe,CAAC,KAAK,YAAY,QAAQ,sBAAsB;AACpE,WAAK,YAAY,iBAAiB,cAAc,MAAM,KAAK,uBAAuB;AAClF,WAAK,YAAY,QAAQ,uBAAuB;AAAA,IACpD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,wBAAwB;;AACpB,UAAM,qBAAmB,UAAK,gBAAL,mBAAkB,iBAAiB,EAAE,SAAS,KAAI,OAAO,CAAA;AAElF,QAAI,iBAAiB,WAAW,GAAG;AAC/B,WAAK,aAAa,kBAAkB,EAAE;AACtC;AAAA,IACJ;AAEA,SAAK,gBAAgB,gBAAgB;AAAA,EACzC;AACJ;AClGA,UAAU,OAAO,qBAAqB,YAAY;"}

package/dist/wje-carousel.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = '/*\n[ Carousel ]\n*/\n\n.native-carousel {\n    position: relative;\n    width: var(--wje-carousel-width, 100%);\n    height: var(--wje-carousel-height, 300px);\n    scroll-behavior: smooth;\n}\n\n.slides-wrapper {\n    position: relative;\n    width: var(--wje-carousel-width, 100%);\n    height: var(--wje-carousel-height, 300px);\n}\n\n.carousel-slides {\n    display: flex;\n    transition: transform 0.5s ease;\n    align-items: center;\n    justify-items: center;\n    overflow: auto;\n    overscroll-behavior-x: contain;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    aspect-ratio: var(--wje-aspect-ratio, 4 / 3);\n    scroll-snap-type: x mandatory;\n    scroll-padding-inline: 0;\n    overflow-y: hidden;\n    padding-inline: var(--wje-spacing-inline, 0);\n    gap: 0.5rem;\n}\n\n.carousel-slides::-webkit-scrollbar {\n    display: none;\n}\n\n::slotted(wje-carousel-item) {\n    flex: 0 0 var(--wje-carousel-size);\n    height: 100%;\n}\n\n/*NAVIGATION*/\n\n[name="prev"], [name="next"] {\n    display: block;\n    position: absolute;\n    top: 50%;\n    border: none;\n    cursor: pointer;\n    z-index: 2;\n}\n\n[name="prev"] {\n    left: -1rem;\n    transform: translate(-100%, -50%);\n}\n\n[name="next"] {\n    right: -1rem;\n    transform: translate(100%, -50%);\n}\n\n/*PAGINATION*/\n\n.pagination {\n    position: relative;\n    left: 50%;\n    transform: translate(-50%, 0);\n    display: flex;\n    z-index: 2;\n    justify-content: center;\n    padding-block: 1rem;\n}\n.pagination-item {\n    cursor: pointer;\n    height: 15px;\n    width: 15px;\n    margin: 0 2px;\n    background-color: var(--wje-color-contrast-4);\n    display: inline-block;\n    border-radius: 50%;\n}\n.pagination-item.active {\n    background-color: var(--wje-color);\n}\n\n/*THUMBNAILS*/\n\n.thumbnails {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-x: auto;\n    gap: 0.5rem;\n    padding: 0 0.5rem;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    box-sizing: border-box;\n    overflow-y: hidden;\n    wje-thumbnail {\n        --wje-thumbnail-width: 48px;\n        --wje-thumbnail-height: 48px;\n        --wje-thumbnail-border-radius: 0;\n        cursor: pointer;\n        border: 1px solid transparent;\n    }\n    .active {\n        border: 1px solid var(--wje-color-primary-11);\n    }\n}\n';
+const styles = '/*\n[ Carousel ]\n*/\n\n:host {\n    display: block;\n    width: var(--wje-carousel-width, 100%);\n    max-width: 100%;\n    box-sizing: border-box;\n}\n\n.native-carousel {\n    position: relative;\n    width: 100%;\n    height: var(--wje-carousel-height, 300px);\n    scroll-behavior: smooth;\n    box-sizing: border-box;\n}\n\n.slides-wrapper {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n    height: var(--wje-carousel-height, 300px);\n    box-sizing: border-box;\n}\n\n.carousel-slides {\n    display: flex;\n    flex: 1 1 auto;\n    transition: transform 0.5s ease;\n    align-items: stretch;\n    overflow: auto;\n    overscroll-behavior-x: contain;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    aspect-ratio: var(--wje-aspect-ratio, 4 / 3);\n    scroll-snap-type: x mandatory;\n    scroll-padding-inline: var(--wje-spacing-inline, 0);\n    overflow-y: hidden;\n    padding-inline: var(--wje-spacing-inline, 0);\n    gap: var(--wje-carousel-gap, 0.5rem);\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    box-sizing: border-box;\n}\n\n.carousel-slides::-webkit-scrollbar {\n    display: none;\n}\n\n::slotted(wje-carousel-item) {\n    flex: 0 0 var(--wje-carousel-item-basis, var(--wje-carousel-size));\n    width: var(--wje-carousel-item-basis, var(--wje-carousel-size));\n    min-width: 0;\n    max-width: 100%;\n    align-self: stretch;\n    height: 100%;\n    box-sizing: border-box;\n}\n\n/*NAVIGATION*/\n\n[name="prev"], [name="next"] {\n    display: block;\n    position: absolute;\n    top: 50%;\n    border: none;\n    cursor: pointer;\n    z-index: 2;\n}\n\n[name="prev"] {\n    left: -1rem;\n    transform: translate(-100%, -50%);\n}\n\n[name="next"] {\n    right: -1rem;\n    transform: translate(100%, -50%);\n}\n\n/*PAGINATION*/\n\n.pagination {\n    position: relative;\n    left: 50%;\n    transform: translate(-50%, 0);\n    display: flex;\n    z-index: 2;\n    justify-content: center;\n    padding-block: 1rem;\n}\n.pagination-item {\n    cursor: pointer;\n    height: 15px;\n    width: 15px;\n    margin: 0 2px;\n    background-color: var(--wje-color-contrast-4);\n    display: inline-block;\n    border-radius: 50%;\n}\n.pagination-item.active {\n    background-color: var(--wje-color);\n}\n\n/*THUMBNAILS*/\n\n.thumbnails {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-x: auto;\n    gap: 0.5rem;\n    padding: 0 0.5rem;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    box-sizing: border-box;\n    overflow-y: hidden;\n    wje-thumbnail {\n        --wje-thumbnail-width: 48px;\n        --wje-thumbnail-height: 48px;\n        --wje-thumbnail-border-radius: 0;\n        cursor: pointer;\n        border: 1px solid transparent;\n    }\n    .active {\n        border: 1px solid var(--wje-color-primary-11);\n    }\n}\n';
 class Carousel extends WJElement {
   /**
    * Carousel constructor method.
@@ -58,6 +58,13 @@ class Carousel extends WJElement {
   get loop() {
     return this.hasAttribute("loop");
   }
+  /**
+   * Continuous loop attribute.
+   * @returns {boolean}
+   */
+  get continuousLoop() {
+    return this.hasAttribute("continuous-loop");
+  }
   /**
    * Getter for the CSS stylesheet.
    * @returns {*}
@@ -70,7 +77,7 @@ class Carousel extends WJElement {
    * @returns {string[]}
    */
   static get observedAttributes() {
-    return ["active-slide"];
+    return ["active-slide", "slide-per-page", "continuous-loop"];
   }
   /**
    * Sets up the attributes for the Carousel.
@@ -83,6 +90,14 @@ class Carousel extends WJElement {
       if (this.pagination) this.changePagination();
       if (this.thumbnails) this.changeThumbnails();
     }
+    if (["slide-per-page", "continuous-loop"].includes(name) && old !== newName && this.slides) {
+      this.syncSlideMetrics();
+      if (this.loop) {
+        this.refresh();
+        return;
+      }
+      this.goToSlide(this.activeSlide, "auto");
+    }
   }
   /**
    * Sets up the attributes for the Carousel.
@@ -95,6 +110,8 @@ class Carousel extends WJElement {
    * Before draw method for the Carousel.
    */
   beforeDraw() {
+    this.syncSlideMetrics();
+    this.removeLoopClones();
     this.cloneFirstAndLastItems();
   }
   /**
@@ -149,31 +166,28 @@ class Carousel extends WJElement {
     this.getSlidesWithClones().forEach((slide, i) => {
       this.intersectionObserver.observe(slide);
     });
-    this.slidePerPage = this.getAttribute("slide-per-page") || 1;
-    let carouselSize = 100 / +this.slidePerPage;
-    this.style.setProperty("--wje-carousel-size", carouselSize + "%");
+    this.syncSlideMetrics();
     this.goToSlide(this.activeSlide, "auto");
-    requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToCenter()));
+    requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToSnapStart()));
     this.slides.addEventListener("scrollend", (e) => {
-      this.syncActiveToCenter();
+      this.syncActiveToSnapStart();
     });
     this.syncAria();
   }
   /**
-   * Sync `activeSlide` to the slide whose center is closest to the container center.
+   * Sync `activeSlide` to the slide whose leading edge is closest to the snap start.
    */
-  syncActiveToCenter() {
+  syncActiveToSnapStart() {
     this.getSlides();
     const withClones = this.getSlidesWithClones();
     if (!withClones.length) return;
     const containerRect = this.slides.getBoundingClientRect();
-    const containerCenterX = containerRect.left + containerRect.width / 2;
+    const snapStartX = containerRect.left + this.getScrollPaddingInlineStart();
     let best = null;
     let bestDist = Infinity;
     withClones.forEach((el) => {
       const r = el.getBoundingClientRect();
-      const center = r.left + r.width / 2;
-      const dist = Math.abs(center - containerCenterX);
+      const dist = Math.abs(r.left - snapStartX);
       if (dist < bestDist) {
         bestDist = dist;
         best = el;
@@ -184,10 +198,42 @@ class Carousel extends WJElement {
     if (vIndex === -1) return;
     const logicalIndex = this.getLogicalIndexForVisual(vIndex);
     this.activeSlide = logicalIndex;
-    if (this.loop && (vIndex === 0 || vIndex === withClones.length - 1)) {
+    this.setActiveVisualSlide(vIndex);
+    const canonicalVisualIndex = this.getVisualIndexForLogical(logicalIndex);
+    if (canonicalVisualIndex !== vIndex) {
       this.goToSlide(logicalIndex, "auto");
     }
   }
+  /**
+   * Syncs computed CSS variables derived from `slide-per-page`.
+   */
+  syncSlideMetrics() {
+    this.slidePerPage = Math.max(parseInt(this.getAttribute("slide-per-page"), 10) || 1, 1);
+    const visibleGapCount = Math.max(this.slidePerPage - 1, 0);
+    const computedItemSize = `calc((100% - (${visibleGapCount} * var(--wje-carousel-gap, 0.5rem))) / ${this.slidePerPage})`;
+    this.style.setProperty("--wje-carousel-slides-per-page", `${this.slidePerPage}`);
+    this.style.setProperty("--wje-carousel-visible-gap-count", `${visibleGapCount}`);
+    this.style.setProperty("--wje-carousel-size", computedItemSize);
+    this.style.setProperty("--wje-carousel-item-basis", "var(--wje-carousel-size)");
+  }
+  /**
+   * Returns the inline scroll padding used by the snap area.
+   * @returns {number}
+   */
+  getScrollPaddingInlineStart() {
+    if (!this.slides) return 0;
+    const styles2 = getComputedStyle(this.slides);
+    return parseFloat(styles2.scrollPaddingInlineStart || styles2.scrollPaddingLeft || "0") || 0;
+  }
+  /**
+   * Returns the interaction scroll behavior for UI controls.
+   * Continuous multi-slide loops use instant snapping to avoid blank edge states
+   * while the browser is still animating a previous smooth scroll.
+   * @returns {ScrollBehavior|string}
+   */
+  getControlBehavior() {
+    return this.continuousLoop && this.slidePerPage > 1 ? "auto" : "smooth";
+  }
   /**
    * Sets up the IntersectionObserver for the Carousel.
    */
@@ -218,11 +264,10 @@ class Carousel extends WJElement {
   goToSlide(index, behavior = "smooth", next = true) {
     const slides = this.getSlides();
     const withClones = this.getSlidesWithClones();
-    withClones.forEach((slide) => slide.classList.remove("active"));
-    const maxIndex = Math.max(slides.length - 1, 0);
+    const maxIndex = this.getMaxVisibleStartIndex(slides.length);
     let logical;
     if (this.loop && slides.length > 0) {
-      logical = (index % slides.length + slides.length) % slides.length;
+      logical = this.normalizeLoopIndex(index, slides.length);
     } else {
       logical = Math.min(Math.max(index, 0), maxIndex);
     }
@@ -230,22 +275,25 @@ class Carousel extends WJElement {
     const vIndex = this.getVisualIndexForLogical(logical);
     const targetEl = withClones[vIndex];
     if (!targetEl) return;
-    targetEl.classList.add("active");
-    const targetRect = targetEl.getBoundingClientRect();
-    const containerRect = this.slides.getBoundingClientRect();
-    this.slides.scrollTo({
-      left: targetRect.left - containerRect.left + this.slides.scrollLeft,
-      top: targetRect.top - containerRect.top + this.slides.scrollTop,
-      behavior: behavior === "smooth" ? "smooth" : "auto"
-    });
+    this.setActiveVisualSlide(vIndex);
+    this.scrollToVisualIndex(vIndex, behavior);
     if (this.navigation && !this.loop) {
       this.nextButton.removeAttribute("disabled");
       this.prevButton.removeAttribute("disabled");
-      if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute("disabled", "");
+      if (this.activeSlide === maxIndex) this.nextButton.setAttribute("disabled", "");
       if (this.activeSlide === 0) this.prevButton.setAttribute("disabled", "");
     }
     this.syncAria();
   }
+  /**
+   * Sets the active class on the currently targeted visual slide and removes it elsewhere.
+   * @param {number} vIndex
+   */
+  setActiveVisualSlide(vIndex) {
+    this.getSlidesWithClones().forEach((slide, index) => {
+      slide.classList.toggle("active", index === vIndex);
+    });
+  }
   /**
    * Syncs ARIA attributes on the carousel and slides.
    */
@@ -273,14 +321,88 @@ class Carousel extends WJElement {
   cloneFirstAndLastItems() {
     const items = this.getSlides();
     if (items.length && this.loop) {
-      const firstItemClone = items[0].cloneNode(true);
-      firstItemClone.classList.add("clone");
-      this.append(firstItemClone);
-      const lastItemClone = items[items.length - 1].cloneNode(true);
-      lastItemClone.classList.add("clone");
-      this.insertBefore(lastItemClone, items[0]);
+      const cloneCount = this.getLoopCloneCount(items.length);
+      const firstOriginal = items[0];
+      items.slice(items.length - cloneCount).forEach((item) => {
+        const clone = this.createLoopClone(item);
+        this.insertBefore(clone, firstOriginal);
+      });
+      items.slice(0, cloneCount).forEach((item) => {
+        const clone = this.createLoopClone(item);
+        this.append(clone);
+      });
     }
   }
+  /**
+   * Creates a sanitized loop clone that does not inherit transient render state
+   * such as inline `visibility: hidden` from the source slide.
+   * @param {HTMLElement} item
+   * @returns {HTMLElement}
+   */
+  createLoopClone(item) {
+    var _a;
+    const clone = item.cloneNode(true);
+    clone.classList.add("clone");
+    clone.classList.remove("active");
+    clone.style.removeProperty("visibility");
+    if (!((_a = clone.getAttribute("style")) == null ? void 0 : _a.trim())) {
+      clone.removeAttribute("style");
+    }
+    return clone;
+  }
+  /**
+   * Removes loop clones so they can be rebuilt for the current configuration.
+   */
+  removeLoopClones() {
+    this.querySelectorAll("wje-carousel-item.clone").forEach((clone) => clone.remove());
+  }
+  /**
+   * Returns how many slides should be cloned on each side when loop is enabled.
+   * @param {number} totalSlides
+   * @returns {number}
+   */
+  getLoopCloneCount(totalSlides = this.getSlides().length) {
+    if (!this.loop || !totalSlides) return 0;
+    return this.continuousLoop ? Math.min(this.slidePerPage, totalSlides) : 1;
+  }
+  /**
+   * Scrolls the carousel to a visual slide index.
+   * @param {number} vIndex
+   * @param {ScrollBehavior|string} behavior
+   */
+  scrollToVisualIndex(vIndex, behavior = "smooth") {
+    const withClones = this.getSlidesWithClones();
+    const firstEl = withClones[0];
+    const targetEl = withClones[vIndex];
+    if (!firstEl || !targetEl || !this.slides) return;
+    const firstRect = firstEl.getBoundingClientRect();
+    const targetRect = targetEl.getBoundingClientRect();
+    const contentOffsetLeft = targetRect.left - firstRect.left;
+    const nextLeft = contentOffsetLeft - this.getScrollPaddingInlineStart();
+    const targetLeft = Math.max(nextLeft, 0);
+    if (behavior === "smooth") {
+      this.slides.scrollTo({
+        left: targetLeft,
+        top: this.slides.scrollTop,
+        behavior: "smooth"
+      });
+      return;
+    }
+    if (this.snapRestoreFrame) {
+      cancelAnimationFrame(this.snapRestoreFrame);
+    }
+    const inlineSnapType = this.slides.style.scrollSnapType;
+    this.slides.style.scrollSnapType = "none";
+    this.slides.scrollTo({
+      left: targetLeft,
+      top: this.slides.scrollTop,
+      behavior: "auto"
+    });
+    this.snapRestoreFrame = requestAnimationFrame(() => {
+      this.slides.style.scrollSnapType = inlineSnapType;
+      this.snapRestoreFrame = null;
+    });
+  }
   /**
    * Goes to the next slide.
    */
@@ -304,11 +426,8 @@ class Carousel extends WJElement {
    */
   changePagination() {
     if (this.pagination) {
-      this.removeActiveSlide();
       this.context.querySelectorAll(".pagination-item").forEach((item, i) => {
-        if (i === this.activeSlide) {
-          item.classList.add("active");
-        }
+        item.classList.toggle("active", i === this.activeSlide);
       });
     }
   }
@@ -317,11 +436,8 @@ class Carousel extends WJElement {
    */
   changeThumbnails() {
     if (this.thumbnails) {
-      this.removeActiveSlide();
       this.context.querySelectorAll("wje-thumbnail").forEach((item, i) => {
-        if (i === this.activeSlide) {
-          item.classList.add("active");
-        }
+        item.classList.toggle("active", i === this.activeSlide);
       });
     }
   }
@@ -337,9 +453,6 @@ class Carousel extends WJElement {
     nextButton.setAttribute("slot", "next");
     nextButton.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>';
     nextButton.classList.add("next");
-    nextButton.addEventListener("click", (e) => {
-      this.nextSlide();
-    });
     return nextButton;
   }
   /**
@@ -354,9 +467,6 @@ class Carousel extends WJElement {
     previousButton.setAttribute("slot", "prev");
     previousButton.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>';
     previousButton.classList.add("prev");
-    previousButton.addEventListener("click", (e) => {
-      this.previousSlide();
-    });
     return previousButton;
   }
   /**
@@ -367,14 +477,13 @@ class Carousel extends WJElement {
     const pagination = document.createElement("div");
     pagination.setAttribute("part", "pagination");
     pagination.classList.add("pagination");
-    const slides = this.getSlides();
-    slides.forEach((slide, i) => {
+    this.getPaginationIndexes().forEach((i) => {
       const paginationItem = document.createElement("div");
       paginationItem.classList.add("pagination-item");
       paginationItem.addEventListener("click", (e) => {
         this.removeActiveSlide();
         e.target.classList.add("active");
-        this.goToSlide(i);
+        this.goToSlide(i, this.getControlBehavior());
       });
       pagination.append(paginationItem);
     });
@@ -394,7 +503,7 @@ class Carousel extends WJElement {
       thumbnail.addEventListener("click", (e) => {
         this.removeActiveSlide();
         e.target.closest("wje-thumbnail").classList.add("active");
-        this.goToSlide(i);
+        this.goToSlide(i, this.getControlBehavior());
       });
       thumbnails.append(thumbnail);
     });
@@ -404,13 +513,13 @@ class Carousel extends WJElement {
    * Goes to the next slide.
    */
   nextSlide() {
-    this.goToSlide(this.activeSlide + this.slidePerPage);
+    this.goToSlide(this.activeSlide + 1, this.getControlBehavior());
   }
   /**
    * Goes to the previous slide.
    */
   previousSlide() {
-    this.goToSlide(this.activeSlide - this.slidePerPage);
+    this.goToSlide(this.activeSlide - 1, this.getControlBehavior());
   }
   /**
    * Goes to the slide.
@@ -428,16 +537,58 @@ class Carousel extends WJElement {
   }
   /** Maps logical index -> visual index (accounts for leading clone when loop=true) */
   getVisualIndexForLogical(index) {
-    return this.loop ? index + 1 : index;
+    return this.loop ? index + this.getLoopCloneCount() : index;
   }
   /** Maps visual index -> logical index (handles clones at 0 and last when loop=true) */
   getLogicalIndexForVisual(vIndex) {
     const slides = this.getSlides();
-    const withClones = this.getSlidesWithClones();
-    if (!this.loop) return vIndex;
-    if (vIndex === 0) return slides.length - 1;
-    if (vIndex === withClones.length - 1) return 0;
-    return vIndex - 1;
+    const maxIndex = this.getMaxVisibleStartIndex(slides.length);
+    const cloneCount = this.getLoopCloneCount(slides.length);
+    if (!this.loop) return Math.min(Math.max(vIndex, 0), maxIndex);
+    if (this.continuousLoop) {
+      if (vIndex < cloneCount) return slides.length - cloneCount + vIndex;
+      if (vIndex >= cloneCount + slides.length) return vIndex - (cloneCount + slides.length);
+      return vIndex - cloneCount;
+    }
+    if (vIndex < cloneCount) return maxIndex;
+    if (vIndex >= cloneCount + slides.length) return 0;
+    return Math.min(Math.max(vIndex - cloneCount, 0), maxIndex);
+  }
+  /**
+   * Returns the maximum logical slide index that can still render a full viewport.
+   * @param {number} totalSlides
+   * @returns {number}
+   */
+  getMaxVisibleStartIndex(totalSlides = this.getSlides().length) {
+    const visibleSlides = Math.min(this.slidePerPage, totalSlides);
+    return Math.max(totalSlides - visibleSlides, 0);
+  }
+  /**
+   * Normalizes a logical index for the active loop mode.
+   * @param {number} index
+   * @param {number} totalSlides
+   * @returns {number}
+   */
+  normalizeLoopIndex(index, totalSlides = this.getSlides().length) {
+    const logicalCount = this.getLoopLogicalCount(totalSlides);
+    if (!logicalCount) return 0;
+    return (index % logicalCount + logicalCount) % logicalCount;
+  }
+  /**
+   * Returns how many logical positions are reachable for the current loop mode.
+   * @param {number} totalSlides
+   * @returns {number}
+   */
+  getLoopLogicalCount(totalSlides = this.getSlides().length) {
+    if (!totalSlides) return 0;
+    return this.continuousLoop ? totalSlides : this.getMaxVisibleStartIndex(totalSlides) + 1;
+  }
+  /**
+   * Returns the pagination indexes for the current carousel mode.
+   * @returns {number[]}
+   */
+  getPaginationIndexes() {
+    return Array.from({ length: this.getLoopLogicalCount() }, (_, index) => index);
   }
   /**
    * Goes to the slide.