Sliding Container

shadow

wje-sliding-container displays a contextual panel from the left, right, or bottom edge of its selected layout scope. The direction="left|right|bottom" attribute selects the edge; bottom drawers are not limited to mobile viewports.

direction	Behavior
left	Horizontal drawer anchored to the left edge.
right	Horizontal drawer anchored to the right edge. This is the default.
bottom	Bottom drawer with vertical motion and an optional resize handle. It always uses overlay geometry.

Expanded panel

An open side panel can display a second area with arbitrary content, such as a PDF preview. The application supplies its content through the named expanded slot; the component neither creates nor clears that content.

• expanded-width sets the width of the expanded area E, not the total width. It accepts valid CSS sizes, including calc() and %; percentages resolve against the base panel width B.
• expanded-direction sets the physical side where the expanded area is rendered next to the base panel (left or right). When omitted, it defaults to the side opposite direction.
• expanded-trigger names a document event that toggles the expanded area, just as trigger toggles the base panel.

With variant="in-place", the reserved layout space depends on the relationship between both directions:

variant	Direction relationship	Space reserved in layout	Layer over page content
in-place	expanded-direction equals direction	base panel B	expanded area E
in-place	expanded-direction is opposite to direction	expanded area E	base panel B
over	any combination	none	both panels B + E

For example, with B = 444px, E = 700px, direction="left", and expanded-direction="right", expanding shifts the page content by an additional 256px. The mirrored direction="right" and expanded-direction="left" combination behaves the same way from the opposite side. E may also be smaller than B; in that case, the reserved space shrinks. The expanded area has the same height as the base panel and its wrapper uses overflow: hidden, so slotted content controls any scrolling.

<wje-button dialog="contract-detail">Open contract</wje-button>

<wje-sliding-container
  id="contract-detail"
  trigger="contract-detail"
  expanded-trigger="contract-preview"
  direction="left"
  variant="in-place"
  max-width="444px"
  expanded-width="700px"
  expanded-direction="right"
>
  <section>
    <h3>Employment contract</h3>
    <wje-button dialog="contract-preview">Preview</wje-button>
  </section>

  <div id="contract-preview-host" slot="expanded">
    <iframe title="Contract preview" src="/preview/contract.pdf"></iframe>
  </div>
</wje-sliding-container>

Check availability with canExpand() before opening the preview. It returns false when the base panel is closed, the slot has no content, the width is invalid or non-positive, or the requested side would not fit in the current viewport. The component does not automatically flip direction or clamp the width. If an already expanded group stops fitting after a viewport change, the expanded area collapses automatically. Expansion is always disabled with direction="bottom".

API	Result
canExpand(): boolean	Reports whether the expanded area can currently be displayed.
expand(): Promise<boolean>	Opens it and returns true; unavailable or interrupted expansion returns false.
collapse(): Promise<boolean>	Collapses only the expanded area and keeps the base panel open.
toggleExpanded(): Promise<boolean>	Toggles the expanded area.
resetExpanded(): void	Restores the base state immediately, without animation.
isExpanded: boolean	Read-only expanded-state flag.

After collapse, the slotted DOM stays connected, while its wrapper is hidden, inert, and aria-hidden. Closing the whole container resets expansion, so the next open shows only the base panel. When loading another record, the application should call resetExpanded() and clear or replace the slot host content itself:

const panel = document.querySelector('#contract-detail');
const previewHost = document.querySelector('#contract-preview-host');

function loadContractPreview(previewElement) {
  panel.resetExpanded();
  previewHost.replaceChildren(previewElement);
}

The component dispatches wje-sliding-container:beforeExpand and wje-sliding-container:expand while opening, and wje-sliding-container:beforeCollapse and wje-sliding-container:afterCollapse while collapsing. Style the expanded wrapper through part="expanded"; customize its background with --wje-sliding-container-expanded-background.

Backdrop

