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

package/field/src/styles/_vars.css

@@ -1,20 +1,20 @@
-:root {
-  --frame-field-set-gap: 1.5rem;
-  --frame-field-group-gap: 1rem;
-  --frame-field-gap: 0.5rem;
-  --frame-field-content-gap: 0.375rem;
-  --frame-field-legend-color: var(--frame-foreground);
-  --frame-field-legend-font-size: 1rem;
-  --frame-field-legend-font-weight: 700;
-  --frame-field-label-font-size: 0.875rem;
-  --frame-field-label-font-weight: 600;
-  --frame-field-label-color: var(--frame-foreground);
-  --frame-field-description-color: var(--frame-muted-foreground);
-  --frame-field-description-font-size: 0.8125rem;
-  --frame-field-error-color: var(--frame-destructive);
-  --frame-field-error-font-size: 0.6125rem;
-  --frame-field-separator-gap: 0.75rem;
-  --frame-field-separator-color: var(--frame-muted-foreground);
-  --frame-field-separator-bg: var(--frame-border);
-  --frame-field-separator-font-size: 0.75rem;
-}
+:where(:root) {
+  --frame-field-set-gap: var(--frame-density-panel-padding-lg);
+  --frame-field-group-gap: var(--frame-density-gap-xl);
+  --frame-field-gap: var(--frame-density-gap-md);
+  --frame-field-content-gap: var(--frame-density-gap-md);
+  --frame-field-legend-color: var(--frame-foreground);
+  --frame-field-legend-font-size: 1rem;
+  --frame-field-legend-font-weight: 700;
+  --frame-field-label-font-size: 0.875rem;
+  --frame-field-label-font-weight: 600;
+  --frame-field-label-color: var(--frame-foreground);
+  --frame-field-description-color: var(--frame-muted-foreground);
+  --frame-field-description-font-size: 0.8125rem;
+  --frame-field-error-color: var(--frame-destructive);
+  --frame-field-error-font-size: 0.6125rem;
+  --frame-field-separator-gap: var(--frame-density-gap-lg);
+  --frame-field-separator-color: var(--frame-muted-foreground);
+  --frame-field-separator-bg: var(--frame-border);
+  --frame-field-separator-font-size: 0.75rem;
+}

package/hover-card/src/styles/_vars.css

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

package/input/src/styles/_vars.css

