wj-elements 0.4.0 → 0.4.2

package/dist/wje-animation.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 { fetchAndParseCSS } from "./animations.js";
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n    height: 100%;\n    font-size: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-text-size-adjust: 100%;\n}\nbody {\n    color: var(--wje-color-contrast-8);\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.01em;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-font-feature-settings: 'kern' 1;\n    -moz-font-feature-settings: 'kern' 1;\n    margin: 0;\n    padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    margin: 0.625rem 0;\n    font-family: var(--wje-font-family);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    font-weight: 500;\n    color: inherit;\n    display: inline-block;\n}\nh1 {\n    font-size: var(--wje-font-size-2x-large);\n    line-height: 44px;\n    letter-spacing: -0.0141279em;\n}\nh2 {\n    font-size: var(--wje-font-size-x-large);\n    line-height: 34px;\n    letter-spacing: -0.021em;\n}\nh3 {\n    font-size: var(--wje-font-size-large);\n    line-height: 28px;\n    letter-spacing: -0.0114923em;\n}\nh4 {\n    font-size: var(--wje-font-size-large);\n    line-height: 26px;\n    letter-spacing: -0.00865734em;\n}\nh5 {\n    font-size: var(--wje-font-size-medium);\n    line-height: 24px;\n    letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n    font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n    padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n    text-shadow: none !important;\n    color: var(--wje-color-primary-11);\n    transition:\n        color 0.1s linear 0s,\n        background-color 0.1s linear 0s,\n        opacity 0.2s linear 0s !important;\n    font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n    color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n    outline: 0 !important;\n    text-decoration: none;\n}\n\na.no-style {\n    color: inherit;\n    font-weight: normal;\n}\n\nbr {\n    line-height: normal;\n    clear: both;\n}\n\np {\n    display: block;\n    color: inherit;\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.00177646em;\n    line-height: 21px;\n    margin: 0 0 0.625rem 0;\n    font-style: normal;\n    white-space: normal;\n}\n\nsmall,\n.small {\n    line-height: 18px;\n    font-size: 85.714%;\n}\n\nlabel {\n    &.inline {\n        display: inline-block;\n        position: relative;\n        top: 0;\n        font-size: 13px;\n    }\n}\n\nul,\nol {\n    margin-bottom: 0.625rem;\n    & > li {\n        padding-left: 3px;\n        line-height: 24px;\n    }\n    &.lg-icon {\n        & > li {\n            font-size: 21px;\n            & span {\n                font-size: 14px;\n            }\n        }\n    }\n    &.no-style {\n        list-style: none;\n        padding-left: 5px;\n    }\n}\n\naddress {\n    margin-bottom: 0;\n    a {\n        color: var(--wje-color-contrast-8);\n    }\n}\n\nblockquote {\n    padding: 4px 0 0 18px;\n    border-left: 0;\n    &:before {\n        content: '\\e95d';\n        font-size: 20px;\n        margin-right: 6px;\n        float: left;\n        position: relative;\n        top: -12px;\n    }\n    p {\n        font-size: 16px;\n        margin-bottom: 4px;\n    }\n    small {\n        line-height: 29px;\n        color: var(--wje-color-contrast-8);\n        &:before {\n            content: '—';\n            margin-right: 6px;\n        }\n    }\n    &.pull-right {\n        border-right: 0;\n        &:before {\n            float: right;\n            content: '';\n            margin-left: 6px;\n            margin-right: 0;\n        }\n        small {\n            padding-right: 30px;\n            &:after {\n                content: '';\n            }\n        }\n    }\n}\nhr {\n    border-color: var(--wje-border-color);\n    &.double {\n        border-width: 2px;\n    }\n    &.dotted {\n        border-style: dotted none none;\n    }\n}\n\n.ff-sup {\n    font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n}\n\n.ff-sub {\n    font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n    color: var(--wje-color-contrast-6);\n    background-color: var(--wje-color);\n    font-size: 97%;\n    position: relative;\n    line-height: inherit;\n    border-radius: 3px;\n    padding: 5px 7px;\n    margin: 0;\n    &:hover {\n        color: var(--wje-color-complete);\n    }\n    &.code-sm {\n        padding: 3px 6px;\n    }\n}\n\nfigcaption {\n    font-size: 13px;\n    margin-top: 0.625rem;\n    font-weight: 400;\n    display: block;\n    letter-spacing: 0.008em;\n    text-align: center;\n    color: var(--wje-color-contrast-6);\n    line-height: 1.46;\n}\n\nem {\n    font-style: italic !important;\n    font-family: inherit;\n    font-weight: inherit;\n}\n\nins {\n    font-family: var(--wje-font-family);\n    border-bottom: 1px solid #d0d0d0;\n    text-decoration: none;\n    color: var(--wje-color-contrast-8);\n    font-weight: normal;\n    font-size: 94%;\n}\n\ncite {\n    font-family: var(--wje-font-family);\n    font-weight: 300;\n    color: var(--wje-color-contrast-6);\n    text-decoration: none;\n    font-style: normal;\n    hanging-punctuation: first;\n}\n\nsup {\n    top: -0.28em;\n    font-size: 70%;\n}\n\nsub {\n    bottom: 0.03em;\n}\n\nvar {\n    font-family: var(--wje-font-family);\n    font-feature-settings:\n        'calt' 1,\n        'tnum' 1,\n        'frac' 1,\n        'case' 1,\n        'ss01' 1,\n        'cv11' 1;\n}\n\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nq {\n    font-family: var(--wje-font-family);\n    font-weight: 500;\n    font-size: 20px;\n    hanging-punctuation: first;\n\n    &:before {\n        content: '\\201C';\n        color: rgba(0, 0, 0, 0.44);\n        font-size: 35px;\n    }\n\n    &:after {\n        content: '\\201D';\n        font-size: 35px;\n        color: rgba(0, 0, 0, 0.44);\n    }\n}\naudio {\n    margin-top: 42px;\n}\nhr {\n    clear: both;\n    margin-bottom: 42px;\n    margin-top: 42px;\n    border: 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n    font-family: var(--wje-font-family);\n    font-style: normal;\n    margin: 0 0 1.75em;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 24px;\n}\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nacronym {\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\npre {\n    tab-size: 4;\n    font-size: 85.714%;\n    overflow-x: auto;\n    font-family: monospace, monospace;\n    line-height: 1.7;\n    counter-reset: line;\n    background-color: var(--wje-color-contrast-3) er;\n    color: var(--wje-color-contrast-8);\n    margin-inline: 0;\n    padding: 1rem 1.25rem;\n    border-radius: 3px;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n}\n\ndt {\n    font-weight: 700;\n    margin-bottom: 5px;\n}\n\ndd {\n    margin: 0 0 1.75em;\n}\n\nkbd {\n    font-size: 85.714%;\n    font-family: var(--wje-font-family);\n    position: relative;\n    line-height: 34px;\n    top: -3px;\n    letter-spacing: 0.01em;\n    padding: 5px 7px;\n    margin: 0;\n    color: rgba(0, 0, 0, 0.53);\n    background-color: #fff;\n    border-radius: 3px;\n    box-shadow:\n        0 2px 0 1px #c7c7c7,\n        0 1px 0 1px rgba(0, 0, 0, 0.15),\n        0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n    text-transform: uppercase;\n    display: inline-block;\n    letter-spacing: 0.06em;\n    font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n    font-size: 12px !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n    a {\n        text-decoration: underline;\n    }\n}\n.normal-text {\n    font-size: 13px !important;\n}\n.large-text {\n    font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n    font-weight: normal !important;\n}\n.semi-bold {\n    font-weight: 500 !important;\n}\n.bold {\n    font-weight: 600 !important;\n}\n.light {\n    font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n    text-transform: uppercase;\n    letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n    text-transform: uppercase !important;\n    letter-spacing: 0.07em !important;\n}\n.muted {\n    color: var(--wje-color-contrast-6);\n}\n.hint-text {\n    opacity: 0.76 !important;\n}\n.no-decoration {\n    text-decoration: none !important;\n}\n\n.text-ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n    background-color: var(--wje-color-black) !important;\n    color: var(--wje-color-contrast-0);\n}\n.bg-white {\n    background-color: var(--wje-color-contrast-0) !important;\n    color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n    background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n    opacity: 0.7;\n    &:hover {\n        opacity: 1;\n    }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n    text-align: right !important;\n}\n.text-left {\n    text-align: left !important;\n}\n.text-center {\n    text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n    stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n    stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n    stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n    stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n    stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n    stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n    font-size: var(--wje-font-size-x-small) !important;\n    letter-spacing: 0.0180093em;\n    line-height: 15px;\n}\n.fs-small {\n    font-size: var(--wje-font-size-small) !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n}\n.fs {\n    font-size: var(--wje-font-size) !important;\n    letter-spacing: 0.00177646em;\n    line-height: 22px;\n}\n\n.fs-medium {\n    font-size: var(--wje-font-size-medium) !important;\n    letter-spacing: -0.00295978em;\n    line-height: 24px;\n}\n\n.fs-large {\n    font-size: var(--wje-font-size-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-x-large {\n    font-size: var(--wje-font-size-x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-2x-large {\n    font-size: var(--wje-font-size-2x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-3x-large {\n    font-size: var(--wje-font-size-3x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-4x-large {\n    font-size: var(--wje-font-size-4x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n    line-height: normal;\n}\n.lh-10 {\n    line-height: 10px;\n}\n.lh-11 {\n    line-height: 11px;\n}\n.lh-12 {\n    line-height: 12px;\n}\n.lh-13 {\n    line-height: 13px;\n}\n.lh-14 {\n    line-height: 14px;\n}\n.lh-15 {\n    line-height: 15px;\n}\n.lh-16 {\n    line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n    font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n    font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n    font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n    font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n    background-color: var(--wje-color-contrast-3);\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    -webkit-box-shadow: none !important;\n    -moz-box-shadow: none !important;\n    box-shadow: none !important;\n    border: none;\n    background-image: none;\n    &.well-large {\n        padding: 24px;\n        width: auto;\n    }\n    &.well-small {\n        padding: 13px;\n        width: auto;\n    }\n    &.green {\n        background-color: var(--wje-color-complete);\n        color: var(--wje-color-contrast-0);\n        border: none;\n    }\n}\n.overflow-ellipsis {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n    body,\n    p {\n        font-size: var(--wje-font-size-small);\n        line-height: 20px;\n    }\n\n    h1 {\n        font-size: var(--wje-font-size-2x-large);\n        line-height: 44px;\n        letter-spacing: -0.08px;\n    }\n    h2 {\n        font-size: var(--wje-font-size-x-large);\n        line-height: 40px;\n    }\n    h3 {\n        font-size: var(--wje-font-size-large);\n        line-height: 35.88px;\n    }\n    h4 {\n        font-size: var(--wje-font-size-large);\n        line-height: 33.88px;\n    }\n    h5 {\n        font-size: var(--wje-font-size-medium);\n        line-height: 25.88px;\n    }\n    small,\n    .small {\n        font-size: 89%;\n        line-height: 17px;\n    }\n}\n\n.alert {\n    & > p,\n    & > ul {\n        margin-bottom: 0;\n    }\n}\n.table {\n    & > tbody {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > tfoot {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > thead {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-3 {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-5 {\n    display: -webkit-box;\n    -webkit-line-clamp: 5;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.text-separator {\n    display: block;\n    text-align: center;\n    margin: 1.5rem 0;\n    width: 100%;\n    background: linear-gradient(\n        to top,\n        transparent 0%,\n        transparent calc(50% - 1px),\n        var(--wje-border-color) calc(50% - 1px),\n        var(--wje-border-color) calc(50% + 1px),\n        transparent calc(50% + 1px),\n        transparent 100%\n    );\n}\n\n.text-separator::before {\n    background: #fff;\n    content: attr(data-text);\n    padding: 0 1rem;\n    text-transform: uppercase;\n}\n\n.wje-toast-stack {\n    position: fixed;\n    top: 0;\n    margin: 0 0.5rem;\n    width: 300px;\n    max-width: 100%;\n    max-height: 100%;\n    overflow: auto;\n    z-index: 9999;\n}";
+const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n    height: 100%;\n    font-size: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-text-size-adjust: 100%;\n}\nbody {\n    color: var(--wje-color-contrast-8);\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.01em;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-font-feature-settings: 'kern' 1;\n    -moz-font-feature-settings: 'kern' 1;\n    margin: 0;\n    padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    margin: 0.625rem 0;\n    font-family: var(--wje-font-family);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    font-weight: 500;\n    color: inherit;\n    display: inline-block;\n}\nh1 {\n    font-size: var(--wje-font-size-2x-large);\n    line-height: 44px;\n    letter-spacing: -0.0141279em;\n}\nh2 {\n    font-size: var(--wje-font-size-x-large);\n    line-height: 34px;\n    letter-spacing: -0.021em;\n}\nh3 {\n    font-size: var(--wje-font-size-large);\n    line-height: 28px;\n    letter-spacing: -0.0114923em;\n}\nh4 {\n    font-size: var(--wje-font-size-large);\n    line-height: 26px;\n    letter-spacing: -0.00865734em;\n}\nh5 {\n    font-size: var(--wje-font-size-medium);\n    line-height: 24px;\n    letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n    font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n    padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n    text-shadow: none !important;\n    color: var(--wje-color-primary-11);\n    transition:\n        color 0.1s linear 0s,\n        background-color 0.1s linear 0s,\n        opacity 0.2s linear 0s !important;\n    font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n    color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n    outline: 0 !important;\n    text-decoration: none;\n}\n\na.no-style {\n    color: inherit;\n    font-weight: normal;\n}\n\nbr {\n    line-height: normal;\n    clear: both;\n}\n\np {\n    display: block;\n    color: inherit;\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.00177646em;\n    line-height: 21px;\n    margin: 0 0 0.625rem 0;\n    font-style: normal;\n    white-space: normal;\n}\n\nsmall,\n.small {\n    line-height: 18px;\n    font-size: 85.714%;\n}\n\nlabel {\n    &.inline {\n        display: inline-block;\n        position: relative;\n        top: 0;\n        font-size: 13px;\n    }\n}\n\nul,\nol {\n    margin-bottom: 0.625rem;\n    & > li {\n        padding-left: 3px;\n        line-height: 24px;\n    }\n    &.lg-icon {\n        & > li {\n            font-size: 21px;\n            & span {\n                font-size: 14px;\n            }\n        }\n    }\n    &.no-style {\n        list-style: none;\n        padding-left: 5px;\n    }\n}\n\naddress {\n    margin-bottom: 0;\n    a {\n        color: var(--wje-color-contrast-8);\n    }\n}\n\nblockquote {\n    padding: 4px 0 0 18px;\n    border-left: 0;\n    &:before {\n        content: '\\e95d';\n        font-size: 20px;\n        margin-right: 6px;\n        float: left;\n        position: relative;\n        top: -12px;\n    }\n    p {\n        font-size: 16px;\n        margin-bottom: 4px;\n    }\n    small {\n        line-height: 29px;\n        color: var(--wje-color-contrast-8);\n        &:before {\n            content: '—';\n            margin-right: 6px;\n        }\n    }\n    &.pull-right {\n        border-right: 0;\n        &:before {\n            float: right;\n            content: '';\n            margin-left: 6px;\n            margin-right: 0;\n        }\n        small {\n            padding-right: 30px;\n            &:after {\n                content: '';\n            }\n        }\n    }\n}\nhr {\n    border-color: var(--wje-border-color);\n    &.double {\n        border-width: 2px;\n    }\n    &.dotted {\n        border-style: dotted none none;\n    }\n}\n\n.ff-sup {\n    font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n}\n\n.ff-sub {\n    font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n    color: var(--wje-color-contrast-6);\n    background-color: var(--wje-color);\n    font-size: 97%;\n    position: relative;\n    line-height: inherit;\n    border-radius: 3px;\n    padding: 5px 7px;\n    margin: 0;\n    &:hover {\n        color: var(--wje-color-complete);\n    }\n    &.code-sm {\n        padding: 3px 6px;\n    }\n}\n\nfigcaption {\n    font-size: 13px;\n    margin-top: 0.625rem;\n    font-weight: 400;\n    display: block;\n    letter-spacing: 0.008em;\n    text-align: center;\n    color: var(--wje-color-contrast-6);\n    line-height: 1.46;\n}\n\nem {\n    font-style: italic !important;\n    font-family: inherit;\n    font-weight: inherit;\n}\n\nins {\n    font-family: var(--wje-font-family);\n    border-bottom: 1px solid #d0d0d0;\n    text-decoration: none;\n    color: var(--wje-color-contrast-8);\n    font-weight: normal;\n    font-size: 94%;\n}\n\ncite {\n    font-family: var(--wje-font-family);\n    font-weight: 300;\n    color: var(--wje-color-contrast-6);\n    text-decoration: none;\n    font-style: normal;\n    hanging-punctuation: first;\n}\n\nsup {\n    top: -0.28em;\n    font-size: 70%;\n}\n\nsub {\n    bottom: 0.03em;\n}\n\nvar {\n    font-family: var(--wje-font-family);\n    font-feature-settings:\n        'calt' 1,\n        'tnum' 1,\n        'frac' 1,\n        'case' 1,\n        'ss01' 1,\n        'cv11' 1;\n}\n\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nq {\n    font-family: var(--wje-font-family);\n    font-weight: 500;\n    font-size: 20px;\n    hanging-punctuation: first;\n\n    &:before {\n        content: '\\201C';\n        color: rgba(0, 0, 0, 0.44);\n        font-size: 35px;\n    }\n\n    &:after {\n        content: '\\201D';\n        font-size: 35px;\n        color: rgba(0, 0, 0, 0.44);\n    }\n}\naudio {\n    margin-top: 42px;\n}\nhr {\n    clear: both;\n    margin-bottom: 42px;\n    margin-top: 42px;\n    border: 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n    font-family: var(--wje-font-family);\n    font-style: normal;\n    margin: 0 0 1.75em;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 24px;\n}\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nacronym {\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\npre {\n    tab-size: 4;\n    font-size: 85.714%;\n    overflow-x: auto;\n    font-family: monospace, monospace;\n    line-height: 1.7;\n    counter-reset: line;\n    background-color: var(--wje-color-contrast-3) er;\n    color: var(--wje-color-contrast-8);\n    margin-inline: 0;\n    padding: 1rem 1.25rem;\n    border-radius: 3px;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n}\n\ndt {\n    font-weight: 700;\n    margin-bottom: 5px;\n}\n\ndd {\n    margin: 0 0 1.75em;\n}\n\nkbd {\n    font-size: 85.714%;\n    font-family: var(--wje-font-family);\n    position: relative;\n    line-height: 34px;\n    top: -3px;\n    letter-spacing: 0.01em;\n    padding: 5px 7px;\n    margin: 0;\n    color: rgba(0, 0, 0, 0.53);\n    background-color: #fff;\n    border-radius: 3px;\n    box-shadow:\n        0 2px 0 1px #c7c7c7,\n        0 1px 0 1px rgba(0, 0, 0, 0.15),\n        0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n    text-transform: uppercase;\n    display: inline-block;\n    letter-spacing: 0.06em;\n    font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n    font-size: 12px !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n    a {\n        text-decoration: underline;\n    }\n}\n.normal-text {\n    font-size: 13px !important;\n}\n.large-text {\n    font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n    font-weight: normal !important;\n}\n.semi-bold {\n    font-weight: 500 !important;\n}\n.bold {\n    font-weight: 600 !important;\n}\n.light {\n    font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n    text-transform: uppercase;\n    letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n    text-transform: uppercase !important;\n    letter-spacing: 0.07em !important;\n}\n.muted {\n    color: var(--wje-color-contrast-6);\n}\n.hint-text {\n    opacity: 0.76 !important;\n}\n.no-decoration {\n    text-decoration: none !important;\n}\n\n.text-ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n    background-color: var(--wje-color-black) !important;\n    color: var(--wje-color-contrast-0);\n}\n.bg-white {\n    background-color: var(--wje-color-contrast-0) !important;\n    color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n    background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n    opacity: 0.7;\n    &:hover {\n        opacity: 1;\n    }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n    text-align: right !important;\n}\n.text-left {\n    text-align: left !important;\n}\n.text-center {\n    text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n    stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n    stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n    stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n    stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n    stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n    stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n    font-size: var(--wje-font-size-x-small) !important;\n    letter-spacing: 0.0180093em;\n    line-height: 15px;\n}\n.fs-small {\n    font-size: var(--wje-font-size-small) !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n}\n.fs {\n    font-size: var(--wje-font-size) !important;\n    letter-spacing: 0.00177646em;\n    line-height: 22px;\n}\n\n.fs-medium {\n    font-size: var(--wje-font-size-medium) !important;\n    letter-spacing: -0.00295978em;\n    line-height: 24px;\n}\n\n.fs-large {\n    font-size: var(--wje-font-size-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-x-large {\n    font-size: var(--wje-font-size-x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-2x-large {\n    font-size: var(--wje-font-size-2x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-3x-large {\n    font-size: var(--wje-font-size-3x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-4x-large {\n    font-size: var(--wje-font-size-4x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n    line-height: normal;\n}\n.lh-10 {\n    line-height: 10px;\n}\n.lh-11 {\n    line-height: 11px;\n}\n.lh-12 {\n    line-height: 12px;\n}\n.lh-13 {\n    line-height: 13px;\n}\n.lh-14 {\n    line-height: 14px;\n}\n.lh-15 {\n    line-height: 15px;\n}\n.lh-16 {\n    line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n    font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n    font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n    font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n    font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n    background-color: var(--wje-color-contrast-3);\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    -webkit-box-shadow: none !important;\n    -moz-box-shadow: none !important;\n    box-shadow: none !important;\n    border: none;\n    background-image: none;\n    &.well-large {\n        padding: 24px;\n        width: auto;\n    }\n    &.well-small {\n        padding: 13px;\n        width: auto;\n    }\n    &.green {\n        background-color: var(--wje-color-complete);\n        color: var(--wje-color-contrast-0);\n        border: none;\n    }\n}\n.overflow-ellipsis {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n    body,\n    p {\n        font-size: var(--wje-font-size-small);\n        line-height: 20px;\n    }\n\n    h1 {\n        font-size: var(--wje-font-size-2x-large);\n        line-height: 44px;\n        letter-spacing: -0.08px;\n    }\n    h2 {\n        font-size: var(--wje-font-size-x-large);\n        line-height: 40px;\n    }\n    h3 {\n        font-size: var(--wje-font-size-large);\n        line-height: 35.88px;\n    }\n    h4 {\n        font-size: var(--wje-font-size-large);\n        line-height: 33.88px;\n    }\n    h5 {\n        font-size: var(--wje-font-size-medium);\n        line-height: 25.88px;\n    }\n    small,\n    .small {\n        font-size: 89%;\n        line-height: 17px;\n    }\n}\n\n.alert {\n    & > p,\n    & > ul {\n        margin-bottom: 0;\n    }\n}\n.table {\n    & > tbody {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > tfoot {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > thead {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-3 {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-5 {\n    display: -webkit-box;\n    -webkit-line-clamp: 5;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.text-separator {\n    display: block;\n    text-align: center;\n    margin: 1.5rem 0;\n    width: 100%;\n    background: linear-gradient(\n        to top,\n        transparent 0%,\n        transparent calc(50% - 1px),\n        var(--wje-border-color) calc(50% - 1px),\n        var(--wje-border-color) calc(50% + 1px),\n        transparent calc(50% + 1px),\n        transparent 100%\n    );\n}\n\n.text-separator::before {\n    background: #fff;\n    content: attr(data-text);\n    padding: 0 1rem;\n    text-transform: uppercase;\n}\n\n.wje-toast-stack {\n    position: fixed;\n    top: 0;\n    right: 0;\n    margin: 0.5rem;\n    width: min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem));\n    max-width: calc(100vw - 1rem);\n    max-height: calc(100vh - 1rem);\n    overflow: auto;\n    z-index: 9999;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--wje-spacing-medium);\n}\n\n.wje-toast-stack[data-position='top-start'] {\n    left: 0;\n    right: auto;\n}\n\n.wje-toast-stack[data-position='top-center'] {\n    left: 50%;\n    right: auto;\n    transform: translateX(-50%);\n}\n\n.wje-toast-stack[data-position='bottom-start'],\n.wje-toast-stack[data-position='bottom-center'],\n.wje-toast-stack[data-position='bottom-end'] {\n    top: auto;\n    bottom: 0;\n}\n\n.wje-toast-stack[data-position='bottom-start'] {\n    left: 0;\n    right: auto;\n}\n\n.wje-toast-stack[data-position='bottom-center'] {\n    left: 50%;\n    right: auto;\n    transform: translateX(-50%);\n}\n\n.wje-toast-stack[data-stacked='true'] {\n    overflow: visible;\n    padding-block: 1rem;\n}\n\n.wje-toast-stack[data-stacked='true'] > wje-toast {\n    margin: 0;\n}\n\n.wje-toast-stack[data-stacked='true'][data-expanded='true'] {\n    overflow: auto;\n}\n\n.wje-toast-stack[data-stacked='true'][data-expanded='true'] > wje-toast {\n    --wje-toast-stack-scale: 1 !important;\n    --wje-toast-stack-shift: 0px !important;\n    --wje-toast-stack-opacity: 1 !important;\n}\n";
 const animations = `@charset "UTF-8";/*!
  * animate.css - https://animate.style/
  * Version - 4.1.1

package/dist/wje-dropdown.js

@@ -40,8 +40,14 @@ const _Dropdown = class _Dropdown extends WJElement {
         this.popup.hide();
       }
     });
+    /**
+     * Handles popup hide events and closes only the dropdown that owns the popup.
+     * This prevents nested dropdowns from collapsing their parent dropdown when the
+     * child popup is hidden.
+     * @param {Event} e The popup hide event.
+     */
     __publicField(this, "popupHideCallback", (e) => {
-      if (this.classList.contains("active") && e.target.tagName === "WJE-DROPDOWN") {
+      if (this.classList.contains("active") && e.target === this) {
         this.toggleCallback(e);
       }
     });
@@ -53,6 +59,8 @@ const _Dropdown = class _Dropdown extends WJElement {
       const path = typeof e.composedPath === "function" ? e.composedPath() : [];
       const item = path.find((n) => n && n.tagName === "WJE-MENU-ITEM");
       if (!item) return;
+      const owner = this.getMenuItemOwner(path, item);
+      if (owner && owner !== this) return;
       if (item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true") return;
       if (typeof item.querySelector === "function" && item.querySelector("wje-menu")) return;
       this.onClose();
@@ -84,6 +92,7 @@ const _Dropdown = class _Dropdown extends WJElement {
           throw new Error("beforeShow method returned false or not string");
         }
         this.popup.show(true);
+        this.syncPopupOwner();
         event.addListener(document, "wje-menu-item:click", null, __privateGet(this, _onMenuItemCustom), false);
         event.dispatchCustomEvent(this, "wje-dropdown:open", {
           bubbles: true,
@@ -123,6 +132,8 @@ const _Dropdown = class _Dropdown extends WJElement {
       if (!this.popup || !this.popup.floatingEl || !path.includes(this.popup.floatingEl)) return;
       const item = path.find((n) => n && n.tagName === "WJE-MENU-ITEM");
       if (!item) return;
+      const owner = this.getMenuItemOwner(path, item);
+      if (owner && owner !== this) return;
       if (item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true") return;
       if (item.hasAttribute("has-submenu")) return;
       this.classList.remove("active");
@@ -227,6 +238,8 @@ const _Dropdown = class _Dropdown extends WJElement {
    * Adds event listeners for the mouseenter and mouseleave events.
    */
   afterDraw() {
+    this.syncPopupOwner();
+    this.syncOwnedContentOwner();
     event.addListener(this, "wje-popup:hide", null, this.popupHideCallback);
     event.addListener(this.popup, "click", null, this.onMenuItemClick, { capture: true });
     if (this.trigger !== "click") {
@@ -260,6 +273,58 @@ const _Dropdown = class _Dropdown extends WJElement {
     event.removeListener(document, "wje-menu-item:click", null, __privateGet(this, _onMenuItemCustom), false);
     (_a = this.anchorSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
   }
+  /**
+   * Assigns the current dropdown instance as the owner of its popup layers.
+   * Owner metadata is later used to resolve which dropdown should react to
+   * delegated menu-item clicks, including portaled popup content.
+   */
+  syncPopupOwner() {
+    if (!this.popup) return;
+    this.popup.ownerDropdown = this;
+    if (this.popup.native) {
+      this.popup.native.ownerDropdown = this;
+    }
+    if (this.popup.floatingEl) {
+      this.popup.floatingEl.ownerDropdown = this;
+    }
+  }
+  /**
+   * Recursively assigns owner metadata to the dropdown content subtree while
+   * leaving nested dropdown roots untouched, so each nested dropdown can keep
+   * its own ownership boundary.
+   * @param {HTMLElement} [root] The subtree root whose children should inherit this dropdown owner. Defaults to the current dropdown.
+   */
+  syncOwnedContentOwner(root = this) {
+    const children = Array.from(root.children || []);
+    for (const child of children) {
+      if (child.tagName === "WJE-DROPDOWN" && child !== this) {
+        continue;
+      }
+      child.ownerDropdown = this;
+      this.syncOwnedContentOwner(child);
+    }
+  }
+  /**
+   * Resolves the dropdown that owns a clicked menu item. The lookup prefers
+   * explicit owner metadata and falls back to DOM traversal so both regular
+   * and portaled dropdown content can be scoped correctly.
+   * @param {EventTarget[]} path The composed event path.
+   * @param {HTMLElement} item The clicked menu item element.
+   * @returns {HTMLElement|null} The owning dropdown element or null when it cannot be resolved.
+   */
+  getMenuItemOwner(path, item) {
+    var _a;
+    if (item == null ? void 0 : item.ownerDropdown) return item.ownerDropdown;
+    if (item == null ? void 0 : item.closest) {
+      const closestDropdown = item.closest("wje-dropdown");
+      if (closestDropdown) return closestDropdown;
+    }
+    const ownerFromPath = (_a = path.find((node) => node == null ? void 0 : node.ownerDropdown)) == null ? void 0 : _a.ownerDropdown;
+    if (ownerFromPath) return ownerFromPath;
+    const dropdownFromPath = path.find((node) => (node == null ? void 0 : node.tagName) === "WJE-DROPDOWN");
+    if (dropdownFromPath) return dropdownFromPath;
+    return null;
+  }
   /**
    * @summary Returns the content to be displayed before showing the dropdown.
    * @returns {any} The content to be displayed.

package/dist/wje-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n        this._instanceId = ++Dropdown._instanceId;\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets or removes the 'portaled' attribute on the element.\n     * When the value is truthy, the attribute 'portaled' is added to the element.\n     * When the value is falsy, the attribute 'portaled' is removed from the element.\n     * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.\n     */\n    set portaled(value) {\n        if (value) {\n            this.setAttribute('portaled', value);\n        } else {\n            this.removeAttribute('portaled');\n        }\n    }\n\n    /**\n     * Getter method for the `portaled` property.\n     * Checks if the `portaled` attribute is present on the element.\n     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.\n     */\n    get portaled() {\n        return this.getAttribute('portaled') || '';\n    }\n\n    /**\n     * Checks whether the element has the 'portaled' attribute.\n     * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.\n     */\n    get isPortaled() {\n        return this.hasAttribute('portaled');\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('part', 'popup');\n\n        if(this.isPortaled)\n            popup.setAttribute('portal', this.portaled);\n\n        popup.append(anchorSlot, slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        // Close when any actionable wje-menu-item inside the popup is clicked (works across Shadow DOM via composed path)\n        event.addListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n              Array.from(this.querySelectorAll('wje-menu-item')),\n              'click',\n              'wje-menu-item:click',\n              this.onClose\n            );\n        }\n\n        this.onSlotChange = () => this.syncAria();\n        this.anchorSlot.addEventListener('slotchange', this.onSlotChange);\n\n        this.syncAria();\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n        event.removeListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n        event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n        this.anchorSlot?.removeEventListener('slotchange', this.onSlotChange);\n    }\n\n    popupHideCallback = (e) => {\n        if (this.classList.contains('active') && e.target.tagName === \"WJE-DROPDOWN\") {\n            this.toggleCallback(e);\n        }\n    };\n\n    /**\n     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\n     * This works even when the menu is portaled, because we rely on the composed path.\n     */\n    onMenuItemClick = (e) => {\n        // Find nearest wje-menu-item in the composed path\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        const item = path.find((n) => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n\n        // Ignore disabled items\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n\n        // If this item contains a nested submenu (wje-menu), it's not a leaf -> don't close yet\n        if (typeof item.querySelector === 'function' && item.querySelector('wje-menu')) return;\n\n        // Leaf item selected -> close dropdown (which calls popup.hide(true) inside onClose)\n        this.onClose();\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        if (this.classList.contains('active')) {\n            e.stopPropagation();\n            this.onClose();\n        } else {\n            e.stopPropagation();\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        this.classList.add('active');\n        this.syncAria();\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(true); // Show tooltip\n\n                event.addListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide(true);\n            });\n    };\n\n    beforeClose = () => {\n        // Do nothing\n    };\n\n    afterClose = () => {\n        // Do nothing\n    };\n\n    onClose = () => {\n        this.classList.remove('active');\n        this.syncAria();\n        Promise.resolve(this.beforeClose(this))\n            .then((res) => {\n                if (this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.hide(true); // Show tooltip\n\n                event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterClose(this));\n            })\n            .catch((error) => {\n                this.classList.add('active');\n                this.popup.show(true);\n            });\n    }\n\n    /**\n     * Syncs ARIA attributes for the trigger element.\n     */\n    syncAria() {\n        const triggerEl = this.anchorSlot?.assignedElements?.({ flatten: true })?.[0];\n        if (!triggerEl) return;\n\n        const popupId = this.popup?.id || `wje-dropdown-popup-${this._instanceId}`;\n        if (this.popup && !this.popup.id) this.popup.id = popupId;\n\n        const hasMenu = !!this.querySelector('wje-menu');\n        triggerEl.setAttribute('aria-haspopup', hasMenu ? 'menu' : 'dialog');\n        triggerEl.setAttribute('aria-expanded', this.classList.contains('active') ? 'true' : 'false');\n        triggerEl.setAttribute('aria-controls', popupId);\n    }\n\n    #onMenuItemCustom = (e) => {\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        if (!this.popup || !this.popup.floatingEl || !path.includes(this.popup.floatingEl)) return;\n\n        const item = path.find(n => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n        if (item.hasAttribute('has-submenu')) return; // parent; nezatváraj\n\n        // Zavri len tento dropdown. NEvolaj stopPropagation na custom evente,\n        // aby fungovali aj tvoje app-level listenery (riadok 480).\n        this.classList.remove('active');\n        this.popup.hide(true);\n    }\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n        this._instanceId = ++Dropdown._instanceId;\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets or removes the 'portaled' attribute on the element.\n     * When the value is truthy, the attribute 'portaled' is added to the element.\n     * When the value is falsy, the attribute 'portaled' is removed from the element.\n     * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.\n     */\n    set portaled(value) {\n        if (value) {\n            this.setAttribute('portaled', value);\n        } else {\n            this.removeAttribute('portaled');\n        }\n    }\n\n    /**\n     * Getter method for the `portaled` property.\n     * Checks if the `portaled` attribute is present on the element.\n     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.\n     */\n    get portaled() {\n        return this.getAttribute('portaled') || '';\n    }\n\n    /**\n     * Checks whether the element has the 'portaled' attribute.\n     * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.\n     */\n    get isPortaled() {\n        return this.hasAttribute('portaled');\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('part', 'popup');\n\n        if(this.isPortaled)\n            popup.setAttribute('portal', this.portaled);\n\n        popup.append(anchorSlot, slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        this.syncPopupOwner();\n        this.syncOwnedContentOwner();\n\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        // Close when any actionable wje-menu-item inside the popup is clicked (works across Shadow DOM via composed path)\n        event.addListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n              Array.from(this.querySelectorAll('wje-menu-item')),\n              'click',\n              'wje-menu-item:click',\n              this.onClose\n            );\n        }\n\n        this.onSlotChange = () => this.syncAria();\n        this.anchorSlot.addEventListener('slotchange', this.onSlotChange);\n\n        this.syncAria();\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n        event.removeListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n        event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n        this.anchorSlot?.removeEventListener('slotchange', this.onSlotChange);\n    }\n\n    /**\n     * Handles popup hide events and closes only the dropdown that owns the popup.\n     * This prevents nested dropdowns from collapsing their parent dropdown when the\n     * child popup is hidden.\n     * @param {Event} e The popup hide event.\n     */\n    popupHideCallback = (e) => {\n        if (this.classList.contains('active') && e.target === this) {\n            this.toggleCallback(e);\n        }\n    };\n\n    /**\n     * Assigns the current dropdown instance as the owner of its popup layers.\n     * Owner metadata is later used to resolve which dropdown should react to\n     * delegated menu-item clicks, including portaled popup content.\n     */\n    syncPopupOwner() {\n        if (!this.popup) return;\n\n        this.popup.ownerDropdown = this;\n\n        if (this.popup.native) {\n            this.popup.native.ownerDropdown = this;\n        }\n\n        if (this.popup.floatingEl) {\n            this.popup.floatingEl.ownerDropdown = this;\n        }\n    }\n\n    /**\n     * Recursively assigns owner metadata to the dropdown content subtree while\n     * leaving nested dropdown roots untouched, so each nested dropdown can keep\n     * its own ownership boundary.\n     * @param {HTMLElement} [root] The subtree root whose children should inherit this dropdown owner. Defaults to the current dropdown.\n     */\n    syncOwnedContentOwner(root = this) {\n        const children = Array.from(root.children || []);\n\n        for (const child of children) {\n            if (child.tagName === 'WJE-DROPDOWN' && child !== this) {\n                continue;\n            }\n\n            child.ownerDropdown = this;\n            this.syncOwnedContentOwner(child);\n        }\n    }\n\n    /**\n     * Resolves the dropdown that owns a clicked menu item. The lookup prefers\n     * explicit owner metadata and falls back to DOM traversal so both regular\n     * and portaled dropdown content can be scoped correctly.\n     * @param {EventTarget[]} path The composed event path.\n     * @param {HTMLElement} item The clicked menu item element.\n     * @returns {HTMLElement|null} The owning dropdown element or null when it cannot be resolved.\n     */\n    getMenuItemOwner(path, item) {\n        if (item?.ownerDropdown) return item.ownerDropdown;\n\n        if (item?.closest) {\n            const closestDropdown = item.closest('wje-dropdown');\n            if (closestDropdown) return closestDropdown;\n        }\n\n        const ownerFromPath = path.find((node) => node?.ownerDropdown)?.ownerDropdown;\n        if (ownerFromPath) return ownerFromPath;\n\n        const dropdownFromPath = path.find((node) => node?.tagName === 'WJE-DROPDOWN');\n        if (dropdownFromPath) return dropdownFromPath;\n\n        return null;\n    }\n\n    /**\n     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\n     * This works even when the menu is portaled, because we rely on the composed path.\n     */\n    onMenuItemClick = (e) => {\n        // Find nearest wje-menu-item in the composed path\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        const item = path.find((n) => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n\n        const owner = this.getMenuItemOwner(path, item);\n        if (owner && owner !== this) return;\n\n        // Ignore disabled items\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n\n        // If this item contains a nested submenu (wje-menu), it's not a leaf -> don't close yet\n        if (typeof item.querySelector === 'function' && item.querySelector('wje-menu')) return;\n\n        // Leaf item selected -> close dropdown (which calls popup.hide(true) inside onClose)\n        this.onClose();\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        if (this.classList.contains('active')) {\n            e.stopPropagation();\n            this.onClose();\n        } else {\n            e.stopPropagation();\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        this.classList.add('active');\n        this.syncAria();\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(true); // Show tooltip\n                this.syncPopupOwner();\n\n                event.addListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide(true);\n            });\n    };\n\n    beforeClose = () => {\n        // Do nothing\n    };\n\n    afterClose = () => {\n        // Do nothing\n    };\n\n    onClose = () => {\n        this.classList.remove('active');\n        this.syncAria();\n        Promise.resolve(this.beforeClose(this))\n            .then((res) => {\n                if (this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.hide(true); // Show tooltip\n\n                event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterClose(this));\n            })\n            .catch((error) => {\n                this.classList.add('active');\n                this.popup.show(true);\n            });\n    }\n\n    /**\n     * Syncs ARIA attributes for the trigger element.\n     */\n    syncAria() {\n        const triggerEl = this.anchorSlot?.assignedElements?.({ flatten: true })?.[0];\n        if (!triggerEl) return;\n\n        const popupId = this.popup?.id || `wje-dropdown-popup-${this._instanceId}`;\n        if (this.popup && !this.popup.id) this.popup.id = popupId;\n\n        const hasMenu = !!this.querySelector('wje-menu');\n        triggerEl.setAttribute('aria-haspopup', hasMenu ? 'menu' : 'dialog');\n        triggerEl.setAttribute('aria-expanded', this.classList.contains('active') ? 'true' : 'false');\n        triggerEl.setAttribute('aria-controls', popupId);\n    }\n\n    #onMenuItemCustom = (e) => {\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        if (!this.popup || !this.popup.floatingEl || !path.includes(this.popup.floatingEl)) return;\n\n        const item = path.find(n => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n        const owner = this.getMenuItemOwner(path, item);\n        if (owner && owner !== this) return;\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n        if (item.hasAttribute('has-submenu')) return; // parent; nezatváraj\n\n        // Zavri len tento dropdown. NEvolaj stopPropagation na custom evente,\n        // aby fungovali aj tvoje app-level listenery (riadok 480).\n        this.classList.remove('active');\n        this.popup.hide(true);\n    }\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}

package/dist/wje-input.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 { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            slot[name='error'] {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\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    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([invalid]) {\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
+const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            slot[name='error'] {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\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    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([invalid]) {\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-input-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-input-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 const _Input = class _Input extends FormAssociatedElement {
   /**
    * Creates an instance of Input.
@@ -199,9 +199,13 @@ const _Input = class _Input extends FormAssociatedElement {
     this.syncAria();
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    var _a;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    var _a, _b;
     if (oldValue === newValue) return;
+    const labelVisibilityChanged = Boolean(oldValue) !== Boolean(newValue);
+    if (name === "label" && labelVisibilityChanged) {
+      (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+      return;
+    }
     if (!this.input) {
       this.syncAria();
       return;
@@ -224,6 +228,13 @@ const _Input = class _Input extends FormAssociatedElement {
       this.input.placeholder = this.placeholder;
     } else if (name === "label") {
       if (this.labelElement) this.labelElement.innerText = this.label || "";
+    } else if (name === "invalid") {
+      (_b = this.native) == null ? void 0 : _b.classList.toggle("has-error", this.invalid);
+      if (this.invalid && this.validationMessage) {
+        this.showInvalidMessage();
+      } else if (!this.invalid && this.errorMessage) {
+        this.errorMessage.textContent = "";
+      }
     }
     this.syncAria();
   }

package/dist/wje-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n */\nexport default class Input extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Input.\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Input._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Retrieves the value from the input element if available; otherwise,\n     * returns the internal _value property or an empty string as the default.\n     * @returns {string} The current value from the input element, the internal _value, or an empty string.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the custom error display attribute for an element.\n     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n     */\n    set customErrorDisplay(value) {\n        if (value) {\n            this.setAttribute('custom-error-display', '');\n        } else {\n            this.removeAttribute('custom-error-display');\n        }\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets or removes the 'clearable' attribute on the element.\n     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n     */\n    set clearable(value) {\n        if (value) {\n            this.setAttribute('clearable', '');\n        } else {\n            this.removeAttribute('clearable');\n        }\n    }\n\n    /**\n     * Checks if the 'clearable' attribute is present on the element.\n     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n     */\n    get clearable() {\n        return this.hasAttribute('clearable');\n    }\n\n    /**\n     * Sets the placeholder value for an element. If the provided value is non-empty,\n     * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n     * the \"placeholder\" attribute from the element.\n     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n     */\n    set placeholder(value) {\n        if (value) {\n            this.setAttribute('placeholder', value);\n        } else {\n            this.removeAttribute('placeholder');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'placeholder' attribute from the element.\n     * If the attribute is not set, it returns an empty string.\n     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n     */\n    get placeholder() {\n        return this.getAttribute('placeholder') || '';\n    }\n\n    /**\n     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n     * If no value is provided, it removes the `variant` attribute from the element.\n     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n     */\n    set variant(value) {\n        if (value) {\n            this.setAttribute('variant', value);\n        } else {\n            this.removeAttribute('variant');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'variant' attribute from the element.\n     * If the attribute is not set, it defaults to 'default'.\n     * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'default';\n    }\n\n    /**\n     * The class name of the input element.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Getter for the cssStyleSheet attribute.\n     * @returns {CSSStyleSheet} The CSS style sheet of the input element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['type', 'value', 'name', 'disabled', 'placeholder', 'label', 'message', 'error-inline', 'required', 'readonly', 'invalid'];\n    }\n\n    /**\n     * Sets up the attributes for the input.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.defaultValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'type') {\n            this.input.type = this.getAttribute('type') || 'text';\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.disabled;\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder;\n        } else if (name === 'label') {\n            if (this.labelElement) this.labelElement.innerText = this.label || '';\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the input element.\n     * @returns {DocumentFragment} The drawn input.\n     */\n    draw() {\n        let hasSlotStart = this.hasSlot(this, 'start');\n        let hasSlotEnd = this.hasSlot(this, 'end');\n        let hasSlotError = this.hasSlot(this, 'error');\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input', this.variant);\n\n        if (this.invalid) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        // Label\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        // Input\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('value', this.value || '');\n        input.classList.add('form-control');\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        errorSlot.setAttribute('part', 'error-slot');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-input-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let start = null;\n        if (hasSlotStart) {\n            start = document.createElement('slot');\n            start.setAttribute('name', 'start');\n            start.setAttribute('part', 'start');\n        }\n\n        let end = null;\n        if (hasSlotEnd) {\n            end = document.createElement('slot');\n            end.setAttribute('name', 'end');\n            end.setAttribute('part', 'end');\n        }\n\n        if (hasSlotStart) {\n            wrapper.appendChild(start); // zmenene\n            native.classList.add('has-start');\n        }\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.append(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        if (this.clearable) {\n            this.clear = document.createElement('wje-button');\n            this.clear.classList.add('clear');\n            this.clear.setAttribute('fill', 'link');\n            this.clear.setAttribute('part', 'clear');\n\n            let clearIcon = document.createElement('wje-icon');\n            clearIcon.setAttribute('name', 'x');\n            this.clear.appendChild(clearIcon);\n            inputWrapper.appendChild(this.clear);\n        }\n\n        if (hasSlotEnd) {\n            wrapper.appendChild(end);// zmenene\n            native.classList.add('has-end');\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n        this.errorMessage = error;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Runs after the input is drawn to the DOM.\n     */\n    afterDraw() {\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid && this.checkValidity()) {\n                this.invalid = false;\n                this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            event.dispatchCustomEvent(this, 'wje-input:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.addEventListener('focus', () => this.input.focus());\n\n        if (this.clear) {\n            this.clear.addEventListener('wje-button:click', (e) => {\n                this.input.value = '';\n                event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n            });\n        }\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Checks whether the input has a slot.\n     * @param {HTMLElement} el The element to check.\n     * @param {string} slotName The name of the slot to check for.\n     * @returns {boolean} Whether the input has the slot.\n     */\n    hasSlot(el, slotName = null) {\n        let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n        return el.querySelectorAll(selector).length > 0 ? true : false;\n    }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.\n * @cssproperty [--wje-input-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n */\nexport default class Input extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Input.\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Input._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Retrieves the value from the input element if available; otherwise,\n     * returns the internal _value property or an empty string as the default.\n     * @returns {string} The current value from the input element, the internal _value, or an empty string.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the custom error display attribute for an element.\n     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n     */\n    set customErrorDisplay(value) {\n        if (value) {\n            this.setAttribute('custom-error-display', '');\n        } else {\n            this.removeAttribute('custom-error-display');\n        }\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets or removes the 'clearable' attribute on the element.\n     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n     */\n    set clearable(value) {\n        if (value) {\n            this.setAttribute('clearable', '');\n        } else {\n            this.removeAttribute('clearable');\n        }\n    }\n\n    /**\n     * Checks if the 'clearable' attribute is present on the element.\n     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n     */\n    get clearable() {\n        return this.hasAttribute('clearable');\n    }\n\n    /**\n     * Sets the placeholder value for an element. If the provided value is non-empty,\n     * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n     * the \"placeholder\" attribute from the element.\n     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n     */\n    set placeholder(value) {\n        if (value) {\n            this.setAttribute('placeholder', value);\n        } else {\n            this.removeAttribute('placeholder');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'placeholder' attribute from the element.\n     * If the attribute is not set, it returns an empty string.\n     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n     */\n    get placeholder() {\n        return this.getAttribute('placeholder') || '';\n    }\n\n    /**\n     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n     * If no value is provided, it removes the `variant` attribute from the element.\n     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n     */\n    set variant(value) {\n        if (value) {\n            this.setAttribute('variant', value);\n        } else {\n            this.removeAttribute('variant');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'variant' attribute from the element.\n     * If the attribute is not set, it defaults to 'default'.\n     * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'default';\n    }\n\n    /**\n     * The class name of the input element.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Getter for the cssStyleSheet attribute.\n     * @returns {CSSStyleSheet} The CSS style sheet of the input element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['type', 'value', 'name', 'disabled', 'placeholder', 'label', 'message', 'error-inline', 'required', 'readonly', 'invalid'];\n    }\n\n    /**\n     * Sets up the attributes for the input.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.defaultValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        const labelVisibilityChanged = Boolean(oldValue) !== Boolean(newValue);\n\n        if (name === 'label' && labelVisibilityChanged) {\n            super.attributeChangedCallback?.(name, oldValue, newValue);\n            return;\n        }\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'type') {\n            this.input.type = this.getAttribute('type') || 'text';\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.disabled;\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder;\n        } else if (name === 'label') {\n            if (this.labelElement) this.labelElement.innerText = this.label || '';\n        } else if (name === 'invalid') {\n            this.native?.classList.toggle('has-error', this.invalid);\n\n            if (this.invalid && this.validationMessage) {\n                this.showInvalidMessage();\n            } else if (!this.invalid && this.errorMessage) {\n                this.errorMessage.textContent = '';\n            }\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the input element.\n     * @returns {DocumentFragment} The drawn input.\n     */\n    draw() {\n        let hasSlotStart = this.hasSlot(this, 'start');\n        let hasSlotEnd = this.hasSlot(this, 'end');\n        let hasSlotError = this.hasSlot(this, 'error');\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input', this.variant);\n\n        if (this.invalid) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        // Label\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        // Input\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('value', this.value || '');\n        input.classList.add('form-control');\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        errorSlot.setAttribute('part', 'error-slot');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-input-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let start = null;\n        if (hasSlotStart) {\n            start = document.createElement('slot');\n            start.setAttribute('name', 'start');\n            start.setAttribute('part', 'start');\n        }\n\n        let end = null;\n        if (hasSlotEnd) {\n            end = document.createElement('slot');\n            end.setAttribute('name', 'end');\n            end.setAttribute('part', 'end');\n        }\n\n        if (hasSlotStart) {\n            wrapper.appendChild(start); // zmenene\n            native.classList.add('has-start');\n        }\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.append(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        if (this.clearable) {\n            this.clear = document.createElement('wje-button');\n            this.clear.classList.add('clear');\n            this.clear.setAttribute('fill', 'link');\n            this.clear.setAttribute('part', 'clear');\n\n            let clearIcon = document.createElement('wje-icon');\n            clearIcon.setAttribute('name', 'x');\n            this.clear.appendChild(clearIcon);\n            inputWrapper.appendChild(this.clear);\n        }\n\n        if (hasSlotEnd) {\n            wrapper.appendChild(end);// zmenene\n            native.classList.add('has-end');\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n        this.errorMessage = error;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Runs after the input is drawn to the DOM.\n     */\n    afterDraw() {\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid && this.checkValidity()) {\n                this.invalid = false;\n                this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            event.dispatchCustomEvent(this, 'wje-input:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.addEventListener('focus', () => this.input.focus());\n\n        if (this.clear) {\n            this.clear.addEventListener('wje-button:click', (e) => {\n                this.input.value = '';\n                event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n            });\n        }\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Checks whether the input has a slot.\n     * @param {HTMLElement} el The element to check.\n     * @param {string} slotName The name of the slot to check for.\n     * @returns {boolean} Whether the input has the slot.\n     */\n    hasSlot(el, slotName = null) {\n        let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n        return el.querySelectorAll(selector).length > 0 ? true : false;\n    }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}

package/dist/wje-option.js

@@ -135,7 +135,7 @@ class Option extends WJElement {
    */
   get checkbox() {
     var _a;
-    return (_a = this.closest("wje-select")) == null ? void 0 : _a.hasAttribute("checkbox");
+    return (_a = this.ownerSelect) == null ? void 0 : _a.hasAttribute("checkbox");
   }
   /**
    * Determines whether the closest 'wje-select' element has the 'multiple' attribute.
@@ -143,7 +143,13 @@ class Option extends WJElement {
    */
   get multiple() {
     var _a;
-    return ((_a = this.closest("wje-select")) == null ? void 0 : _a.hasAttribute("multiple")) || false;
+    return ((_a = this.ownerSelect) == null ? void 0 : _a.hasAttribute("multiple")) || false;
+  }
+  get ownerSelect() {
+    return this._ownerSelect || this.closest("wje-select");
+  }
+  set ownerSelect(value) {
+    this._ownerSelect = value;
   }
   /**
    * Sets the value attribute of the option.

package/dist/wje-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n */\nexport default class Option extends WJElement {\n\t/**\n\t * Creates an instance of Option.\n\t * @class\n\t */\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Dependencies of the Option component.\n\t */\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t */\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t */\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/**\n\t * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t */\n\tget checkbox() {\n\t\treturn this.closest('wje-select')?.hasAttribute('checkbox');\n\t}\n\n\t/**\n\t * Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t */\n\tget multiple() {\n\t\treturn this.closest('wje-select')?.hasAttribute('multiple') || false;\n\t}\n\n\t/**\n\t * Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/**\n\t * Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t */\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/**\n\t * This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {*} old The previous value of the attribute before the change.\n\t * @param {*} newName The new value of the attribute after the change.\n\t * @returns {void} This method does not return a value.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet endWrapper = document.createElement('span');\n\t\tendWrapper.classList.add('end-slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tendWrapper.append(end);\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(endWrapper);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t */\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\n\t\t// If `selected` was set before render, attributeChangedCallback may have run\n\t\t// before `this.check` existed. Sync the checkbox state once slots exist.\n\t\tif (this.checkbox && this.multiple) {\n\t\t\tthis.#setCheckbox(this.selected);\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tthis.setAriaState({\n\t\t\trole: 'option',\n\t\t\tselected: this.selected,\n\t\t\tdisabled: this.hasAttribute('disabled'),\n\t\t});\n\t}\n\n\t/**\n\t * Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/**\n\t * Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t */\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/**\n\t * Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t */\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/**\n\t * Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tconst assigned = this.check?.assignedElements({ flatten: true }) ?? [];\n\t\tconst arr = assigned.filter((item) => this.#isCheckbox(item));\n\t\tif (arr.length > 0) arr[0].checked = checked;\n\t}\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n */\nexport default class Option extends WJElement {\n\t/**\n\t * Creates an instance of Option.\n\t * @class\n\t */\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Dependencies of the Option component.\n\t */\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t */\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t */\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/**\n\t * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t */\n\tget checkbox() {\n\t\treturn this.ownerSelect?.hasAttribute('checkbox');\n\t}\n\n\t/**\n\t * Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t */\n\tget multiple() {\n\t\treturn this.ownerSelect?.hasAttribute('multiple') || false;\n\t}\n\n\tget ownerSelect() {\n\t\treturn this._ownerSelect || this.closest('wje-select');\n\t}\n\n\tset ownerSelect(value) {\n\t\tthis._ownerSelect = value;\n\t}\n\n\t/**\n\t * Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/**\n\t * Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t */\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/**\n\t * This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {*} old The previous value of the attribute before the change.\n\t * @param {*} newName The new value of the attribute after the change.\n\t * @returns {void} This method does not return a value.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet endWrapper = document.createElement('span');\n\t\tendWrapper.classList.add('end-slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tendWrapper.append(end);\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(endWrapper);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t */\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\n\t\t// If `selected` was set before render, attributeChangedCallback may have run\n\t\t// before `this.check` existed. Sync the checkbox state once slots exist.\n\t\tif (this.checkbox && this.multiple) {\n\t\t\tthis.#setCheckbox(this.selected);\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tthis.setAriaState({\n\t\t\trole: 'option',\n\t\t\tselected: this.selected,\n\t\t\tdisabled: this.hasAttribute('disabled'),\n\t\t});\n\t}\n\n\t/**\n\t * Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/**\n\t * Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t */\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/**\n\t * Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t */\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/**\n\t * Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tconst assigned = this.check?.assignedElements({ flatten: true }) ?? [];\n\t\tconst arr = assigned.filter((item) => this.#isCheckbox(item));\n\t\tif (arr.length > 0) arr[0].checked = checked;\n\t}\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":"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"}