The boolean backdrop attribute enables a full-viewport backdrop while the panel is open. The same body-level portaled layer is used for every direction, so stacking and animation remain consistent. The backdrop does not lock document scrolling.

backdrop by itself blocks interaction with the covered content. Add backdrop-dismiss when clicking the backdrop should also close the panel. For new usage, backdrop-dismiss without backdrop does not create a layer.

There is one backwards-compatibility exception: an active legacy mobile-presentation="bottom-sheet" configuration with backdrop-dismiss still creates a backdrop without an explicit backdrop, matching earlier releases. When touching existing code, add backdrop explicitly so the intent is clear and the same configuration also works with direct direction="bottom" usage.

<wje-sliding-container
  backdrop
  backdrop-dismiss
  style="
    --wje-sliding-container-backdrop-background: rgba(15, 23, 42, .55);
    --wje-sliding-container-backdrop-opacity: .9;
    --wje-sliding-container-backdrop-filter: blur(2px);
  "
>
  <div>Detail</div>
</wje-sliding-container>

CSS token	Purpose
--wje-sliding-container-backdrop-background	Backdrop color or any valid CSS background.
--wje-sliding-container-backdrop-opacity	Final open backdrop opacity; defaults to 1.
--wje-sliding-container-backdrop-filter	Filter for content below the backdrop, such as blur(2px); defaults to none.
--wje-sliding-container-backdrop-z-index	Global portaled backdrop z-index; defaults to one layer below the host.

Backdrop opening and closing use the same animation-duration and animation-easing as the panel. The older --wje-sliding-container-portal-backdrop-z-index token remains supported as a fallback.

Bottom drawer

Enable bottom presentation directly with direction="bottom". It works on desktop and mobile and does not support the expanded slot. For user-resizable height, add sheet-resizable and set sheet-height, sheet-min-height, and sheet-max-height.

A direct direction="bottom" drawer is scoped to its parent container by default, matching the side directions. Set scope="viewport" to explicitly stretch it across the viewport; scope="container" or scope="parent" keeps it local. An enabled backdrop remains page-wide.

The older sheet-scope and sheet-boundary attributes remain supported. With scope="container" or sheet-scope="container", sheet-boundary can point to the closest composed ancestor selector that should bound the panel.

<wje-button dialog="reservation-panel">Open panel</wje-button>

<wje-sliding-container
  trigger="reservation-panel"
  direction="bottom"
  scope="container"
  max-height="85vh"
  sheet-resizable
  sheet-height="55vh"
  sheet-min-height="35vh"
  sheet-max-height="92vh"
  backdrop
  backdrop-dismiss
  has-opacity
>
  <div class="panel-content">
    <h3>Reservation details</h3>
    <p>The drawer opens from the bottom edge of its container.</p>
  </div>
</wje-sliding-container>

The panel uses the sliding-container part; the resize handle uses sheet-handle-area and sheet-handle.

Legacy responsive API compatibility

Existing mobile-presentation="bottom-sheet" and mobile-break-point usage remains supported. Below the breakpoint it resolves internally to an effective bottom direction; above it, the configured left or right direction is preserved. Without an explicit scope or sheet-scope, the legacy adapter keeps its original viewport scope, and pairing it with backdrop-dismiss preserves the original implicit backdrop.

The public isBottomSheet() method remains available for existing application lifecycle hooks. It returns true for an active legacy mobile presentation and for direct direction="bottom". For new code, prefer direction="bottom" whenever the drawer should stay at the bottom regardless of viewport size.

When to use

Use wje-sliding-container when you need a contextual panel, filter, record detail, or workspace that slides from a viewport edge.

When not to use

Do not use it to solve business logic or for stateful orchestration of components.

Accessibility

Name the panel with label or aria-label, preserve the logical order of focusable elements, and for modal usage verify that the user can close the panel from the keyboard and a visible control.

Recommended practices