@@ -1,20 +1,20 @@
-:root {
-  --frame-input-field-gap: 0.5rem;
-  --frame-input-header-gap: 0.75rem;
-  --frame-input-field-group-gap: 1rem;
+:where(:root) {
+  --frame-input-field-gap: var(--frame-density-gap-md);
+  --frame-input-header-gap: var(--frame-density-gap-lg);
+  --frame-input-field-group-gap: var(--frame-density-gap-xl);
   --frame-input-label-font-size: 0.875rem;
   --frame-input-label-font-weight: 600;
   --frame-input-description-color: var(--frame-muted-foreground);
   --frame-input-description-font-size: 0.8125rem;
   --frame-input-error-color: var(--frame-destructive);
   --frame-input-error-font-size: 0.8125rem;
-  --frame-input-root-height: 2.5rem;
+  --frame-input-root-height: var(--frame-density-control-height-lg);
   --frame-input-root-radius: var(--frame-radius-md);
   --frame-input-root-bg: var(--frame-surface);
   --frame-input-root-color: var(--frame-surface-foreground);
   --frame-input-root-border: var(--frame-border);
   --frame-input-root-font-size: 0.875rem;
-  --frame-input-root-padding-inline: 0.875rem;
+  --frame-input-root-padding-inline: var(--frame-density-control-padding-x-md);
   --frame-input-root-placeholder-color: var(--frame-muted-foreground);
   --frame-input-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
   --frame-input-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
@@ -27,18 +27,18 @@
   --frame-input-root-disabled-color: color-mix(in srgb, var(--frame-surface-foreground) 52%, var(--frame-muted-foreground));
   --frame-input-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
   --frame-input-root-transition-duration: 150ms;
-  --frame-input-file-padding-block: 0.375rem;
-  --frame-input-file-button-radius: 0;
+  --frame-input-file-padding-block: var(--frame-density-file-padding-block);
+  --frame-input-file-button-radius: var(--frame-radius-sm);
   --frame-input-file-button-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
   --frame-input-file-button-hover-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
   --frame-input-file-button-font-size: 0.8125rem;
   --frame-input-file-button-font-weight: 600;
-  --frame-input-file-button-margin-inline-end: 0.75rem;
-  --frame-input-file-button-padding: 0.45rem 0.75rem;
+  --frame-input-file-button-margin-inline-end: var(--frame-density-gap-lg);
+  --frame-input-file-button-padding: var(--frame-density-item-padding);
   --frame-input-file-button-transition-duration: var(--frame-input-root-transition-duration);
-  --frame-input-badge-height: 1.5rem;
-  --frame-input-badge-padding-inline: 0.5rem;
-  --frame-input-badge-radius: 0;
+  --frame-input-badge-height: var(--frame-density-inline-height);
+  --frame-input-badge-padding-inline: var(--frame-density-inline-padding-inline);
+  --frame-input-badge-radius: var(--frame-radius-sm);
   --frame-input-badge-border: color-mix(in srgb, var(--frame-primary) 24%, transparent);
   --frame-input-badge-bg: color-mix(in srgb, var(--frame-primary) 12%, transparent);
   --frame-input-badge-color: var(--frame-primary);
@@ -55,10 +55,10 @@
   --frame-input-group-disabled-border: var(--frame-input-root-disabled-border);
   --frame-input-group-disabled-color: var(--frame-input-root-disabled-color);
   --frame-input-group-input-padding-inline: var(--frame-input-root-padding-inline);
-  --frame-input-group-addon-min-width: 2.5rem;
+  --frame-input-group-addon-min-width: var(--frame-density-control-height-lg);
   --frame-input-group-addon-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
   --frame-input-group-addon-color: var(--frame-muted-foreground);
-  --frame-input-group-addon-padding-inline: 0.75rem;
+  --frame-input-group-addon-padding-inline: var(--frame-density-control-padding-x-sm);
   --frame-input-group-addon-border: var(--frame-border);
   --frame-input-group-text-font-size: 0.8125rem;
   --frame-input-group-text-font-weight: 600;

package/input/src/styles/input.css

@@ -47,11 +47,6 @@ frame-input-control::before {
   content: '';
 }
 
-[frInputControl]:focus-within,
-frame-input-control:focus-within {
-  --frame-input-frame-color: var(--frame-frame-accent);
-}
-
 [frInputFieldGroup],
 frame-input-field-group {
   display: grid;

package/input-otp/src/styles/_vars.css

@@ -1,7 +1,7 @@
-:root {
-  --frame-input-otp-gap: 0.5rem;
+:where(:root) {
+  --frame-input-otp-gap: var(--frame-density-gap-md);
   --frame-input-otp-group-gap: 0;
-  --frame-input-otp-slot-size: 2.5rem;
+  --frame-input-otp-slot-size: var(--frame-density-control-height-lg);
   --frame-input-otp-slot-radius: var(--frame-input-root-radius);
   --frame-input-otp-slot-bg: var(--frame-input-root-bg);
   --frame-input-otp-slot-color: var(--frame-input-root-color);

package/input-otp/src/styles/input-otp.css

@@ -1,116 +1,116 @@
-@import './_vars.css';
-
-frame-input-otp {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--frame-input-otp-gap);
-}
-
-.frame-input-otp__native {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  border: 0;
-  background: transparent;
-  box-shadow: none;
-  caret-color: transparent;
-  color: transparent;
-  opacity: 0.01;
-  padding: 0;
-}
-
-.frame-input-otp__native:disabled {
-  background: transparent;
-  color: transparent;
-  opacity: 0.01;
-}
-
-.frame-input-otp__group {
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
-  gap: var(--frame-input-otp-group-gap);
-  pointer-events: none;
-}
-
-.frame-input-otp__slot {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--frame-input-otp-slot-size);
-  block-size: var(--frame-input-otp-slot-size);
-  border: 1px solid var(--frame-input-otp-slot-border);
-  border-radius: 0;
-  background: var(--frame-input-otp-slot-bg);
-  color: var(--frame-input-otp-slot-color);
-  font-size: var(--frame-input-otp-slot-font-size);
-  font-weight: var(--frame-input-otp-slot-font-weight);
-  line-height: 1;
-  pointer-events: auto;
-  transition:
-    border-color 140ms ease,
-    box-shadow 140ms ease,
-    color 140ms ease,
-    opacity 140ms ease;
-}
-
-.frame-input-otp__slot:first-child {
-  border-start-start-radius: var(--frame-input-otp-slot-radius);
-  border-end-start-radius: var(--frame-input-otp-slot-radius);
-}
-
-.frame-input-otp__slot:last-child {
-  border-start-end-radius: var(--frame-input-otp-slot-radius);
-  border-end-end-radius: var(--frame-input-otp-slot-radius);
-}
-
-.frame-input-otp__slot + .frame-input-otp__slot {
-  margin-inline-start: -1px;
-}
-
-.frame-input-otp__slot[data-active] {
-  z-index: 1;
-  border-color: var(--frame-input-otp-slot-focus-border);
-  box-shadow: var(--frame-input-otp-slot-focus-shadow);
-}
-
-.frame-input-otp__slot[data-invalid],
-frame-input-otp[data-invalid] .frame-input-otp__slot {
-  border-color: var(--frame-input-otp-slot-invalid-border);
-  box-shadow: var(--frame-input-otp-slot-invalid-shadow);
-}
-
-.frame-input-otp__slot[data-disabled],
-frame-input-otp[data-disabled] .frame-input-otp__slot {
-  background: var(--frame-input-otp-slot-disabled-bg);
-  color: var(--frame-input-otp-slot-disabled-color);
-  opacity: var(--frame-input-otp-slot-disabled-opacity);
-}
-
-.frame-input-otp__slot-char--empty {
-  color: var(--frame-input-otp-slot-placeholder-color);
-}
-
-.frame-input-otp__separator {
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--frame-input-otp-slot-size);
-  color: var(--frame-input-otp-separator-color);
-  pointer-events: none;
-}
-
-.frame-input-otp__separator::before {
-  content: '';
-  inline-size: var(--frame-input-otp-separator-size);
-  block-size: var(--frame-input-otp-separator-size);
-  border-radius: 999px;
-  background: currentColor;
-}
+@import './_vars.css';
+
+frame-input-otp {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--frame-input-otp-gap);
+}
+
+.frame-input-otp__native {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  caret-color: transparent;
+  color: transparent;
+  opacity: 0.01;
+  padding: 0;
+}
+
+.frame-input-otp__native:disabled {
+  background: transparent;
+  color: transparent;
+  opacity: 0.01;
+}
+
+.frame-input-otp__group {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  gap: var(--frame-input-otp-group-gap);
+  pointer-events: none;
+}
+
+.frame-input-otp__slot {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-input-otp-slot-size);
+  block-size: var(--frame-input-otp-slot-size);
+  border: 1px solid var(--frame-input-otp-slot-border);
+  border-radius: 0;
+  background: var(--frame-input-otp-slot-bg);
+  color: var(--frame-input-otp-slot-color);
+  font-size: var(--frame-input-otp-slot-font-size);
+  font-weight: var(--frame-input-otp-slot-font-weight);
+  line-height: 1;
+  pointer-events: auto;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease;
+}
+
+.frame-input-otp__slot:first-child {
+  border-start-start-radius: var(--frame-input-otp-slot-radius);
+  border-end-start-radius: var(--frame-input-otp-slot-radius);
+}
+
+.frame-input-otp__slot:last-child {
+  border-start-end-radius: var(--frame-input-otp-slot-radius);
+  border-end-end-radius: var(--frame-input-otp-slot-radius);
+}
+
+.frame-input-otp__slot + .frame-input-otp__slot {
+  margin-inline-start: -1px;
+}
+
+.frame-input-otp__slot[data-active] {
+  z-index: 1;
+  border-color: var(--frame-input-otp-slot-focus-border);
+  box-shadow: var(--frame-input-otp-slot-focus-shadow);
+}
+
+.frame-input-otp__slot[data-invalid],
+frame-input-otp[data-invalid] .frame-input-otp__slot {
+  border-color: var(--frame-input-otp-slot-invalid-border);
+  box-shadow: var(--frame-input-otp-slot-invalid-shadow);
+}
+
+.frame-input-otp__slot[data-disabled],
+frame-input-otp[data-disabled] .frame-input-otp__slot {
+  background: var(--frame-input-otp-slot-disabled-bg);
+  color: var(--frame-input-otp-slot-disabled-color);
+  opacity: var(--frame-input-otp-slot-disabled-opacity);
+}
+
+.frame-input-otp__slot-char--empty {
+  color: var(--frame-input-otp-slot-placeholder-color);
+}
+
+.frame-input-otp__separator {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-input-otp-slot-size);
+  color: var(--frame-input-otp-separator-color);
+  pointer-events: none;
+}
+
+.frame-input-otp__separator::before {
+  content: '';
+  inline-size: var(--frame-input-otp-separator-size);
+  block-size: var(--frame-input-otp-separator-size);
+  border-radius: var(--frame-radius-full);
+  background: currentColor;
+}

