prime-ui-kit 0.7.2 → 0.7.3

package/dist/hooks/useScrollLock.d.ts

@@ -2,7 +2,7 @@
  * Locks body scroll when enabled. Supports multiple concurrent callers via
  * a reference-counted lock — the last caller to unmount restores scroll.
  * Compensates for scrollbar width to prevent layout shift.
- * Shared by Modal (panel), Drawer.Content.
+ * Shared by modal/drawer overlays.
  */
 export declare function useScrollLock(enabled: boolean): void;
 //# sourceMappingURL=useScrollLock.d.ts.map

package/dist/index.css

@@ -6715,130 +6715,117 @@ textarea::-moz-focus-inner {
   z-index: var(--prime-sys-elevation-zIndex-drawer);
   background: var(--prime-sys-color-surface-overlay);
   backdrop-filter: blur(var(--prime-sys-unit-8px));
-  animation: Drawer_drawerFadeIn var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
 .Drawer_overlay[data-nested-in-modal=true] {
   z-index: var(--prime-sys-elevation-zIndex-drawerNestedShell);
 }
+.Drawer_overlay[data-state=open] {
+  animation: Drawer_drawerFadeIn var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.Drawer_overlay[data-state=closing] {
+  animation: Drawer_drawerFadeOut var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
 .Drawer_panel {
   position: fixed;
-  z-index: var(--prime-sys-elevation-zIndex-drawer);
+  top: 0;
+  bottom: 0;
+  width: min(28rem, 90vw);
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
+  z-index: var(--prime-sys-elevation-zIndex-drawer);
   background: color-mix(in srgb, var(--prime-sys-color-surface-elevated) 94%, transparent);
   color: var(--prime-sys-color-content-primary);
   border: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
   box-shadow: var(--prime-sys-elevation-shadow-modal);
   outline: none;
-  --drawer-padding-x: var(--prime-sys-size-drawer-m-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-m-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-m-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-m-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-m-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-m-titleText);
-  --drawer-panel-width: min(22rem, 92vw);
 }
 .Drawer_panel[data-nested-in-modal=true] {
   z-index: var(--prime-sys-elevation-zIndex-drawerNestedShell);
 }
-.Drawer_panel[data-size=s] {
-  --drawer-padding-x: var(--prime-sys-size-drawer-s-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-s-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-s-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-s-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-s-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-s-titleText);
-}
-.Drawer_panel[data-size=l] {
-  --drawer-padding-x: var(--prime-sys-size-drawer-l-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-l-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-l-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-l-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-l-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-l-titleText);
-}
-.Drawer_panel[data-size=xl] {
-  --drawer-padding-x: var(--prime-sys-size-drawer-xl-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-xl-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-xl-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-xl-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-xl-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-xl-titleText);
-}
 .Drawer_panel[data-side=right] {
-  top: 0;
   right: 0;
-  bottom: 0;
-  width: var(--drawer-panel-width);
   border-radius: var(--prime-sys-shape-radius-l) 0 0 var(--prime-sys-shape-radius-l);
-  animation: Drawer_drawerSlideRight var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
 .Drawer_panel[data-side=left] {
-  top: 0;
   left: 0;
-  bottom: 0;
-  width: var(--drawer-panel-width);
   border-radius: 0 var(--prime-sys-shape-radius-l) var(--prime-sys-shape-radius-l) 0;
-  animation: Drawer_drawerSlideLeft var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
-.Drawer_panel[data-side=bottom] {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  max-height: 82vh;
-  border-radius: var(--prime-sys-shape-radius-l) var(--prime-sys-shape-radius-l) 0 0;
-  animation: Drawer_drawerSlideBottom var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+.Drawer_panel[data-state=open][data-side=right] {
+  animation: Drawer_drawerSlideInFromRight var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
-.Drawer_panel[data-side=top] {
-  left: 0;
-  right: 0;
-  top: 0;
-  max-height: 82vh;
-  border-radius: 0 0 var(--prime-sys-shape-radius-l) var(--prime-sys-shape-radius-l);
-  animation: Drawer_drawerSlideTop var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+.Drawer_panel[data-state=closing][data-side=right] {
+  animation: Drawer_drawerSlideOutToRight var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.Drawer_panel[data-state=open][data-side=left] {
+  animation: Drawer_drawerSlideInFromLeft var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.Drawer_panel[data-state=closing][data-side=left] {
+  animation: Drawer_drawerSlideOutToLeft var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
 .Drawer_header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: var(--drawer-header-gap);
-  padding-inline: var(--drawer-padding-x);
-  padding-block: var(--drawer-padding-y);
+  gap: var(--prime-sys-spacing-x3);
+  padding-inline: var(--prime-sys-spacing-x5);
+  padding-block: var(--prime-sys-spacing-x5);
   border-bottom: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
   flex-shrink: 0;
 }
-.Drawer_headerContent {
+.Drawer_headerMain {
   display: flex;
-  flex-direction: column;
-  gap: var(--drawer-title-gap);
-  flex: 1;
+  align-items: flex-start;
+  gap: var(--prime-sys-spacing-x3);
   min-width: 0;
 }
-.Drawer_closeBtn {
+.Drawer_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--prime-sys-size-control-m-height);
+  height: var(--prime-sys-size-control-m-height);
+  border-radius: var(--prime-sys-shape-radius-m);
+  background: var(--prime-sys-color-surface-raised);
+  color: var(--prime-sys-color-content-secondary);
   flex-shrink: 0;
 }
+.Drawer_titleBlock {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x1);
+  min-width: 0;
+}
 .Drawer_title {
   margin: 0;
-  font-size: var(--drawer-title-text);
+  font-size: var(--prime-sys-size-control-m-text);
   font-weight: var(--prime-sys-typography-title-weight);
   line-height: 1.2;
   color: var(--prime-sys-color-content-primary);
 }
-.Drawer_content {
+.Drawer_description {
+  margin: 0;
+  color: var(--prime-sys-color-content-secondary);
+  font-size: var(--prime-sys-size-control-s-text);
+  line-height: 1.4;
+}
+.Drawer_closeButton {
+  flex-shrink: 0;
+}
+.Drawer_body {
   flex: 1;
   min-height: 0;
-  padding-inline: var(--drawer-padding-x);
-  padding-block: var(--drawer-padding-y);
+  padding-inline: var(--prime-sys-spacing-x5);
+  padding-block: var(--prime-sys-spacing-x5);
 }
 .Drawer_footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--drawer-footer-gap);
-  padding-inline: var(--drawer-padding-x);
-  padding-block: var(--drawer-padding-y);
+  gap: var(--prime-sys-spacing-x3);
+  padding-inline: var(--prime-sys-spacing-x5);
+  padding-block: var(--prime-sys-spacing-x4);
   border-top: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
   flex-shrink: 0;
 }
@@ -6850,7 +6837,15 @@ textarea::-moz-focus-inner {
     opacity: 1;
   }
 }
-@keyframes Drawer_drawerSlideRight {
+@keyframes Drawer_drawerFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes Drawer_drawerSlideInFromRight {
   from {
     transform: translateX(100%);
   }
@@ -6858,28 +6853,28 @@ textarea::-moz-focus-inner {
     transform: translateX(0);
   }
 }
-@keyframes Drawer_drawerSlideLeft {
+@keyframes Drawer_drawerSlideOutToRight {
   from {
-    transform: translateX(-100%);
+    transform: translateX(0);
   }
   to {
-    transform: translateX(0);
+    transform: translateX(100%);
   }
 }
-@keyframes Drawer_drawerSlideBottom {
+@keyframes Drawer_drawerSlideInFromLeft {
   from {
-    transform: translateY(100%);
+    transform: translateX(-100%);
   }
   to {
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
-@keyframes Drawer_drawerSlideTop {
+@keyframes Drawer_drawerSlideOutToLeft {
   from {
-    transform: translateY(-100%);
+    transform: translateX(0);
   }
   to {
-    transform: translateY(0);
+    transform: translateX(-100%);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -7179,7 +7174,7 @@ textarea::-moz-focus-inner {
   margin-bottom: var(--dd-separator-stack-pad);
 }
 .Dropdown_content > .Dropdown_block + .Dropdown_block {
-  margin-top: var(--prime-sys-spacing-x4);
+  margin-top: var(--dd-pad);
 }
 .Dropdown_content > .Dropdown_block + .Dropdown_separator {
   margin-top: var(--dd-separator-stack-pad);