@frame-ui-ng/components 0.4.2-beta.0 → 0.5.0-beta.0

package/popover/src/styles/_vars.css

@@ -1,24 +1,24 @@
-:root {
-  --frame-popover-content-width: 20rem;
-  --frame-popover-content-padding: 1rem;
-  --frame-popover-content-radius: var(--frame-radius-md);
-  --frame-popover-content-bg: var(--frame-surface);
-  --frame-popover-content-color: var(--frame-surface-foreground);
-  --frame-popover-content-border: var(--frame-border);
-  --frame-popover-content-shadow: var(--frame-shadow-md);
-  --frame-popover-content-gap: 0.875rem;
-  --frame-popover-header-gap: 0.25rem;
-  --frame-popover-title-color: var(--frame-foreground);
-  --frame-popover-title-font-size: 0.875rem;
-  --frame-popover-title-font-weight: 600;
-  --frame-popover-description-color: var(--frame-muted-foreground);
-  --frame-popover-description-font-size: 0.875rem;
-  --frame-popover-body-gap: 0.75rem;
-  --frame-popover-footer-gap: 0.5rem;
-  --frame-popover-close-radius: var(--frame-radius-sm);
-  --frame-popover-close-hover-bg: var(--frame-accent);
-  --frame-popover-motion-duration: 140ms;
-  --frame-popover-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
-  --frame-popover-motion-distance: 0.25rem;
-  --frame-popover-motion-scale: 0.96;
-}
+:where(:root) {
+  --frame-popover-content-width: 20rem;
+  --frame-popover-content-padding: var(--frame-density-panel-padding-md);
+  --frame-popover-content-radius: var(--frame-radius-md);
+  --frame-popover-content-bg: var(--frame-surface);
+  --frame-popover-content-color: var(--frame-surface-foreground);
+  --frame-popover-content-border: var(--frame-border);
+  --frame-popover-content-shadow: var(--frame-shadow-md);
+  --frame-popover-content-gap: var(--frame-density-gap-lg);
+  --frame-popover-header-gap: var(--frame-density-gap-sm);
+  --frame-popover-title-color: var(--frame-foreground);
+  --frame-popover-title-font-size: 0.875rem;
+  --frame-popover-title-font-weight: 600;
+  --frame-popover-description-color: var(--frame-muted-foreground);
+  --frame-popover-description-font-size: 0.875rem;
+  --frame-popover-body-gap: var(--frame-density-gap-lg);
+  --frame-popover-footer-gap: var(--frame-density-gap-md);
+  --frame-popover-close-radius: var(--frame-radius-sm);
+  --frame-popover-close-hover-bg: var(--frame-accent);
+  --frame-popover-motion-duration: 140ms;
+  --frame-popover-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --frame-popover-motion-distance: 0.25rem;
+  --frame-popover-motion-scale: 0.96;
+}

package/progress/src/styles/_vars.css