• Select the direction and variant first, then fine-tune size and animation.
• Prefer consistent spacing tokens over ad-hoc margin/padding values.
• With direction="bottom", test background scrolling, backdrop dismiss, and height changes on desktop and a real mobile viewport.

Attributes and properties

addToHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu add-to-height.
Atribút	add-to-height
Typ	string
Predvolené	0

animationDuration

Popis	Nastavuje textovú hodnotu uloženú vo voľbe animation-duration.
Atribút	animation-duration
Typ	string
Predvolené	500

animationEasing

Popis	Nastavuje textovú hodnotu uloženú vo voľbe animation-easing.
Atribút	animation-easing
Typ	string
Predvolené	linear

backdrop

Popis	Určuje, či je voľba backdrop zapnutá a ovplyvňuje správanie komponentu.
Atribút	backdrop
Typ	boolean
Predvolené	false

backdropDismiss

Popis	Určuje, či je voľba backdrop-dismiss zapnutá a ovplyvňuje správanie komponentu.
Atribút	backdrop-dismiss
Typ	boolean
Predvolené	false

direction

Popis	Riadi správanie voľby direction v komponente.
Atribút	direction
Typ	'left'｜'right'｜'bottom'
Predvolené	-

expandedDirection

Popis	Nastavuje textovú hodnotu uloženú vo voľbe expanded-direction.
Atribút	expanded-direction
Typ	string
Predvolené	-

expandedTrigger

Popis	Nastavuje textovú hodnotu uloženú vo voľbe expanded-trigger.
Atribút	expanded-trigger
Typ	string
Predvolené	-

expandedWidth

Popis	Nastavuje rozmery alebo veľkosť pre voľbu expanded-width.
Atribút	expanded-width
Typ	string
Predvolené	-

hasOpacity

Popis	Určuje, či je voľba has-opacity zapnutá a ovplyvňuje správanie komponentu.
Atribút	has-opacity
Typ	boolean
Predvolené	false

maxHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-height.
Atribút	max-height
Typ	string
Predvolené	auto

maxWidth

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-width.
Atribút	max-width
Typ	string
Predvolené	auto

mobileBreakPoint

Popis	Nastavuje textovú hodnotu uloženú vo voľbe mobile-break-point.
Atribút	mobile-break-point
Typ	string
Predvolené	768

mobilePresentation

Popis	Nastavuje textovú hodnotu uloženú vo voľbe mobile-presentation.
Atribút	mobile-presentation
Typ	string
Predvolené	-

removeChildAfterClose

Popis	Určuje, či je voľba remove-child-after-close zapnutá a ovplyvňuje správanie komponentu.
Atribút	remove-child-after-close
Typ	boolean｜string
Predvolené	false

scope

Popis	Nastavuje textovú hodnotu uloženú vo voľbe scope.
Atribút	scope
Typ	string
Predvolené	-

screenBreakPoint

Popis	Nastavuje textovú hodnotu uloženú vo voľbe screen-break-point.
Atribút	screen-break-point
Typ	string
Predvolené	-

sheetBoundary

Popis	Nastavuje textovú hodnotu uloženú vo voľbe sheet-boundary.
Atribút	sheet-boundary
Typ	string
Predvolené	-

sheetHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu sheet-height.
Atribút	sheet-height
Typ	string
Predvolené	-

sheetMaxHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu sheet-max-height.
Atribút	sheet-max-height
Typ	string
Predvolené	-

sheetMinHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu sheet-min-height.
Atribút	sheet-min-height
Typ	string
Predvolené	-

sheetResizable

Popis	Určuje, či je voľba sheet-resizable zapnutá a ovplyvňuje správanie komponentu.
Atribút	sheet-resizable
Typ	boolean
Predvolené	false

sheetScope

Popis	Nastavuje textovú hodnotu uloženú vo voľbe sheet-scope.
Atribút	sheet-scope
Typ	string
Predvolené	viewport

trigger

