Testing - Drawer
Supplemental Interactions
Interact with in-page content to trigger supplemental behavior while a drawer is open.
Dialogs
Basic Drawer
Drawer Head
Drawer Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Drawer Head
Drawer Body with padding.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Missing Content
Drawer Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Drawer Head
Drawer Head
Drawer Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Additional Content
Drawer Head with a really really really really really long title. Did I mention it's long?
Drawer Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Drawer Head
Drawer Body with padding.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Drawer Head
Drawer Body with scrolling content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Drawer Head
Scrolling Drawer Body with padding.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
Positionable Descendants
Slotted, Child Positionable
hx-drawer > [slot="fixed"]
This configuration should work as expected.
Drawer with Slotted Positionable Children
Drawer Body
Unslotted, Child Positionable
hx-drawer > {hx-positionable}
This configuration should fail to position Positionable components.
Drawer with Unslotted Positionable Children
Drawer Body
Positionable Grandchildren
hx-drawer > hx-div > {hx-positionable}
This configuration should fail to position Positionable components.
Drawer with Positionable Grandchildren
Drawer Body