package/item/src/styles/_vars.css

@@ -1,6 +1,6 @@
-:root {
-  --frame-item-gap: 0.875rem;
-  --frame-item-padding: 1rem;
+:where(:root) {
+  --frame-item-gap: var(--frame-density-gap-lg);
+  --frame-item-padding: var(--frame-density-panel-padding-md);
   --frame-item-radius: var(--frame-radius-lg);
   --frame-item-bg: transparent;
   --frame-item-color: var(--frame-foreground);
@@ -11,10 +11,10 @@
   --frame-item-hover-color: var(--frame-accent-foreground);
   --frame-item-focus-shadow: none;
   --frame-item-disabled-opacity: 0.5;
-  --frame-item-content-gap: 0.25rem;
-  --frame-item-header-gap: 0.625rem;
-  --frame-item-footer-gap: 0.5rem;
-  --frame-item-actions-gap: 0.5rem;
+  --frame-item-content-gap: var(--frame-density-gap-sm);
+  --frame-item-header-gap: var(--frame-density-gap-lg);
+  --frame-item-footer-gap: var(--frame-density-gap-md);
+  --frame-item-actions-gap: var(--frame-density-gap-md);
   --frame-item-media-size: 2.5rem;
   --frame-item-media-radius: var(--frame-radius-md);
   --frame-item-media-bg: var(--frame-muted);
@@ -25,10 +25,10 @@
   --frame-item-title-font-weight: 600;
   --frame-item-description-color: var(--frame-muted-foreground);
   --frame-item-description-font-size: 0.875rem;
-  --frame-item-sm-padding: 0.75rem;
+  --frame-item-sm-padding: var(--frame-density-gap-lg);
   --frame-item-sm-media-size: 2rem;
   --frame-item-sm-title-font-size: 0.875rem;
-  --frame-item-xs-padding: 0.5rem;
+  --frame-item-xs-padding: var(--frame-density-gap-md);
   --frame-item-xs-media-size: 1.75rem;
   --frame-item-xs-title-font-size: 0.8125rem;
 }

package/menubar/src/styles/_vars.css

@@ -1,15 +1,15 @@
-:root {
+:where(:root) {
   --frame-menubar-bg: var(--frame-surface);
   --frame-menubar-color: var(--frame-surface-foreground);
   --frame-menubar-border: var(--frame-border);
   --frame-menubar-radius: var(--frame-radius-md);
-  --frame-menubar-padding: 0.25rem;
-  --frame-menubar-gap: 0.25rem;
-  --frame-menubar-shadow: none;
-  --frame-menubar-trigger-height: 2rem;
+  --frame-menubar-padding: var(--frame-density-panel-padding-sm);
+  --frame-menubar-gap: var(--frame-density-gap-sm);
+  --frame-menubar-shadow: var(--frame-shadow-sm);
+  --frame-menubar-trigger-height: var(--frame-density-item-height);
   --frame-menubar-trigger-padding-x: 0.75rem;
-  --frame-menubar-trigger-gap: 0.375rem;
-  --frame-menubar-trigger-radius: calc(var(--frame-menubar-radius) - 0.125rem);
+  --frame-menubar-trigger-gap: var(--frame-density-gap-md);
+  --frame-menubar-trigger-radius: var(--frame-radius-sm);
   --frame-menubar-trigger-font-size: 0.875rem;
   --frame-menubar-trigger-font-weight: 500;
   --frame-menubar-trigger-bg: transparent;

package/modal/src/styles/_vars.css

@@ -1,19 +1,19 @@
-:root {
+:where(:root) {
   --frame-modal-backdrop-blur: 3px;
   --frame-modal-backdrop-bg: rgb(0 0 0 / 0.52);
-  --frame-modal-bg: var(--frame-background, #fff);
-  --frame-modal-border: var(--frame-border, #e5e7eb);
-  --frame-modal-color: var(--frame-foreground, #09090b);
-  --frame-modal-muted-color: var(--frame-muted-foreground, #71717a);
-  --frame-modal-radius: var(--frame-radius-lg, 0.75rem);
-  --frame-modal-shadow: 0 24px 80px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.12);
-  --frame-modal-padding: 1.5rem;
-  --frame-modal-gap: 1rem;
+  --frame-modal-bg: var(--frame-background);
+  --frame-modal-border: var(--frame-border);
+  --frame-modal-color: var(--frame-foreground);
+  --frame-modal-muted-color: var(--frame-muted-foreground);
+  --frame-modal-radius: var(--frame-radius-lg);
+  --frame-modal-shadow: var(--frame-shadow-lg);
+  --frame-modal-padding: var(--frame-density-panel-padding-lg);
+  --frame-modal-gap: var(--frame-density-gap-xl);
   --frame-modal-scrollable-height: min(calc(100dvh - 2rem), 28rem);
   --frame-modal-close-bg: transparent;
-  --frame-modal-close-color: var(--frame-muted-foreground, #71717a);
+  --frame-modal-close-color: var(--frame-muted-foreground);
   --frame-modal-close-radius: var(--frame-radius-sm);
-  --frame-modal-close-hover-bg: var(--frame-muted, #f4f4f5);
-  --frame-modal-close-hover-color: var(--frame-foreground, #09090b);
+  --frame-modal-close-hover-bg: var(--frame-muted);
+  --frame-modal-close-hover-color: var(--frame-foreground);
   --frame-modal-z-index: 1000;
 }

package/modal/src/styles/modal.css

@@ -25,7 +25,7 @@
   border: 1px solid var(--frame-modal-border);
   border-radius: var(--frame-modal-radius);
   background: var(--frame-modal-bg);
-  box-shadow: var(--frame-modal-shadow), var(--frame-shadow-frame);
+  box-shadow: var(--frame-modal-shadow);
   color: var(--frame-modal-color);
   animation: frame-modal-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
 }

package/navigation-menu/src/styles/_vars.css

@@ -1,13 +1,13 @@
-:root {
-  --frame-navigation-menu-gap: 0.25rem;
-  --frame-navigation-menu-padding: 0.25rem;
+:where(:root) {
+  --frame-navigation-menu-gap: var(--frame-density-gap-sm);
+  --frame-navigation-menu-padding: var(--frame-density-panel-padding-sm);
   --frame-navigation-menu-radius: var(--frame-radius-md);
   --frame-navigation-menu-bg: transparent;
   --frame-navigation-menu-color: var(--frame-foreground);
-  --frame-navigation-menu-trigger-height: 2.25rem;
+  --frame-navigation-menu-trigger-height: var(--frame-density-control-height-md);
   --frame-navigation-menu-trigger-padding-x: 0.875rem;
-  --frame-navigation-menu-trigger-gap: 0.375rem;
-  --frame-navigation-menu-trigger-radius: calc(var(--frame-navigation-menu-radius) - 0.125rem);
+  --frame-navigation-menu-trigger-gap: var(--frame-density-gap-md);
+  --frame-navigation-menu-trigger-radius: var(--frame-radius-sm);
   --frame-navigation-menu-trigger-font-size: 0.875rem;
   --frame-navigation-menu-trigger-font-weight: 500;
   --frame-navigation-menu-trigger-bg: transparent;
@@ -18,9 +18,9 @@
   --frame-navigation-menu-trigger-open-color: var(--frame-accent-foreground);
   --frame-navigation-menu-trigger-focus-shadow: none;
   --frame-navigation-menu-content-width: 36rem;
-  --frame-navigation-menu-content-gap: 0.25rem;
-  --frame-navigation-menu-link-gap: 0.25rem;
-  --frame-navigation-menu-link-padding: 0.75rem;
+  --frame-navigation-menu-content-gap: var(--frame-density-gap-sm);
+  --frame-navigation-menu-link-gap: var(--frame-density-gap-sm);
+  --frame-navigation-menu-link-padding: var(--frame-density-gap-lg);
   --frame-navigation-menu-link-radius: var(--frame-radius-md);
   --frame-navigation-menu-link-bg: transparent;
   --frame-navigation-menu-link-color: var(--frame-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-ui-ng/components",
-  "version": "0.4.2-beta.0",
+  "version": "0.5.0-beta.0",
   "description": "Angular components for FrameUI.",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "@angular/common": ">=21.0.0 <22.0.0",
     "@angular/core": ">=21.0.0 <22.0.0",
     "@angular/forms": ">=21.0.0 <22.0.0",
-    "@frame-ui-ng/foundation": "0.4.2-beta.0",
+    "@frame-ui-ng/foundation": "0.5.0-beta.0",
     "rxjs": "^7.8.0"
   },
   "dependencies": {

package/pagination/src/styles/_vars.css

@@ -1,10 +1,10 @@
-:root {
-  --frame-pagination-gap: 0.25rem;
+:where(:root) {
+  --frame-pagination-gap: var(--frame-density-gap-sm);
   --frame-pagination-color: var(--frame-foreground);
-  --frame-pagination-link-size: 2.25rem;
-  --frame-pagination-link-min-width: 2.25rem;
-  --frame-pagination-link-padding-x: 0.75rem;
-  --frame-pagination-link-gap: 0.375rem;
+  --frame-pagination-link-size: var(--frame-density-control-height-md);
+  --frame-pagination-link-min-width: var(--frame-density-control-height-md);
+  --frame-pagination-link-padding-x: var(--frame-density-control-padding-x-sm);
+  --frame-pagination-link-gap: var(--frame-density-gap-md);
   --frame-pagination-link-radius: var(--frame-radius-md);
   --frame-pagination-link-bg: transparent;
   --frame-pagination-link-color: var(--frame-muted-foreground);

package/pagination/src/styles/pagination.css

@@ -93,13 +93,23 @@ nav[frPagination] {
 
 [frPaginationLink][data-active]::before,
 .frame-pagination__link[data-active]::before {
+  --frame-pagination-link-corner-size: clamp(
+    0px,
+    calc((1px - var(--frame-pagination-link-radius, 0px)) * 9999),
+    0.3125rem
+  );
+  --frame-pagination-link-corner-border-width: clamp(
+    0px,
+    calc((1px - var(--frame-pagination-link-radius, 0px)) * 9999),
+    1px
+  );
   position: absolute;
   inset-block-start: 0.1875rem;
   inset-inline-start: 0.1875rem;
-  inline-size: 0.3125rem;
-  block-size: 0.3125rem;
-  border-block-start: 1px solid currentColor;
-  border-inline-start: 1px solid currentColor;
+  inline-size: var(--frame-pagination-link-corner-size);
+  block-size: var(--frame-pagination-link-corner-size);
+  border-block-start: var(--frame-pagination-link-corner-border-width) solid currentColor;
+  border-inline-start: var(--frame-pagination-link-corner-border-width) solid currentColor;
   content: "";
   pointer-events: none;
 }