Popis	Nastavuje textovú hodnotu uloženú vo voľbe trigger.
Atribút	trigger
Typ	string
Predvolené	sliding-container

variant

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	variant
Typ	string
Predvolené	in-place

Events

Názov	Popis
wje-sliding-container:beforeExpand	Vyvolá sa pri odoslaní udalosti wje-sliding-container:beforeExpand.
wje-sliding-container:expand	Vyvolá sa pri odoslaní udalosti wje-sliding-container:expand.
wje-sliding-container:beforeCollapse	Vyvolá sa pri odoslaní udalosti wje-sliding-container:beforeCollapse.
wje-sliding-container:afterCollapse	Vyvolá sa pri odoslaní udalosti wje-sliding-container:afterCollapse.
wje-sliding-container:beforeOpen	Vyvolá sa pri otvorení komponentu.
wje-sliding-container:open	Vyvolá sa pri otvorení komponentu.
wje-sliding-container:beforeClose	Vyvolá sa pri zatvorení komponentu.
wje-sliding-container:afterClose	Vyvolá sa pri zatvorení komponentu.

Methods

startResizeObservation

Popis	Spustí metódu startResizeObservation na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

stopResizeObservation

Popis	Spustí metódu stopResizeObservation na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

bindTrigger

Popis	Spustí metódu bindTrigger na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

unbindTrigger

Popis	Spustí metódu unbindTrigger na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

bindExpandedTrigger

Popis	Spustí metódu bindExpandedTrigger na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

unbindExpandedTrigger

Popis	Spustí metódu unbindExpandedTrigger na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

usesBottomPresentation

Popis	Spustí metódu usesBottomPresentation na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => boolean

usesLegacyBottomSheetPresentation

Popis	Spustí metódu usesLegacyBottomSheetPresentation na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => boolean

isBottomSheet

Popis	Overí, či je bottom sheet aktuálne pravda.
Signatúra	() => boolean

setBaseInteractionState

Popis	Nastaví base interaction state a aplikuje súvisiace zmeny stavu.
Signatúra	(isInteractive: boolean) => void

htmlSheetHandle

Popis	Vytvorí HTML štruktúru pre html sheet handle.
Signatúra	() => HTMLElement

getClosestComposedElement

Popis	Vráti closest composed element z aktuálneho stavu komponentu.
Signatúra	(selector: string) => Element｜null

getViewportFrame

Popis	Vráti viewport frame z aktuálneho stavu komponentu.
Signatúra	() => {top: number, left: number, right: number, bottom: number, width: number, height: number}

getBottomScopeElement

Popis	Vráti bottom scope element z aktuálneho stavu komponentu.
Signatúra	() => Element｜null

getBottomScopeFrame

Popis	Vráti bottom scope frame z aktuálneho stavu komponentu.
Signatúra	() => {top: number, left: number, right: number, bottom: number, width: number, height: number}

setBottomLayerFrame

Popis	Nastaví bottom layer frame a aplikuje súvisiace zmeny stavu.
Signatúra	(element: HTMLElement｜SlidingContainer, frame: object) => void

resetBottomLayerFrame

Popis	Obnoví bottom layer frame na počiatočné hodnoty.
Signatúra	(element: HTMLElement｜SlidingContainer) => void

getInlineStyleValue

Popis	Vráti inline style hodnotu z aktuálneho stavu komponentu.
Signatúra	(style: CSSStyleDeclaration, property: string) => string

restoreInlineStyleValue

Popis	Spustí metódu restoreInlineStyleValue na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(style: CSSStyleDeclaration, property: string, value: string) => void

setSideOverVariant

Popis	Nastaví side over variant a aplikuje súvisiace zmeny stavu.
Signatúra	() => void

resetSideOverVariant

Popis	Obnoví side over variant na počiatočné hodnoty.
Signatúra	() => void

hasExpandedContent

Popis	Overí, či komponent obsahuje expanded content.
Signatúra	() => boolean

