wj-elements 0.7.0 → 0.7.1

package/dist/wje-select.js

@@ -23,7 +23,7 @@ import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
 import { P as Popup } from "./popup.element-CwXvVFK7.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\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.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n.display-wrapper {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    position: relative;\n}\n\n.display-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.display-text {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n}\n\n.display-text[data-placeholder-visible]::before {\n    content: attr(data-placeholder);\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    box-sizing: border-box;\n    min-width: 100%;\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .display-wrapper {\n    display: none;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\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-select-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-select-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.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\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";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\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.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n.display-wrapper {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    position: relative;\n}\n\n.display-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.display-text {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n}\n\n.display-text[data-placeholder-visible]::before {\n    content: attr(data-placeholder);\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    box-sizing: border-box;\n    min-width: 100%;\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .display-wrapper {\n    display: none;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    grid-column: 2;\n    grid-row: 1;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: var(--wje-spacing-3x-small);\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    flex: 0 0 auto;\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\n:host([multiple]) wje-chip {\n    flex: 0 1 auto;\n    min-width: var(--wje-select-chip-min-width, 2.5rem);\n    max-width: 100%;\n}\n\n:host([multiple]) wje-chip:first-of-type {\n    flex-shrink: 10;\n}\n\n:host([multiple]) wje-button[part='clear'] {\n    grid-column: 3;\n    grid-row: 1;\n}\n\n:host([multiple]) .slot-end {\n    grid-column: 4;\n    grid-row: 1;\n}\n\n:host([multiple]) [slot='arrow'] {\n    grid-column: 5;\n    grid-row: 1;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\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-select-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-select-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.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\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";
 const _Select = class _Select extends FormAssociatedElement {
   constructor() {
     super();

package/dist/wje-sliding-container.js

@@ -3,9 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import { event } from "./event.js";
-const styles = ":host {\n    display: block;\n    z-index: 9999;\n    position: relative;\n    height: 100%;\n    right: unset;\n    left: unset;\n    .close-button {\n        position: absolute;\n        top: 0;\n        right: 0;\n        z-index: 1000;\n    }\n}\n\n:host([hide-button]) {\n    .close-button {\n        display: none;\n    }\n}\n\n.sliding-container-backdrop {\n    display: none;\n}\n\n.sliding-container-wrapper {\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n\n    position: absolute;\n    width: 0;\n    height: 100%;\n}\n\n.native-sliding-container-inner {\n    height: 100%;\n    position: absolute;\n}\n\n.sliding-container-sheet-handle-area {\n    display: none;\n}\n\n:host(.bottom-sheet) {\n    inset: 0;\n    pointer-events: none;\n}\n\n:host(.bottom-sheet.open) {\n    pointer-events: auto;\n    overscroll-behavior: contain;\n}\n\n:host(.bottom-sheet) .sliding-container-backdrop {\n    display: block;\n    position: fixed;\n    inset: 0;\n    z-index: 0;\n    opacity: 0;\n    pointer-events: none;\n    touch-action: none;\n    overscroll-behavior: none;\n    background: var(--wje-sliding-container-backdrop-background, var(--wje-backdrop, rgba(0, 0, 0, .35)));\n}\n\n:host(.bottom-sheet.open) .sliding-container-backdrop {\n    pointer-events: auto;\n}\n\n:host(.bottom-sheet) .sliding-container-wrapper {\n    position: fixed;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n    z-index: 1;\n}\n\n:host(.bottom-sheet) .sliding-container-transparent {\n    display: none;\n}\n\n:host(.bottom-sheet) .native-sliding-container {\n    position: fixed;\n    top: auto;\n    height: fit-content;\n    overflow: hidden;\n    pointer-events: auto;\n    display: flex;\n    flex-direction: column;\n    overscroll-behavior: contain;\n    background: var(--wje-sliding-container-background);\n    box-shadow: var(--wje-sliding-container-box-shadow, var(--wje-sliding-container-shadow));\n    border-radius: var(--wje-sliding-container-sheet-border-radius, var(--wje-sliding-container-border-radius) var(--wje-sliding-container-border-radius) 0 0);\n}\n\n:host(.bottom-sheet) .native-sliding-container-inner {\n    position: relative;\n    flex: 1 1 auto;\n    min-height: 0;\n    height: auto;\n    max-height: inherit;\n    overflow: auto;\n    overscroll-behavior: contain;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle-area {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 var(--wje-sliding-container-sheet-handle-area-height, 24px);\n    height: var(--wje-sliding-container-sheet-handle-area-height, 24px);\n    cursor: ns-resize;\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle {\n    width: var(--wje-sliding-container-sheet-handle-width, 36px);\n    height: var(--wje-sliding-container-sheet-handle-height, 2px);\n    background: var(--wje-sliding-container-sheet-handle-background, var(--wje-border-color));\n    border-radius: var(--wje-sliding-container-sheet-handle-radius, 999px);\n}\n";
-let documentScrollLocks = 0;
-let documentScrollState = null;
+const styles = ":host {\n    display: block;\n    z-index: var(--wje-sliding-container-z-index, 1000);\n    position: relative;\n    height: 100%;\n    right: unset;\n    left: unset;\n    .close-button {\n        position: absolute;\n        top: 0;\n        right: 0;\n        z-index: 2;\n    }\n}\n\n:host([hide-button]) {\n    .close-button {\n        display: none;\n    }\n}\n\n.sliding-container-backdrop {\n    display: none;\n}\n\n.sliding-container-wrapper {\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n\n    position: absolute;\n    width: 0;\n    height: 100%;\n}\n\n.native-sliding-container-inner {\n    height: 100%;\n    position: absolute;\n}\n\n.sliding-container-sheet-handle-area {\n    display: none;\n}\n\n:host(.bottom-sheet) {\n    inset: 0;\n    pointer-events: none;\n    z-index: var(--wje-sliding-container-bottom-sheet-z-index, var(--wje-sliding-container-z-index, 1000));\n}\n\n:host(.bottom-sheet.open) {\n    overscroll-behavior: contain;\n}\n\n:host(.bottom-sheet) .sliding-container-backdrop {\n    display: none;\n    position: fixed;\n    inset: 0;\n    z-index: var(--wje-sliding-container-bottom-sheet-backdrop-z-index, 0);\n    opacity: 0;\n    pointer-events: none;\n    touch-action: none;\n    overscroll-behavior: none;\n    background: var(--wje-sliding-container-backdrop-background, var(--wje-backdrop, rgba(0, 0, 0, .35)));\n}\n\n:host(.bottom-sheet.open) .sliding-container-backdrop {\n    pointer-events: auto;\n}\n\n:host(.bottom-sheet) .sliding-container-wrapper {\n    position: fixed;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n    z-index: var(--wje-sliding-container-bottom-sheet-panel-z-index, 1);\n}\n\n:host(.bottom-sheet) .sliding-container-transparent {\n    display: none;\n}\n\n:host(.bottom-sheet) .native-sliding-container {\n    position: fixed;\n    top: auto;\n    height: fit-content;\n    overflow: hidden;\n    pointer-events: auto;\n    display: flex;\n    flex-direction: column;\n    overscroll-behavior: contain;\n    background: var(--wje-sliding-container-background);\n    box-shadow: var(--wje-sliding-container-box-shadow, var(--wje-sliding-container-shadow));\n    border-radius: var(--wje-sliding-container-sheet-border-radius, var(--wje-sliding-container-border-radius) var(--wje-sliding-container-border-radius) 0 0);\n}\n\n:host(.bottom-sheet) .native-sliding-container-inner {\n    position: relative;\n    flex: 1 1 auto;\n    min-height: 0;\n    height: auto;\n    max-height: inherit;\n    overflow: auto;\n    overscroll-behavior: contain;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle-area {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 var(--wje-sliding-container-sheet-handle-area-height, 24px);\n    height: var(--wje-sliding-container-sheet-handle-area-height, 24px);\n    cursor: grab;\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle-area:active {\n    cursor: grabbing;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle {\n    width: var(--wje-sliding-container-sheet-handle-width, 36px);\n    height: var(--wje-sliding-container-sheet-handle-height, 2px);\n    background: var(--wje-sliding-container-sheet-handle-background, var(--wje-border-color));\n    border-radius: var(--wje-sliding-container-sheet-handle-radius, 999px);\n}\n";
 class SlidingContainer extends WJElement {
   /**
    * Creates an instance of SlidingContainer.
@@ -14,6 +12,20 @@ class SlidingContainer extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "SlidingContainer");
+    /**
+     * Handles backdrop click dismissal.
+     * @param {MouseEvent} e The click event.
+     */
+    __publicField(this, "handleBackdropClick", (e) => {
+      if (this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil || Date.now() < this._sheetBackdropHandledUntil) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      if (this.isBackdropElement(e.target)) {
+        this.close(e);
+      }
+    });
     /**
      * Stops a handle interaction from dismissing the bottom sheet.
      * @param {Event} e The interaction emitted by the resize handle.
@@ -79,7 +91,7 @@ class SlidingContainer extends WJElement {
      * @param {PointerEvent} e The pointer event.
      */
     __publicField(this, "handleBackdropPointerStart", (e) => {
-      if (!this.isBottomSheet() || e.target !== this.backdropElement || this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil) {
+      if (!this.isBottomSheet() || !this.isBackdropElement(e.target) || this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil) {
         this._sheetBackdropGesture = null;
         return;
       }
@@ -108,7 +120,7 @@ class SlidingContainer extends WJElement {
      */
     __publicField(this, "handleBackdropPointerEnd", (e) => {
       if (!this._sheetBackdropGesture || e.pointerId !== this._sheetBackdropGesture.pointerId) return;
-      const shouldClose = !this._sheetBackdropGesture.hasMoved && e.target === this.backdropElement && !this.isEventInsideSheet(e) && Date.now() >= this._sheetIgnoreDismissUntil;
+      const shouldClose = !this._sheetBackdropGesture.hasMoved && this.isBackdropElement(e.target) && !this.isEventInsideSheet(e) && Date.now() >= this._sheetIgnoreDismissUntil;
       this._sheetBackdropGesture = null;
       this._sheetBackdropHandledUntil = Date.now() + 350;
       if (shouldClose) {
@@ -211,7 +223,6 @@ class SlidingContainer extends WJElement {
     this._sheetIgnoreDismissUntil = 0;
     this._sheetBackdropGesture = null;
     this._sheetBackdropHandledUntil = 0;
-    this._hasLockedDocumentScroll = false;
     this._bottomSheetScopeFrame = null;
     this._resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
@@ -429,28 +440,28 @@ class SlidingContainer extends WJElement {
     this.setAttribute("sheet-resizable", value);
   }
   /**
-   * Gets the mobile bottom sheet scope.
+   * Gets the mobile bottom sheet panel scope. The backdrop always covers the viewport.
    * @returns {string} Either 'viewport', 'container', or 'parent'.
    */
   get sheetScope() {
     return this.getAttribute("sheet-scope") || "viewport";
   }
   /**
-   * Sets the mobile bottom sheet scope.
+   * Sets the mobile bottom sheet panel scope.
    * @param {string} value The new boundary mode for the mobile sheet.
    */
   set sheetScope(value) {
     this.setAttribute("sheet-scope", value);
   }
   /**
-   * Gets the selector used for container-scoped mobile bottom sheets.
+   * Gets the selector used for container-scoped mobile bottom sheet panels.
    * @returns {string|null} A CSS selector used to find the composed boundary ancestor.
    */
   get sheetBoundary() {
     return this.getAttribute("sheet-boundary");
   }
   /**
-   * Sets the selector used for container-scoped mobile bottom sheets.
+   * Sets the selector used for container-scoped mobile bottom sheet panels.
    * @param {string} value Selector for the boundary element.
    */
   set sheetBoundary(value) {
@@ -551,6 +562,19 @@ class SlidingContainer extends WJElement {
     (_a = this.animation) == null ? void 0 : _a.cancel();
     (_b = this.nativeAnimation) == null ? void 0 : _b.cancel();
     this.endSheetDrag();
+    this.removePortalBackdrop();
+    document.removeEventListener(this.trigger, this.triggerEvent);
+  }
+  /**
+   * Cleans up global listeners and portaled layers.
+   */
+  afterDisconnect() {
+    var _a, _b, _c;
+    (_a = this.animation) == null ? void 0 : _a.cancel();
+    (_b = this.nativeAnimation) == null ? void 0 : _b.cancel();
+    this.endSheetDrag();
+    this.removePortalBackdrop();
+    (_c = this._resizeObserver) == null ? void 0 : _c.disconnect();
     document.removeEventListener(this.trigger, this.triggerEvent);
   }
   /**
@@ -569,24 +593,7 @@ class SlidingContainer extends WJElement {
     if (this._isOpen && isBottomSheet) {
       backdrop.style.opacity = "var(--wje-sliding-container-backdrop-opacity, 1)";
     }
-    backdrop.addEventListener("wheel", this.preventBottomSheetScroll, { passive: false });
-    backdrop.addEventListener("touchmove", this.preventBottomSheetScroll, { passive: false });
-    if (this.backdropDismiss) {
-      backdrop.addEventListener("pointerdown", this.handleBackdropPointerStart);
-      backdrop.addEventListener("pointermove", this.handleBackdropPointerMove);
-      backdrop.addEventListener("pointerup", this.handleBackdropPointerEnd);
-      backdrop.addEventListener("pointercancel", this.handleBackdropPointerCancel);
-      backdrop.addEventListener("click", (e) => {
-        if (this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil || Date.now() < this._sheetBackdropHandledUntil) {
-          e.preventDefault();
-          e.stopPropagation();
-          return;
-        }
-        if (e.target === backdrop) {
-          this.close(e);
-        }
-      });
-    }
+    this.addBackdropListeners(backdrop);
     let wrapperDiv = document.createElement("div");
     wrapperDiv.classList.add("sliding-container-wrapper");
     let transparentDiv = document.createElement("div");
@@ -668,6 +675,111 @@ class SlidingContainer extends WJElement {
   isBottomSheet() {
     return this.mobilePresentation === "bottom-sheet" && window.innerWidth <= +this.mobileBreakPoint;
   }
+  /**
+   * Adds interaction listeners to a backdrop element.
+   * @param {HTMLElement} backdrop The backdrop element.
+   */
+  addBackdropListeners(backdrop) {
+    backdrop.addEventListener("wheel", this.preventBottomSheetScroll, { passive: false });
+    backdrop.addEventListener("touchmove", this.preventBottomSheetScroll, { passive: false });
+    if (!this.backdropDismiss) return;
+    backdrop.addEventListener("pointerdown", this.handleBackdropPointerStart);
+    backdrop.addEventListener("pointermove", this.handleBackdropPointerMove);
+    backdrop.addEventListener("pointerup", this.handleBackdropPointerEnd);
+    backdrop.addEventListener("pointercancel", this.handleBackdropPointerCancel);
+    backdrop.addEventListener("click", this.handleBackdropClick);
+  }
+  /**
+   * Removes interaction listeners from a backdrop element.
+   * @param {HTMLElement} backdrop The backdrop element.
+   */
+  removeBackdropListeners(backdrop) {
+    backdrop.removeEventListener("wheel", this.preventBottomSheetScroll);
+    backdrop.removeEventListener("touchmove", this.preventBottomSheetScroll);
+    backdrop.removeEventListener("pointerdown", this.handleBackdropPointerStart);
+    backdrop.removeEventListener("pointermove", this.handleBackdropPointerMove);
+    backdrop.removeEventListener("pointerup", this.handleBackdropPointerEnd);
+    backdrop.removeEventListener("pointercancel", this.handleBackdropPointerCancel);
+    backdrop.removeEventListener("click", this.handleBackdropClick);
+  }
+  /**
+   * Checks whether an element is one of this component's backdrop layers.
+   * @param {EventTarget|null} element The event target.
+   * @returns {boolean}
+   */
+  isBackdropElement(element) {
+    return element === this.backdropElement || element === this._portalBackdropElement;
+  }
+  /**
+   * Gets the backdrop element that is active for the current presentation.
+   * @param {object} options Options for resolving the backdrop.
+   * @param {boolean} options.createPortal Creates the body-level mobile backdrop when needed.
+   * @returns {HTMLElement|null}
+   */
+  getBackdropElement({ createPortal = false } = {}) {
+    if (!this.isBottomSheet()) return this.backdropElement;
+    if (createPortal) return this.ensurePortalBackdrop();
+    return this._portalBackdropElement || this.backdropElement;
+  }
+  /**
+   * Creates the body-level backdrop used by mobile bottom sheets.
+   * @returns {HTMLElement} Element appended to document.body for page-level dimming.
+   */
+  ensurePortalBackdrop() {
+    if (!this._portalBackdropElement) {
+      this._portalBackdropElement = document.createElement("div");
+      this._portalBackdropElement.setAttribute("data-wje-sliding-container-backdrop", "");
+      this._portalBackdropElement.classList.add("sliding-container-backdrop", "sliding-container-backdrop-portal");
+      this.addBackdropListeners(this._portalBackdropElement);
+      document.body.append(this._portalBackdropElement);
+    }
+    this.syncPortalBackdropStyles();
+    return this._portalBackdropElement;
+  }
+  /**
+   * Removes the body-level mobile backdrop.
+   */
+  removePortalBackdrop() {
+    if (!this._portalBackdropElement) return;
+    this.removeBackdropListeners(this._portalBackdropElement);
+    this._portalBackdropElement.remove();
+    this._portalBackdropElement = null;
+  }
+  /**
+   * Gets the full-page z-index for the body-level mobile backdrop.
+   * @returns {string}
+   */
+  getPortalBackdropZIndex() {
+    const hostStyle = getComputedStyle(this);
+    const configuredZIndex = hostStyle.getPropertyValue("--wje-sliding-container-portal-backdrop-z-index").trim();
+    if (configuredZIndex) return configuredZIndex;
+    const hostZIndex = Number.parseInt(hostStyle.zIndex, 10);
+    if (Number.isFinite(hostZIndex)) return String(hostZIndex - 1);
+    return "999";
+  }
+  /**
+   * Gets the target opacity for the active mobile backdrop.
+   * @returns {string}
+   */
+  getBackdropOpenOpacity() {
+    return getComputedStyle(this).getPropertyValue("--wje-sliding-container-backdrop-opacity").trim() || "1";
+  }
+  /**
+   * Syncs visual styles from the component to the body-level backdrop.
+   */
+  syncPortalBackdropStyles() {
+    if (!this._portalBackdropElement) return;
+    const backdropStyle = this.backdropElement ? getComputedStyle(this.backdropElement) : null;
+    this._portalBackdropElement.style.position = "fixed";
+    this._portalBackdropElement.style.inset = "0";
+    this._portalBackdropElement.style.display = "block";
+    this._portalBackdropElement.style.opacity = this.classList.contains("open") ? this.getBackdropOpenOpacity() : "0";
+    this._portalBackdropElement.style.pointerEvents = this.classList.contains("open") ? "auto" : "none";
+    this._portalBackdropElement.style.touchAction = "none";
+    this._portalBackdropElement.style.overscrollBehavior = "none";
+    this._portalBackdropElement.style.background = (backdropStyle == null ? void 0 : backdropStyle.background) || "rgba(0, 0, 0, .35)";
+    this._portalBackdropElement.style.zIndex = this.getPortalBackdropZIndex();
+  }
   /**
    * Sync ARIA attributes on host.
    */
@@ -776,7 +888,7 @@ class SlidingContainer extends WJElement {
     };
   }
   /**
-   * Returns the element that bounds the mobile bottom sheet.
+   * Returns the element that bounds the mobile bottom sheet panel.
    * @returns {Element|null} The scope element, or null for viewport scope.
    */
   getBottomSheetScopeElement() {
@@ -786,7 +898,7 @@ class SlidingContainer extends WJElement {
     return this.getParentElement();
   }
   /**
-   * Returns the frame used by the mobile bottom sheet.
+   * Returns the frame used by the mobile bottom sheet panel.
    * @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
    */
   getBottomSheetScopeFrame() {
@@ -883,12 +995,17 @@ class SlidingContainer extends WJElement {
    */
   setBottomSheetVariant() {
     const scopeFrame = this.getBottomSheetScopeFrame();
+    const backdropFrame = this.getViewportFrame();
+    const backdrop = this.getBackdropElement({
+      createPortal: this.classList.contains("open") || this._isOpen
+    });
     this._bottomSheetScopeFrame = scopeFrame;
     this.classList.add("bottom-sheet");
     this.style.position = "fixed";
     this.setBottomSheetLayerFrame(this, scopeFrame);
-    this.setBottomSheetLayerFrame(this.backdropElement, scopeFrame);
+    this.setBottomSheetLayerFrame(backdrop, backdropFrame);
     this.setBottomSheetLayerFrame(this.wrapperDiv, scopeFrame);
+    this.syncPortalBackdropStyles();
     this.wrapperDiv.style.height = "100%";
     this.transparentDiv.style.width = 0;
     this.nativeElement.style.left = scopeFrame.left + "px";
@@ -915,6 +1032,7 @@ class SlidingContainer extends WJElement {
     this.style.removeProperty("position");
     this.resetBottomSheetLayerFrame(this);
     this.resetBottomSheetLayerFrame(this.backdropElement);
+    this.removePortalBackdrop();
     this.resetBottomSheetLayerFrame(this.wrapperDiv);
     if (this.transparentDiv) {
       this.transparentDiv.style.width = this._isOpen ? this.maxWidth : 0;
@@ -941,7 +1059,6 @@ class SlidingContainer extends WJElement {
     (_i = this.backdropElement) == null ? void 0 : _i.style.removeProperty("opacity");
     this._bottomSheetScopeFrame = null;
     this.endSheetDrag();
-    this.unlockDocumentScroll();
   }
   /**
    * Applies the current visual open or closed state to the mobile bottom sheet.
@@ -949,10 +1066,17 @@ class SlidingContainer extends WJElement {
    */
   setBottomSheetVisualState(isOpen) {
     this.nativeElement.style.transform = isOpen ? "translateY(0)" : "translateY(100%)";
+    const backdrop = this.getBackdropElement({ createPortal: isOpen || Boolean(this._portalBackdropElement) });
     if (this.hasOpacity) {
       this.nativeElement.style.opacity = isOpen ? 1 : 0;
     }
-    this.backdropElement.style.opacity = isOpen ? "var(--wje-sliding-container-backdrop-opacity, 1)" : 0;
+    if (backdrop) {
+      backdrop.style.opacity = isOpen ? this.getBackdropOpenOpacity() : "0";
+      backdrop.style.pointerEvents = isOpen ? "auto" : "none";
+    }
+    if (!isOpen) {
+      this.removePortalBackdrop();
+    }
   }
   /**
    * Gets the CSS height limit used for the mobile bottom sheet.
@@ -1053,58 +1177,6 @@ class SlidingContainer extends WJElement {
     const rect = this.nativeElement.getBoundingClientRect();
     return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
   }
-  /**
-   * Prevents the page behind the mobile bottom sheet from scrolling.
-   */
-  lockDocumentScroll() {
-    if (!this.isBottomSheet() || this.sheetScope !== "viewport" || this._hasLockedDocumentScroll) return;
-    if (documentScrollLocks === 0) {
-      documentScrollState = {
-        bodyOverflow: document.body.style.overflow,
-        documentOverflow: document.documentElement.style.overflow,
-        bodyOverscrollBehavior: document.body.style.overscrollBehavior,
-        documentOverscrollBehavior: document.documentElement.style.overscrollBehavior,
-        bodyPosition: document.body.style.position,
-        bodyTop: document.body.style.top,
-        bodyLeft: document.body.style.left,
-        bodyRight: document.body.style.right,
-        bodyWidth: document.body.style.width,
-        scrollX: window.scrollX,
-        scrollY: window.scrollY
-      };
-      document.body.style.overflow = "hidden";
-      document.documentElement.style.overflow = "hidden";
-      document.body.style.overscrollBehavior = "none";
-      document.documentElement.style.overscrollBehavior = "none";
-      document.body.style.position = "fixed";
-      document.body.style.top = `-${documentScrollState.scrollY}px`;
-      document.body.style.left = `-${documentScrollState.scrollX}px`;
-      document.body.style.right = "0";
-      document.body.style.width = "100%";
-    }
-    documentScrollLocks++;
-    this._hasLockedDocumentScroll = true;
-  }
-  /**
-   * Restores page scrolling after the mobile bottom sheet is closed.
-   */
-  unlockDocumentScroll() {
-    if (!this._hasLockedDocumentScroll) return;
-    documentScrollLocks = Math.max(documentScrollLocks - 1, 0);
-    this._hasLockedDocumentScroll = false;
-    if (documentScrollLocks > 0 || !documentScrollState) return;
-    document.body.style.overflow = documentScrollState.bodyOverflow;
-    document.documentElement.style.overflow = documentScrollState.documentOverflow;
-    document.body.style.overscrollBehavior = documentScrollState.bodyOverscrollBehavior;
-    document.documentElement.style.overscrollBehavior = documentScrollState.documentOverscrollBehavior;
-    document.body.style.position = documentScrollState.bodyPosition;
-    document.body.style.top = documentScrollState.bodyTop;
-    document.body.style.left = documentScrollState.bodyLeft;
-    document.body.style.right = documentScrollState.bodyRight;
-    document.body.style.width = documentScrollState.bodyWidth;
-    window.scrollTo(documentScrollState.scrollX, documentScrollState.scrollY);
-    documentScrollState = null;
-  }
   /**
    * Stores the initial drag state for the mobile bottom sheet.
    * @param {number|string} pointerId The pointer identifier.
@@ -1286,11 +1358,12 @@ class SlidingContainer extends WJElement {
   doAnimateBottomSheetTransition(options) {
     var _a, _b, _c, _d;
     const shouldOpen = !this._isOpen;
+    const backdropElement = this.getBackdropElement({ createPortal: true });
     const closedBackdrop = {
       opacity: 0
     };
     const openBackdrop = {
-      opacity: "var(--wje-sliding-container-backdrop-opacity, 1)"
+      opacity: this.getBackdropOpenOpacity()
     };
     const closedSheet = {
       ...this.hasOpacity ? { opacity: 0 } : {},
@@ -1300,7 +1373,7 @@ class SlidingContainer extends WJElement {
       ...this.hasOpacity ? { opacity: 1 } : {},
       transform: "translateY(0)"
     };
-    if (this.animation && ((_b = (_a = this.animation) == null ? void 0 : _a.effect) == null ? void 0 : _b.target) !== this.backdropElement) {
+    if (this.animation && ((_b = (_a = this.animation) == null ? void 0 : _a.effect) == null ? void 0 : _b.target) !== backdropElement) {
       this.animation.cancel();
       this.animation = null;
     }
@@ -1313,7 +1386,7 @@ class SlidingContainer extends WJElement {
         this.animation.reverse();
         this.nativeAnimation.reverse();
       } else {
-        this.animation = this.backdropElement.animate([closedBackdrop, openBackdrop], options);
+        this.animation = backdropElement.animate([closedBackdrop, openBackdrop], options);
         this.nativeAnimation = this.nativeElement.animate([closedSheet, openSheet], options);
       }
     } else {
@@ -1321,7 +1394,7 @@ class SlidingContainer extends WJElement {
         this.animation.reverse();
         this.nativeAnimation.reverse();
       } else {
-        this.animation = this.backdropElement.animate([openBackdrop, closedBackdrop], options);
+        this.animation = backdropElement.animate([openBackdrop, closedBackdrop], options);
         this.nativeAnimation = this.nativeElement.animate([openSheet, closedSheet], options);
       }
     }
@@ -1350,7 +1423,6 @@ class SlidingContainer extends WJElement {
         this.classList.add("open");
         event.dispatchCustomEvent(this, "wje-sliding-container:beforeOpen");
         this.checkForVariant(this.variant);
-        this.lockDocumentScroll();
         await this.doAnimateTransition();
         this.syncAria();
         await Promise.resolve(this.afterOpen(e)).then(() => {
@@ -1365,7 +1437,7 @@ class SlidingContainer extends WJElement {
    * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.
    */
   async close(e) {
-    if (this.isBottomSheet() && e instanceof Event && (this.isSheetHandleEvent(e) || e.target === this.backdropElement && Date.now() < this._sheetIgnoreDismissUntil)) {
+    if (this.isBottomSheet() && e instanceof Event && (this.isSheetHandleEvent(e) || this.isBackdropElement(e.target) && Date.now() < this._sheetIgnoreDismissUntil)) {
       return;
     }
     await Promise.resolve(this.beforeClose(e)).then(async () => {
@@ -1378,7 +1450,6 @@ class SlidingContainer extends WJElement {
           }
         });
         this.syncAria();
-        this.unlockDocumentScroll();
         await Promise.resolve(this.afterClose(e)).then(() => {
           if (this.removeChildAfterClose) {
             this.childNodes.forEach((child) => {
@@ -1418,7 +1489,7 @@ class SlidingContainer extends WJElement {
   componentCleanup() {
     var _a;
     this.endSheetDrag();
-    this.unlockDocumentScroll();
+    this.removePortalBackdrop();
     (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
     this._resizeObserver = null;
   }