prime-ui-kit 0.4.0 → 0.5.1

package/dist/components/index.css

@@ -70,14 +70,12 @@
   margin: 0;
   background: transparent;
 }
-.AppShell_layoutMainSurface2 {
-  padding: var(--prime-sys-spacing-x5);
-  border: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
-  border-radius: var(--prime-sys-shape-radius-l);
-  background: var(--prime-sys-color-surface-elevated);
-  box-shadow: var(--prime-sys-elevation-shadow-surface);
-}
-.AppShell_layoutMainPage2 {
+.AppShell_layoutMainInset2 {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
   padding-block: var(--prime-sys-spacing-x6);
   padding-inline: var(--prime-sys-spacing-x6);
 }
@@ -379,7 +377,6 @@
   --sb-transition-duration: var(--prime-sys-motion-duration-slow);
   --sb-transition-ease: var(--prime-sys-motion-easing-standard);
   --sb-control-height: var(--prime-sys-size-control-m-height);
-  --sb-floating-toggle-size: calc(var(--sb-control-height) - var(--prime-sys-unit-8px));
   --sb-panel-padding-inline-expanded: var(--prime-sys-spacing-x2);
   --sb-panel-padding-inline-compact: var(--prime-sys-spacing-x1);
   --sb-panel-padding-inline: calc( var(--sb-panel-padding-inline-expanded) + (var(--sb-panel-padding-inline-compact) - var(--sb-panel-padding-inline-expanded)) * var(--sb-progress) );
@@ -457,6 +454,17 @@
   min-width: 100%;
   min-height: 0;
   height: 100%;
+}
+.Sidebar_navPanelSurface2 {
+  position: relative;
+  z-index: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 100%;
+  min-height: 0;
+  width: 100%;
   gap: var(--sb-panel-gap);
   padding-block: var(--sb-panel-padding-block);
   padding-inline: var(--sb-panel-padding-inline);
@@ -466,19 +474,17 @@
   box-shadow: none;
   transition: background-color var(--sb-transition-duration) var(--sb-transition-ease);
 }
-:root[data-theme=dark] .Sidebar_navPanel2 {
+:root[data-theme=dark] .Sidebar_navPanelSurface2 {
   background: var(--prime-sys-color-surface-default);
 }
-.Sidebar_root2[data-side=left] .Sidebar_navPanel2 {
+.Sidebar_root2[data-side=left] .Sidebar_navPanelSurface2 {
   border-inline-end: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
 }
 .Sidebar_root2[data-side=right] .Sidebar_navPanel2 {
   margin-inline-start: auto;
-  border-inline-start: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
 }
-.Sidebar_root2[data-state=hidden] .Sidebar_navPanel2 {
-  opacity: 0;
-  pointer-events: none;
+.Sidebar_root2[data-side=right] .Sidebar_navPanelSurface2 {
+  border-inline-start: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
 }
 .Sidebar_header2 {
   flex: 0 0 auto;
@@ -734,7 +740,7 @@
 }
 .Sidebar_toggleButton2[data-placement=edge] {
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   width: calc(var(--sb-control-height) * 0.72);
   min-width: calc(var(--sb-control-height) * 0.72);
   max-width: calc(var(--sb-control-height) * 0.72);
@@ -927,44 +933,6 @@
   min-width: 0;
   gap: var(--prime-sys-spacing-x1);
 }
-.Sidebar_floatingToggle2 {
-  position: fixed;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sb-floating-toggle-size);
-  min-width: var(--sb-floating-toggle-size);
-  max-width: var(--sb-floating-toggle-size);
-  min-height: var(--sb-floating-toggle-size);
-  padding: 0;
-  border: 0;
-  border-radius: var(--prime-sys-size-control-m-radius);
-  background: var(--prime-sys-color-surface-elevated);
-  color: var(--prime-sys-color-content-secondary);
-  cursor: pointer;
-  z-index: var(--prime-sys-elevation-zIndex-drawerNestedShell);
-  font-size: 0.875rem;
-  inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--prime-sys-spacing-x2));
-  inset-inline-start: calc(env(safe-area-inset-left, 0px) + var(--prime-sys-spacing-x2));
-  box-shadow: var(--prime-sys-elevation-shadow-surface);
-  transition:
-    background-color var(--sb-transition-duration) var(--sb-transition-ease),
-    color var(--sb-transition-duration) var(--sb-transition-ease),
-    opacity var(--sb-transition-duration) var(--sb-transition-ease);
-}
-.Sidebar_floatingToggle2[data-side=right] {
-  inset-inline-start: auto;
-  inset-inline-end: calc(env(safe-area-inset-right, 0px) + var(--prime-sys-spacing-x2));
-}
-.Sidebar_floatingToggle2:hover {
-  background: var(--prime-sys-color-action-neutralBackgroundHover);
-  color: var(--prime-sys-color-content-primary);
-}
-.Sidebar_floatingToggle2:focus-visible {
-  outline: var(--prime-sys-border-width-focusRing) solid var(--prime-sys-color-focus-ring);
-  outline-offset: var(--prime-sys-unit-2px);
-}
 @media (min-width: 48rem) {
   .Sidebar_root2[data-state=compact] .Sidebar_identityButtonMain2 {
     flex: 0 1 auto;
@@ -1018,30 +986,38 @@
     max-width: 100vw;
     height: 100dvh;
     transform: none;
-    transition: transform var(--sb-transition-duration) var(--sb-transition-ease), background-color var(--sb-transition-duration) var(--sb-transition-ease);
+    overflow: visible;
   }
-  .Sidebar_root2[data-state=hidden] .Sidebar_navPanel2 {
-    opacity: 1;
-    pointer-events: none;
+  .Sidebar_navPanelSurface2 {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    transition: transform var(--sb-transition-duration) var(--sb-transition-ease), background-color var(--sb-transition-duration) var(--sb-transition-ease);
   }
   .Sidebar_root2[data-side=left] .Sidebar_navPanel2 {
     left: 0;
     border-radius: 0 var(--prime-sys-shape-radius-l) var(--prime-sys-shape-radius-l) 0;
-    transform: translateX(-100%);
   }
   .Sidebar_root2[data-side=right] .Sidebar_navPanel2 {
     right: 0;
     border-radius: var(--prime-sys-shape-radius-l) 0 0 var(--prime-sys-shape-radius-l);
+  }
+  .Sidebar_root2[data-side=left] .Sidebar_navPanelSurface2 {
+    transform: translateX(-100%);
+  }
+  .Sidebar_root2[data-side=right] .Sidebar_navPanelSurface2 {
     transform: translateX(100%);
   }
-  .Sidebar_root2[data-mobile-open=true] .Sidebar_navPanel2 {
+  .Sidebar_root2[data-mobile-open=true] .Sidebar_navPanelSurface2 {
     transform: translateX(0);
   }
 }
 @media (prefers-reduced-motion: reduce) {
   .Sidebar_root2,
   .Sidebar_navPanel2,
-  .Sidebar_floatingToggle2,
+  .Sidebar_navPanelSurface2,
   .Sidebar_backdrop2,
   .Sidebar_menuButton2,
   .Sidebar_menuLabel2,
@@ -7105,8 +7081,7 @@
   box-sizing: border-box;
   width: 100%;
   margin: 0 auto;
-  padding-block: var(--prime-sys-spacing-5xl);
-  padding-inline: var(--prime-sys-spacing-4xl);
+  padding: 0;
 }
 .PageContent_root2[data-max-width=readable] {
   max-width: var(--prime-sys-unit-48rem);