getBaseWidthInPixels

Popis	Vráti base width in pixels z aktuálneho stavu komponentu.
Signatúra	() => number

resolveExpandedWidth

Popis	Spustí metódu resolveExpandedWidth na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => number

positionExpandedPanel

Popis	Spustí metódu positionExpandedPanel na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(baseWidth: number) => void

swapsExpandedFlowPanel

Popis	Spustí metódu swapsExpandedFlowPanel na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => boolean

getExpandedAnchorLeft

Popis	Vráti expanded anchor left z aktuálneho stavu komponentu.
Signatúra	(baseWidth: number, expandedWidth: number) => number

resetPanelsAnchor

Popis	Obnoví panels anchor na počiatočné hodnoty.
Signatúra	() => void

showExpandedContent

Popis	Zobrazí expanded content v používateľskom rozhraní komponentu.
Signatúra	() => void

hideExpandedContent

Popis	Skryje expanded content v používateľskom rozhraní komponentu.
Signatúra	() => void

applyExpandedState

Popis	Spustí metódu applyExpandedState na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(isExpanded: boolean, baseWidth?: number, expandedWidth?: number) => void

canExpand

Popis	Spustí metódu canExpand na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => boolean

syncExpandedAfterDraw

Popis	Synchronizuje expanded after draw s externým alebo interným zdrojom stavu.
Signatúra	() => void

applyBottomPresentation

Popis	Spustí metódu applyBottomPresentation na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

resetBottomPresentation

Popis	Obnoví bottom presentation na počiatočné hodnoty.
Signatúra	() => void

setBottomVisualState

Popis	Nastaví bottom visual state a aplikuje súvisiace zmeny stavu.
Signatúra	(isOpen: boolean) => void

getSheetMaxHeight

Popis	Vráti sheet max height z aktuálneho stavu komponentu.
Signatúra	() => string

setSheetHeight

Popis	Nastaví sheet height a aplikuje súvisiace zmeny stavu.
Signatúra	() => void

getSheetMinHeightInPixels

Popis	Vráti sheet min height in pixels z aktuálneho stavu komponentu.
Signatúra	() => number

getSheetMaxHeightInPixels

Popis	Vráti sheet max height in pixels z aktuálneho stavu komponentu.
Signatúra	() => number

getBottomAvailableHeight

Popis	Vráti bottom available height z aktuálneho stavu komponentu.
Signatúra	() => number

isSheetHandleEvent

Popis	Overí, či je sheet handle udalosť aktuálne pravda.
Signatúra	(e: Event) => boolean

isEventInsideSheet

Popis	Overí, či je udalosť inside sheet aktuálne pravda.
Signatúra	(e: Event) => boolean

startSheetDrag

Popis	Spustí metódu startSheetDrag na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(pointerId: number｜string, startY: number) => void

updateSheetDrag

Popis	Aktualizuje sheet ťahanie podľa najnovších údajov komponentu.
Signatúra	(clientY: number) => void

endSheetDrag

Popis	Spustí metódu endSheetDrag na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

beforeExpand

Popis	Spustí sa pred expand a pripraví stav komponentu.
Signatúra	(e?: Event) => void

afterExpand

Popis	Spustí sa po expand a dokončí nadväzujúce operácie.
Signatúra	(e?: Event) => void

beforeCollapse

Popis	Spustí sa pred collapse a pripraví stav komponentu.
Signatúra	(e?: Event) => void

afterCollapse

Popis	Spustí sa po collapse a dokončí nadväzujúce operácie.
Signatúra	(e?: Event) => void

cancelExpandedTransition

Popis	Spustí metódu cancelExpandedTransition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

completeExpandedTransition

Popis	Spustí metódu completeExpandedTransition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(transition: object) => void

finishExpandedTransitionImmediately

Popis	Spustí metódu finishExpandedTransitionImmediately na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

