@kushagradhawan/kookie-ui 0.1.107 → 0.1.109

package/styles.css

@@ -17959,12 +17959,19 @@
   border-radius: 0 !important;
   will-change: transform;
 }
+@supports (height: 100dvh) {
+  :where(.rt-SheetContent){
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+}
 :where(.rt-SheetContent[data-side='start']){
   inset-block: 0 !important;
   inset-inline-start: 0 !important;
   margin: 0 !important;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 :where(.rt-SheetContent[data-side='end']){
   inset-block: 0 !important;
@@ -17972,6 +17979,7 @@
   margin: 0 !important;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 :where(.rt-SheetContent[data-side='top']){
   inset-block-start: 0 !important;
@@ -18252,7 +18260,7 @@
   color: var(--gray-a8);
   background-color: var(--gray-3);
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical{
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical){
   grid-auto-flow: row;
   grid-auto-columns: unset;
   grid-auto-rows: 1fr;
@@ -18260,7 +18268,7 @@
   min-height: -moz-max-content;
   min-height: max-content;
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical:has([data-icon-only]){
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):has([data-icon-only]){
   grid-auto-columns: unset;
   grid-auto-rows: minmax(var(--segmented-control-height), 1fr);
 }
@@ -18284,15 +18292,15 @@
   outline: var(--focus-outline-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem{
   flex-direction: column;
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem:first-child{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem:first-child{
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
   border-bottom-left-radius: 0;
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem:nth-last-child(2){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem:nth-last-child(2){
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   border-top-right-radius: 0;
@@ -18356,7 +18364,7 @@
 :where(.rt-SegmentedControlRoot:has(:focus-visible)) .rt-SegmentedControlItemSeparator{
   transition-duration: 0ms;
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItemSeparator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItemSeparator{
   margin-left: calc(var(--space-1) * 0.75);
   margin-right: calc(var(--space-1) * 0.75);
   margin-top: calc(-1 * var(--border-width-standard) * 0.5);
@@ -18452,68 +18460,68 @@
 :where(.rt-SegmentedControlItem[data-state='on']:nth-child(10)) ~ .rt-SegmentedControlIndicator{
   transform: translateX(900%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator{
   width: 100%;
   height: unset;
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(2){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(2){
   height: calc(100% / 1);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(3){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(3){
   height: calc(100% / 2);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(4){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(4){
   height: calc(100% / 3);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(5){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(5){
   height: calc(100% / 4);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(6){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(6){
   height: calc(100% / 5);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(7){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(7){
   height: calc(100% / 6);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(8){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(8){
   height: calc(100% / 7);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(9){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(9){
   height: calc(100% / 8);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(10){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(10){
   height: calc(100% / 9);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(11){
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(11){
   height: calc(100% / 10);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(1) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(1) ~ .rt-SegmentedControlIndicator{
   transform: translateY(0%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(2) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(2) ~ .rt-SegmentedControlIndicator{
   transform: translateY(100%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(3) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(3) ~ .rt-SegmentedControlIndicator{
   transform: translateY(200%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(4) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(4) ~ .rt-SegmentedControlIndicator{
   transform: translateY(300%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(5) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(5) ~ .rt-SegmentedControlIndicator{
   transform: translateY(400%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(6) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(6) ~ .rt-SegmentedControlIndicator{
   transform: translateY(500%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(7) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(7) ~ .rt-SegmentedControlIndicator{
   transform: translateY(600%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(8) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(8) ~ .rt-SegmentedControlIndicator{
   transform: translateY(700%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(9) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(9) ~ .rt-SegmentedControlIndicator{
   transform: translateY(800%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(10) ~ .rt-SegmentedControlIndicator{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(10) ~ .rt-SegmentedControlIndicator{
   transform: translateY(900%);
 }
 .rt-SegmentedControlItemLabel,
@@ -19122,39 +19130,39 @@
   padding-left: 0;
   padding-right: 0;
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-icon-only]{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-icon-only]{
   min-width: unset;
   min-height: var(--segmented-control-height);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-icon-only] .rt-SegmentedControlItemLabel{
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-icon-only] .rt-SegmentedControlItemLabel{
   padding-top: 0;
   padding-bottom: 0;
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-1:has([data-icon-only]){
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-1):has([data-icon-only]){
   width: var(--space-5);
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-2:has([data-icon-only]){
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-2):has([data-icon-only]){
   width: var(--space-6);
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-3:has([data-icon-only]){
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-3):has([data-icon-only]){
   width: var(--space-7);
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-4:has([data-icon-only]){
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-4):has([data-icon-only]){
   width: var(--space-8);
 }
-.rt-r-orientation-vertical.rt-r-size-1 .rt-SegmentedControlItemLabel{
+:where(.rt-r-orientation-vertical):where(.rt-r-size-1) .rt-SegmentedControlItemLabel{
   padding-top: var(--space-1);
   padding-bottom: var(--space-1);
 }
-.rt-r-orientation-vertical.rt-r-size-2 .rt-SegmentedControlItemLabel{
+:where(.rt-r-orientation-vertical):where(.rt-r-size-2) .rt-SegmentedControlItemLabel{
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
 }
-.rt-r-orientation-vertical.rt-r-size-3 .rt-SegmentedControlItemLabel{
+:where(.rt-r-orientation-vertical):where(.rt-r-size-3) .rt-SegmentedControlItemLabel{
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
 }
-.rt-r-orientation-vertical.rt-r-size-4 .rt-SegmentedControlItemLabel{
+:where(.rt-r-orientation-vertical):where(.rt-r-size-4) .rt-SegmentedControlItemLabel{
   padding-top: var(--space-3);
   padding-bottom: var(--space-3);
 }
@@ -22251,9 +22259,6 @@
 .rt-ShellRail[data-mode='collapsed']{
   width: 0px;
   transition-delay: var(--motion-duration-small);
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
 }
 .rt-ShellRailContent{
   display: flex;
@@ -22262,13 +22267,17 @@
   height: 100%;
   gap: var(--space-2);
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 .rt-ShellRailContent[data-visible]{
   opacity: 1;
+  pointer-events: auto;
 }
 .rt-ShellRail[data-mode='collapsed'] .rt-ShellRailContent{
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellPanel{
@@ -22286,9 +22295,6 @@
 .rt-ShellPanel:not([data-visible]){
   width: 0px;
   transition-delay: var(--motion-duration-small);
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
 }
 .rt-ShellPanelContent{
   display: flex;
@@ -22297,13 +22303,17 @@
   height: 100%;
   overflow: hidden;
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 .rt-ShellPanelContent[data-visible]{
   opacity: 1;
+  pointer-events: auto;
 }
 .rt-ShellPanel:not([data-visible]) .rt-ShellPanelContent{
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellSidebar{
@@ -22326,11 +22336,6 @@
 }
 .rt-ShellSidebar[data-mode='collapsed']{
   width: 0px;
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  flex-shrink: 0;
-  flex-basis: 0;
   transition-delay: var(--motion-duration-small);
 }
 .rt-ShellSidebarContent{
@@ -22340,6 +22345,7 @@
   height: 100%;
   overflow: hidden;
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 .rt-ShellSidebar[data-mode='thin'] .rt-ShellResizer{
@@ -22347,6 +22353,7 @@
 }
 .rt-ShellSidebarContent[data-visible]{
   opacity: 1;
+  pointer-events: auto;
 }
 .rt-ShellSidebarContent[data-phase='hiding']{
   opacity: 0;
@@ -22361,6 +22368,8 @@
 }
 .rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent{
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellSidebar[data-presentation='stacked']{
@@ -22411,13 +22420,17 @@
   height: 100%;
   overflow: hidden;
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 .rt-ShellInspectorContent[data-visible]{
   opacity: 1;
+  pointer-events: auto;
 }
 .rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent{
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellBottom{
@@ -22434,9 +22447,6 @@
 }
 .rt-ShellBottom[data-mode='collapsed']{
   height: 0px;
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: 0;
   transition-delay: var(--motion-duration-small);
 }
 .rt-ShellBottomContent{
@@ -22446,10 +22456,12 @@
   height: var(--bottom-size, 200px);
   overflow: hidden;
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 .rt-ShellBottomContent[data-visible]{
   opacity: 1;
+  pointer-events: auto;
 }
 .rt-ShellPanel[data-resizing],
 .rt-ShellSidebar[data-resizing],
@@ -22471,6 +22483,8 @@
 }
 .rt-ShellBottom[data-mode='collapsed'] .rt-ShellBottomContent{
   opacity: 0;
+  height: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 [data-presentation='overlay']{
@@ -22631,6 +22645,21 @@
 .rt-ShellBottom[data-peek][data-mode='collapsed']{
   height: var(--bottom-size, 200px);
 }
+.rt-ShellBody[data-has-inset]{
+  background: var(--gray-2);
+}
+.rt-ShellLeft[data-inset],
+.rt-ShellSidebar[data-inset],
+.rt-ShellContent[data-inset],
+.rt-ShellInspector[data-inset],
+.rt-ShellBottom[data-inset]{
+  --shell-inset-gap: var(--space-2);
+  margin: var(--shell-inset-gap);
+  border-radius: var(--radius-3);
+  background: var(--color-background);
+  box-shadow: var(--shadow-2);
+  height: auto;
+}
 .rt-SliderRoot{
   --slider-thumb-width: var(--space-3);
   --slider-thumb-height: var(--space-2);