@@ -1,7 +1,7 @@
-:root {
+:where(:root) {
   --frame-progress-height: 0.5rem;
   --frame-progress-width: 100%;
-  --frame-progress-radius: 0;
+  --frame-progress-radius: var(--frame-radius-sm);
   --frame-progress-bg: var(--frame-accent);
   --frame-progress-border: transparent;
   --frame-progress-shadow: none;

package/progress/src/styles/progress.css

@@ -1,64 +1,64 @@
-@import './_vars.css';
-
-[frProgress],
-frame-progress {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  inline-size: var(--frame-progress-width);
-  block-size: var(--frame-progress-height);
-  border: 1px solid var(--frame-progress-border);
-  border-radius: var(--frame-progress-radius);
-  background: var(--frame-progress-bg);
-  box-shadow: var(--frame-progress-shadow);
-}
-
-[frProgressIndicator],
-frame-progress-indicator {
-  display: block;
-  inline-size: var(--frame-progress-percent, 0%);
-  block-size: 100%;
-  margin-inline-start: 0;
-  margin-inline-end: auto;
-  border-radius: var(--frame-progress-indicator-radius);
-  background: var(--frame-progress-indicator-bg);
-  box-shadow: var(--frame-progress-indicator-shadow);
-  transition:
-    inline-size var(--frame-progress-transition-duration) var(--frame-progress-transition-easing),
-    background-color var(--frame-progress-transition-duration) ease;
-}
-
-[frProgress][data-state='complete'] [frProgressIndicator],
-frame-progress[data-state='complete'] frame-progress-indicator {
-  inline-size: 100%;
-}
-
-[frProgress][data-state='indeterminate'] [frProgressIndicator],
-frame-progress[data-state='indeterminate'] frame-progress-indicator {
-  position: absolute;
-  inset-block: 0;
-  inline-size: var(--frame-progress-indeterminate-size);
-  animation: frame-progress-indeterminate var(--frame-progress-indeterminate-duration) infinite linear;
-}
-
-@keyframes frame-progress-indeterminate {
-  from {
-    inset-inline-start: calc(-1 * var(--frame-progress-indeterminate-size));
-  }
-
-  to {
-    inset-inline-start: 100%;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [frProgressIndicator],
-  frame-progress-indicator {
-    transition-duration: 1ms;
-  }
-
-  [frProgress][data-state='indeterminate'] [frProgressIndicator],
-  frame-progress[data-state='indeterminate'] frame-progress-indicator {
-    animation-duration: 3s;
-  }
-}
+@import './_vars.css';
+
+[frProgress],
+frame-progress {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  inline-size: var(--frame-progress-width);
+  block-size: var(--frame-progress-height);
+  border: 1px solid var(--frame-progress-border);
+  border-radius: var(--frame-progress-radius);
+  background: var(--frame-progress-bg);
+  box-shadow: var(--frame-progress-shadow);
+}
+
+[frProgressIndicator],
+frame-progress-indicator {
+  display: block;
+  inline-size: var(--frame-progress-percent, 0%);
+  block-size: 100%;
+  margin-inline-start: 0;
+  margin-inline-end: auto;
+  border-radius: var(--frame-progress-indicator-radius);
+  background: var(--frame-progress-indicator-bg);
+  box-shadow: var(--frame-progress-indicator-shadow);
+  transition:
+    inline-size var(--frame-progress-transition-duration) var(--frame-progress-transition-easing),
+    background-color var(--frame-progress-transition-duration) ease;
+}
+
+[frProgress][data-state='complete'] [frProgressIndicator],
+frame-progress[data-state='complete'] frame-progress-indicator {
+  inline-size: 100%;
+}
+
+[frProgress][data-state='indeterminate'] [frProgressIndicator],
+frame-progress[data-state='indeterminate'] frame-progress-indicator {
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--frame-progress-indeterminate-size);
+  animation: frame-progress-indeterminate var(--frame-progress-indeterminate-duration) infinite linear;
+}
+
+@keyframes frame-progress-indeterminate {
+  from {
+    inset-inline-start: calc(-1 * var(--frame-progress-indeterminate-size));
+  }
+
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [frProgressIndicator],
+  frame-progress-indicator {
+    transition-duration: 1ms;
+  }
+
+  [frProgress][data-state='indeterminate'] [frProgressIndicator],
+  frame-progress[data-state='indeterminate'] frame-progress-indicator {
+    animation-duration: 3s;
+  }
+}

package/radio-group/src/styles/_vars.css

@@ -1,8 +1,8 @@
-:root {
-  --frame-radio-group-gap: 0.75rem;
-  --frame-radio-group-horizontal-gap: 1rem;
-  --frame-radio-group-card-gap: 0.75rem;
-  --frame-radio-group-card-padding: 1rem;
+:where(:root) {
+  --frame-radio-group-gap: var(--frame-density-gap-lg);
+  --frame-radio-group-horizontal-gap: var(--frame-density-gap-xl);
+  --frame-radio-group-card-gap: var(--frame-density-gap-lg);
+  --frame-radio-group-card-padding: var(--frame-density-panel-padding-md);
   --frame-radio-group-card-radius: var(--frame-radius-lg);
   --frame-radio-group-card-bg: var(--frame-surface);
   --frame-radio-group-card-border: var(--frame-border);

package/radio-group/src/styles/radio-group.css

@@ -35,7 +35,7 @@ frame-radio-group[data-variant='cards'] {
   block-size: var(--frame-radio-group-item-size);
   margin: 0;
   border: 1px solid var(--frame-radio-group-item-border);
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   background: var(--frame-radio-group-item-bg);
   color: var(--frame-radio-group-item-color);
   cursor: pointer;
@@ -54,7 +54,7 @@ frame-radio-group[data-variant='cards'] {
   inline-size: var(--frame-radio-group-item-dot-size);
   block-size: var(--frame-radio-group-item-dot-size);
   aspect-ratio: 1;
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   background: currentColor;
   clip-path: circle(50%);
   transform: scale(0);

package/resizable/src/styles/_vars.css

@@ -1,9 +1,9 @@
-:root {
+:where(:root) {
   --frame-resizable-border: var(--frame-border);
   --frame-resizable-radius: var(--frame-radius-lg);
   --frame-resizable-bg: var(--frame-surface);
   --frame-resizable-color: var(--frame-foreground);
-  --frame-resizable-panel-padding: 1rem;
+  --frame-resizable-panel-padding: var(--frame-density-panel-padding-md);
   --frame-resizable-panel-min-size: 0;
   --frame-resizable-handle-size: 0.625rem;
   --frame-resizable-handle-hit-size: 1rem;

package/resizable/src/styles/resizable.css

@@ -1,130 +1,130 @@
-@import './_vars.css';
-
-[frResizablePanelGroup],
-frame-resizable-panel-group {
-  box-sizing: border-box;
-  display: flex;
-  overflow: hidden;
-  min-inline-size: var(--frame-resizable-panel-min-size);
-  min-block-size: var(--frame-resizable-panel-min-size);
-  border: 1px solid var(--frame-resizable-border);
-  border-radius: var(--frame-resizable-radius);
-  background: var(--frame-resizable-bg);
-  color: var(--frame-resizable-color);
-}
-
-[frResizablePanelGroup][data-orientation='vertical'],
-frame-resizable-panel-group[data-orientation='vertical'] {
-  flex-direction: column;
-}
-
-[frResizablePanel],
-frame-resizable-panel {
-  box-sizing: border-box;
-  position: relative;
-  overflow: auto;
-  min-inline-size: var(--frame-resizable-panel-min-size);
-  min-block-size: var(--frame-resizable-panel-min-size);
-}
-
-[frResizablePanel]:not([data-no-padding]),
-frame-resizable-panel:not([data-no-padding]) {
-  padding: var(--frame-resizable-panel-padding);
-}
-
-[frResizablePanel][data-collapsed],
-frame-resizable-panel[data-collapsed] {
-  overflow: hidden;
-}
-
-[frResizablePanel][data-collapsed]:not([data-no-padding]),
-frame-resizable-panel[data-collapsed]:not([data-no-padding]) {
-  padding: 0;
-}
-
-[frResizableHandle],
-frame-resizable-handle {
-  position: relative;
-  display: grid;
-  place-items: center;
-  flex: 0 0 var(--frame-resizable-handle-size);
-  align-self: stretch;
-  border: 0;
-  background: var(--frame-resizable-handle-bg);
-  cursor: col-resize;
-  outline: none;
-  touch-action: none;
-  transition:
-    background-color var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing),
-    box-shadow var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing);
-}
-
-[frResizableHandle]::before,
-frame-resizable-handle::before {
-  content: '';
-  position: absolute;
-  inset-block: 0;
-  inline-size: var(--frame-resizable-handle-hit-size);
-}
-
-[frResizableHandle][data-orientation='vertical'],
-frame-resizable-handle[data-orientation='vertical'] {
-  flex-basis: var(--frame-resizable-handle-size);
-  inline-size: auto;
-  block-size: var(--frame-resizable-handle-size);
-  cursor: row-resize;
-}
-
-[frResizableHandle][data-orientation='vertical']::before,
-frame-resizable-handle[data-orientation='vertical']::before {
-  inset-inline: 0;
-  inset-block: auto;
-  block-size: var(--frame-resizable-handle-hit-size);
-  inline-size: auto;
-}
-
-[frResizableHandle]::after,
-frame-resizable-handle::after {
-  content: '';
-  display: block;
-  inline-size: var(--frame-resizable-handle-indicator-thickness);
-  block-size: var(--frame-resizable-handle-indicator-size);
-  border-radius: 999px;
-  background: var(--frame-resizable-handle-indicator-bg);
-  opacity: 0;
-  transition:
-    opacity var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing),
-    background-color var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing);
-}
-
-[frResizableHandle][data-orientation='vertical']::after,
-frame-resizable-handle[data-orientation='vertical']::after {
-  inline-size: var(--frame-resizable-handle-indicator-size);
-  block-size: var(--frame-resizable-handle-indicator-thickness);
-}
-
-[frResizableHandle][data-handle]::after,
-frame-resizable-handle[data-handle]::after {
-  opacity: 1;
-}
-
-[frResizableHandle]:where(:hover, [data-dragging]),
-frame-resizable-handle:where(:hover, [data-dragging]) {
-  background: var(--frame-resizable-handle-hover-bg);
-}
-
-[frResizableHandle][data-dragging],
-frame-resizable-handle[data-dragging] {
-  background: var(--frame-resizable-handle-active-bg);
-}
-
-[frResizableHandle]:focus-visible,
-frame-resizable-handle:focus-visible {
-  box-shadow: var(--frame-resizable-handle-focus-shadow);
-}
-
-[frResizableHandle][data-disabled],
-frame-resizable-handle[data-disabled] {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
+@import './_vars.css';
+
+[frResizablePanelGroup],
+frame-resizable-panel-group {
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  min-inline-size: var(--frame-resizable-panel-min-size);
+  min-block-size: var(--frame-resizable-panel-min-size);
+  border: 1px solid var(--frame-resizable-border);
+  border-radius: var(--frame-resizable-radius);
+  background: var(--frame-resizable-bg);
+  color: var(--frame-resizable-color);
+}
+
+[frResizablePanelGroup][data-orientation='vertical'],
+frame-resizable-panel-group[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+[frResizablePanel],
+frame-resizable-panel {
+  box-sizing: border-box;
+  position: relative;
+  overflow: auto;
+  min-inline-size: var(--frame-resizable-panel-min-size);
+  min-block-size: var(--frame-resizable-panel-min-size);
+}
+
+[frResizablePanel]:not([data-no-padding]),
+frame-resizable-panel:not([data-no-padding]) {
+  padding: var(--frame-resizable-panel-padding);
+}
+
+[frResizablePanel][data-collapsed],
+frame-resizable-panel[data-collapsed] {
+  overflow: hidden;
+}
+
+[frResizablePanel][data-collapsed]:not([data-no-padding]),
+frame-resizable-panel[data-collapsed]:not([data-no-padding]) {
+  padding: 0;
+}
+
+[frResizableHandle],
+frame-resizable-handle {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: 0 0 var(--frame-resizable-handle-size);
+  align-self: stretch;
+  border: 0;
+  background: var(--frame-resizable-handle-bg);
+  cursor: col-resize;
+  outline: none;
+  touch-action: none;
+  transition:
+    background-color var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing),
+    box-shadow var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing);
+}
+
+[frResizableHandle]::before,
+frame-resizable-handle::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--frame-resizable-handle-hit-size);
+}
+
+[frResizableHandle][data-orientation='vertical'],
+frame-resizable-handle[data-orientation='vertical'] {
+  flex-basis: var(--frame-resizable-handle-size);
+  inline-size: auto;
+  block-size: var(--frame-resizable-handle-size);
+  cursor: row-resize;
+}
+
+[frResizableHandle][data-orientation='vertical']::before,
+frame-resizable-handle[data-orientation='vertical']::before {
+  inset-inline: 0;
+  inset-block: auto;
+  block-size: var(--frame-resizable-handle-hit-size);
+  inline-size: auto;
+}
+
+[frResizableHandle]::after,
+frame-resizable-handle::after {
+  content: '';
+  display: block;
+  inline-size: var(--frame-resizable-handle-indicator-thickness);
+  block-size: var(--frame-resizable-handle-indicator-size);
+  border-radius: var(--frame-radius-full);
+  background: var(--frame-resizable-handle-indicator-bg);
+  opacity: 0;
+  transition:
+    opacity var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing),
+    background-color var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing);
+}
+
+[frResizableHandle][data-orientation='vertical']::after,
+frame-resizable-handle[data-orientation='vertical']::after {
+  inline-size: var(--frame-resizable-handle-indicator-size);
+  block-size: var(--frame-resizable-handle-indicator-thickness);
+}
+
+[frResizableHandle][data-handle]::after,
+frame-resizable-handle[data-handle]::after {
+  opacity: 1;
+}
+
+[frResizableHandle]:where(:hover, [data-dragging]),
+frame-resizable-handle:where(:hover, [data-dragging]) {
+  background: var(--frame-resizable-handle-hover-bg);
+}
+
+[frResizableHandle][data-dragging],
+frame-resizable-handle[data-dragging] {
+  background: var(--frame-resizable-handle-active-bg);
+}
+
+[frResizableHandle]:focus-visible,
+frame-resizable-handle:focus-visible {
+  box-shadow: var(--frame-resizable-handle-focus-shadow);
+}
+
+[frResizableHandle][data-disabled],
+frame-resizable-handle[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/select/src/styles/_vars.css

@@ -1,9 +1,9 @@
-:root {
-  --frame-select-trigger-height: 2.5rem;
+:where(:root) {
+  --frame-select-trigger-height: var(--frame-density-control-height-lg);
   --frame-select-trigger-min-width: 12rem;
-  --frame-select-trigger-gap: 0.5rem;
-  --frame-select-trigger-radius: 0px;
-  --frame-select-trigger-padding-inline: 1rem;
+  --frame-select-trigger-gap: var(--frame-density-gap-md);
+  --frame-select-trigger-radius: var(--frame-radius-md);
+  --frame-select-trigger-padding-inline: var(--frame-density-control-padding-x-lg);
   --frame-select-trigger-font-size: 0.875rem;
   --frame-select-trigger-font-weight: 600;
   --frame-select-trigger-focus-shadow: none;
@@ -15,13 +15,13 @@
   --frame-select-trigger-transition-duration: 150ms;
   --frame-select-content-min-width: 12rem;
   --frame-select-content-max-height: min(18rem, 50vh);
-  --frame-select-content-popper-shadow: 0 16px 32px -18px rgb(0 0 0 / 0.28);
-  --frame-select-group-gap: 0.125rem;
+  --frame-select-content-popper-shadow: var(--frame-shadow-md);
+  --frame-select-group-gap: var(--frame-density-gap-xs);
   --frame-select-item-indicator-size: 1rem;
   --frame-select-item-indicator-offset: 0.625rem;
   --frame-select-item-padding-start: 2rem;
   --frame-select-item-padding-end: 2rem;
-  --frame-select-item-padding-inline: 0.75rem;
+  --frame-select-item-padding-inline: var(--frame-density-control-padding-x-sm);
   --frame-select-item-indicator-font-size: 0.875rem;
   --frame-select-error-color: var(--frame-destructive);
   --frame-select-error-font-size: 0.8125rem;

package/separator/src/styles/_vars.css

@@ -1,7 +1,7 @@
-:root {
+:where(:root) {
   --frame-separator-color: var(--frame-border);
   --frame-separator-thickness: 1px;
-  --frame-separator-radius: 0;
+  --frame-separator-radius: var(--frame-radius-sm);
   --frame-separator-horizontal-width: 100%;
   --frame-separator-horizontal-margin-block: 0;
   --frame-separator-vertical-height: 100%;

package/separator/src/styles/separator.css

@@ -1,25 +1,25 @@
-@import './_vars.css';
-
-[frSeparator],
-frame-separator {
-  display: block;
-  flex-shrink: 0;
-  border: 0;
-  border-radius: var(--frame-separator-radius);
-  background: var(--frame-separator-color);
-}
-
-[frSeparator][data-orientation='horizontal'],
-frame-separator[data-orientation='horizontal'] {
-  inline-size: var(--frame-separator-horizontal-width);
-  block-size: var(--frame-separator-thickness);
-  margin-block: var(--frame-separator-horizontal-margin-block);
-}
-
-[frSeparator][data-orientation='vertical'],
-frame-separator[data-orientation='vertical'] {
-  inline-size: var(--frame-separator-thickness);
-  block-size: var(--frame-separator-vertical-height);
-  min-block-size: 1em;
-  margin-inline: var(--frame-separator-vertical-margin-inline);
-}
+@import './_vars.css';
+
+[frSeparator],
+frame-separator {
+  display: block;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: var(--frame-separator-radius);
+  background: var(--frame-separator-color);
+}
+
+[frSeparator][data-orientation='horizontal'],
+frame-separator[data-orientation='horizontal'] {
+  inline-size: var(--frame-separator-horizontal-width);
+  block-size: var(--frame-separator-thickness);
+  margin-block: var(--frame-separator-horizontal-margin-block);
+}
+
+[frSeparator][data-orientation='vertical'],
+frame-separator[data-orientation='vertical'] {
+  inline-size: var(--frame-separator-thickness);
+  block-size: var(--frame-separator-vertical-height);
+  min-block-size: 1em;
+  margin-inline: var(--frame-separator-vertical-margin-inline);
+}

package/sheet/src/styles/_vars.css

@@ -1,20 +1,20 @@
-:root {
+:where(:root) {
   --frame-sheet-backdrop-blur: 2px;
   --frame-sheet-backdrop-bg: rgb(0 0 0 / 0.5);
-  --frame-sheet-bg: var(--frame-background, #fff);
-  --frame-sheet-border: var(--frame-border, #e5e7eb);
-  --frame-sheet-color: var(--frame-foreground, #09090b);
-  --frame-sheet-muted-color: var(--frame-muted-foreground, #71717a);
-  --frame-sheet-shadow: 0 24px 80px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.14);
-  --frame-sheet-radius: 0;
-  --frame-sheet-padding: 1.5rem;
-  --frame-sheet-gap: 1rem;
+  --frame-sheet-bg: var(--frame-background);
+  --frame-sheet-border: var(--frame-border);
+  --frame-sheet-color: var(--frame-foreground);
+  --frame-sheet-muted-color: var(--frame-muted-foreground);
+  --frame-sheet-shadow: var(--frame-shadow-lg);
+  --frame-sheet-radius: 0px;
+  --frame-sheet-padding: var(--frame-density-panel-padding-lg);
+  --frame-sheet-gap: var(--frame-density-gap-xl);
   --frame-sheet-inline-size: min(100vw, 28rem);
   --frame-sheet-block-size: min(100dvh, 28rem);
   --frame-sheet-close-bg: transparent;
-  --frame-sheet-close-color: var(--frame-muted-foreground, #71717a);
+  --frame-sheet-close-color: var(--frame-muted-foreground);
   --frame-sheet-close-radius: var(--frame-radius-sm);
-  --frame-sheet-close-hover-bg: var(--frame-muted, #f4f4f5);
-  --frame-sheet-close-hover-color: var(--frame-foreground, #09090b);
+  --frame-sheet-close-hover-bg: var(--frame-muted);
+  --frame-sheet-close-hover-color: var(--frame-foreground);
   --frame-sheet-z-index: 1000;
 }

package/sheet/src/styles/sheet.css

@@ -28,7 +28,7 @@
   border: 1px solid var(--frame-sheet-border);
   border-radius: var(--frame-sheet-radius);
   background: var(--frame-sheet-bg);
-  box-shadow: var(--frame-sheet-shadow), var(--frame-shadow-frame);
+  box-shadow: var(--frame-sheet-shadow);
   color: var(--frame-sheet-color);
 }