animateExpandedTransition

Popis	Spustí metódu animateExpandedTransition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(target: boolean, baseWidth: number, expandedWidth: number) => Promise<boolean>

expand

Popis	Rozbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	(e?: Event) => Promise<boolean>

collapse

Popis	Zbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	(e?: Event) => Promise<boolean>

toggleExpanded

Popis	Prepne expanded medzi zapnutým a vypnutým stavom.
Signatúra	(e?: Event) => Promise<boolean>

resetExpanded

Popis	Obnoví expanded na počiatočné hodnoty.
Signatúra	() => void

getAnimationOptions

Popis	Vráti animation položky z aktuálneho stavu komponentu.
Signatúra	() => object

finishBaseTransitionImmediately

Popis	Spustí metódu finishBaseTransitionImmediately na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

setSideVisualState

Popis	Nastaví side visual state a aplikuje súvisiace zmeny stavu.
Signatúra	(isOpen: boolean) => void

doAnimateBottomTransition

Popis	Spustí metódu doAnimateBottomTransition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(options: object) => Promise<void>

open

Popis	Otvorí komponent a nastaví viditeľný stav.
Signatúra	(e: Event) => Promise<void>

close

Popis	Zatvorí komponent a odstráni stav viditeľnosti.
Signatúra	(e: Event) => Promise<void>

setBottomClosedState

Popis	Nastaví bottom closed state a aplikuje súvisiace zmeny stavu.
Signatúra	() => void

toggle

Popis	Prepne toggle medzi zapnutým a vypnutým stavom.
Signatúra	(e: Event) => Promise<void>

CSS shadow parts

Názov	Popis
backdrop	Štýluje shadow časť backdrop.
sliding-container	Štýluje shadow časť sliding-container.
expanded	Štýluje shadow časť expanded.
close-button	Štýluje shadow časť close-button.
sheet-handle-area	Štýluje shadow časť sheet-handle-area.
sheet-handle	Štýluje shadow časť sheet-handle.

CSS custom variables

Názov	Popis
--wje-sliding-container-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-sliding-container-expanded-background	Vlastná CSS premenná na štýlovanie komponentu (expanded background).
--wje-sliding-container-z-index	Vlastná CSS premenná na štýlovanie komponentu (z index).
--wje-sliding-container-bottom-sheet-z-index	Vlastná CSS premenná na štýlovanie komponentu (bottom sheet z index).
--wje-sliding-container-bottom-sheet-panel-z-index	Vlastná CSS premenná na štýlovanie komponentu (bottom sheet panel z index).
--wje-sliding-container-backdrop-z-index	Vlastná CSS premenná na štýlovanie komponentu (backdrop z index).
--wje-sliding-container-portal-backdrop-z-index	Vlastná CSS premenná na štýlovanie komponentu (portal backdrop z index).
--wje-sliding-container-backdrop-background	Vlastná CSS premenná na štýlovanie komponentu (backdrop background).
--wje-sliding-container-backdrop-opacity	Vlastná CSS premenná, ktorá riadi úroveň priehľadnosti.
--wje-sliding-container-backdrop-filter	Vlastná CSS premenná na štýlovanie komponentu (backdrop filter).
--wje-sliding-container-box-shadow	Vlastná CSS premenná, ktorá riadi tieň.
--wje-sliding-container-sheet-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-sliding-container-sheet-handle-area-height	Vlastná CSS premenná, ktorá riadi sheet handle area height.
--wje-sliding-container-sheet-handle-width	Vlastná CSS premenná, ktorá riadi sheet handle width.
--wje-sliding-container-sheet-handle-height	Vlastná CSS premenná, ktorá riadi sheet handle height.
--wje-sliding-container-sheet-handle-background	Vlastná CSS premenná na štýlovanie komponentu (sheet handle background).
--wje-sliding-container-sheet-handle-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
expanded	Slot pre vlastný obsah expanded v komponente.