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

package/avatar/src/styles/avatar.css

@@ -1,209 +1,209 @@
-@import './_vars.css';
-
-[frAvatar] {
-  --frame-avatar-badge-size-current: var(
-    --frame-avatar-badge-size,
-    calc(var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem)) * 0.35)
-  );
-  --frame-avatar-badge-font-size-current: var(
-    --frame-avatar-badge-font-size,
-    calc(var(--frame-avatar-font-size-current, var(--frame-avatar-root-font-size, 0.875rem)) * 0.72)
-  );
-  position: relative;
-  inline-size: var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem));
-  block-size: var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: visible;
-  flex: 0 0 auto;
-  border: 1px solid var(--frame-avatar-root-border, transparent);
-  border-radius: var(--frame-avatar-root-radius, 999px);
-  background: var(--frame-avatar-root-bg, var(--frame-muted));
-  box-shadow: var(--frame-avatar-root-shadow, none);
-  color: var(--frame-avatar-root-color, var(--frame-muted-foreground));
-  font-size: var(--frame-avatar-font-size-current, var(--frame-avatar-root-font-size, 0.875rem));
-  font-weight: var(--frame-avatar-root-font-weight, 600);
-  line-height: 1;
-  text-transform: uppercase;
-  user-select: none;
-  vertical-align: middle;
-}
-
-[frAvatar][data-size='xs'] {
-  --frame-avatar-size-current: var(--frame-avatar-size-xs, 1rem);
-  --frame-avatar-font-size-current: var(--frame-avatar-font-size-xs, 0.5rem);
-}
-
-[frAvatar][data-size='sm'] {
-  --frame-avatar-size-current: var(--frame-avatar-size-sm, 2rem);
-  --frame-avatar-font-size-current: var(--frame-avatar-font-size-sm, 0.75rem);
-}
-
-[frAvatar][data-size='md'] {
-  --frame-avatar-size-current: var(--frame-avatar-size-md, 2.5rem);
-  --frame-avatar-font-size-current: var(--frame-avatar-font-size-md, 0.875rem);
-}
-
-[frAvatar][data-size='lg'] {
-  --frame-avatar-size-current: var(--frame-avatar-size-lg, 3.5rem);
-  --frame-avatar-font-size-current: var(--frame-avatar-font-size-lg, 1rem);
-}
-
-[frAvatarImage],
-[frAvatarFallback],
-[frAvatarIcon] {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  border-radius: inherit;
-}
-
-[frAvatarImage] {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: var(--frame-avatar-image-fit, cover);
-  opacity: 0;
-  transition: opacity 160ms ease;
-}
-
-[frAvatar][data-status='loaded'] [frAvatarImage] {
-  opacity: 1;
-}
-
-[frAvatarFallback] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  block-size: 100%;
-  padding: var(--frame-avatar-fallback-padding, 0.25rem);
-  line-height: inherit;
-  text-align: center;
-  transition: opacity 160ms ease;
-}
-
-[frAvatarIcon] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  block-size: 100%;
-  font-size: var(--frame-avatar-icon-size, 1rem);
-  line-height: inherit;
-  transition: opacity 160ms ease;
-}
-
-[frAvatarIcon] > * {
-  inline-size: 1em;
-  block-size: 1em;
-}
-
-[frAvatarFallback][data-visible='false'] {
-  opacity: 0;
-  pointer-events: none;
-}
-
-[frAvatarIcon][data-visible='false'] {
-  opacity: 0;
-  pointer-events: none;
-}
-
-[frAvatarBadge] {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-end: 0;
-  z-index: 2;
-  min-inline-size: var(--frame-avatar-badge-size-current);
-  block-size: var(--frame-avatar-badge-size-current);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 0.25rem;
-  border: 2px solid var(--frame-avatar-badge-border, var(--frame-surface));
-  border-radius: var(--frame-avatar-badge-radius, 999px);
-  background: var(--frame-avatar-badge-bg, var(--frame-primary));
-  color: var(--frame-avatar-badge-color, var(--frame-primary-foreground));
-  font-size: var(--frame-avatar-badge-font-size-current);
-  font-weight: var(--frame-avatar-badge-font-weight, 700);
-  line-height: 1;
-  transform: translate(18%, 18%);
-}
-
-[frAvatarGroup] {
-  display: inline-flex;
-  align-items: center;
-}
-
-[frAvatarGroup] > [frAvatar],
-[frAvatarGroup] > [frAvatarGroupCount] {
-  margin-inline-start: calc(var(--frame-avatar-group-overlap) * -1);
-  box-shadow: var(--frame-shadow-sm);
-  transition:
-    margin-inline-start var(--frame-avatar-group-transition-duration, 180ms)
-      var(--frame-avatar-group-transition-timing, ease),
-    transform var(--frame-avatar-group-transition-duration, 180ms)
-      var(--frame-avatar-group-transition-timing, ease);
-}
-
-[frAvatarGroup] > :first-child {
-  margin-inline-start: 0;
-}
-
-[frAvatarGroup] > [frAvatar],
-[frAvatarGroup] > [frAvatarGroupCount] {
-  position: relative;
-}
-
-[frAvatarGroup][data-expand-on-hover='true']:where(:hover, :focus-within)
-  > [frAvatar]:not(:first-child),
-[frAvatarGroup][data-expand-on-hover='true']:where(:hover, :focus-within)
-  > [frAvatarGroupCount]:not(:first-child) {
-  margin-inline-start: 0;
-}
-
-[frAvatarGroup][data-size='sm'] > [frAvatarGroupCount] {
-  inline-size: var(--frame-avatar-size-sm, 2rem);
-  block-size: var(--frame-avatar-size-sm, 2rem);
-  font-size: var(--frame-avatar-font-size-sm, 0.75rem);
-}
-
-[frAvatarGroup][data-size='md'] > [frAvatarGroupCount] {
-  inline-size: var(--frame-avatar-size-md, 2.5rem);
-  block-size: var(--frame-avatar-size-md, 2.5rem);
-  font-size: var(--frame-avatar-font-size-md, 0.875rem);
-}
-
-[frAvatarGroup][data-size='lg'] > [frAvatarGroupCount] {
-  inline-size: var(--frame-avatar-size-lg, 3.5rem);
-  block-size: var(--frame-avatar-size-lg, 3.5rem);
-  font-size: var(--frame-avatar-font-size-lg, 1rem);
-}
-
-[frAvatarGroup][data-size='sm'] > [frAvatar] {
-  --frame-avatar-size-current: var(--frame-avatar-size-sm, 2rem);
-  --frame-avatar-font-size-current: var(--frame-avatar-font-size-sm, 0.75rem);
-}
-
-[frAvatarGroup][data-size='md'] > [frAvatar] {
-  --frame-avatar-size-current: var(--frame-avatar-size-md, 2.5rem);
-  --frame-avatar-font-size-current: var(--frame-avatar-font-size-md, 0.875rem);
-}
-
-[frAvatarGroup][data-size='lg'] > [frAvatar] {
-  --frame-avatar-size-current: var(--frame-avatar-size-lg, 3.5rem);
-  --frame-avatar-font-size-current: var(--frame-avatar-font-size-lg, 1rem);
-}
-
-[frAvatarGroupCount] {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--frame-avatar-group-count-border, var(--frame-border));
-  border-radius: var(--frame-avatar-root-radius, 999px);
-  background: var(--frame-avatar-group-count-bg, var(--frame-surface));
-  color: var(--frame-avatar-group-count-color, var(--frame-muted-foreground));
-  font-weight: var(--frame-avatar-root-font-weight, 600);
-  box-shadow: var(--frame-avatar-root-shadow, none);
-}
+@import './_vars.css';
+
+[frAvatar] {
+  --frame-avatar-badge-size-current: var(
+    --frame-avatar-badge-size,
+    calc(var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem)) * 0.35)
+  );
+  --frame-avatar-badge-font-size-current: var(
+    --frame-avatar-badge-font-size,
+    calc(var(--frame-avatar-font-size-current, var(--frame-avatar-root-font-size, 0.875rem)) * 0.72)
+  );
+  position: relative;
+  inline-size: var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem));
+  block-size: var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  flex: 0 0 auto;
+  border: 1px solid var(--frame-avatar-root-border, transparent);
+  border-radius: var(--frame-avatar-root-radius, var(--frame-radius-full));
+  background: var(--frame-avatar-root-bg, var(--frame-muted));
+  box-shadow: var(--frame-avatar-root-shadow, none);
+  color: var(--frame-avatar-root-color, var(--frame-muted-foreground));
+  font-size: var(--frame-avatar-font-size-current, var(--frame-avatar-root-font-size, 0.875rem));
+  font-weight: var(--frame-avatar-root-font-weight, 600);
+  line-height: 1;
+  text-transform: uppercase;
+  user-select: none;
+  vertical-align: middle;
+}
+
+[frAvatar][data-size='xs'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-xs, 1rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-xs, 0.5rem);
+}
+
+[frAvatar][data-size='sm'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-sm, 2rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-sm, 0.75rem);
+}
+
+[frAvatar][data-size='md'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-md, 2.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-md, 0.875rem);
+}
+
+[frAvatar][data-size='lg'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-lg, 3.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-lg, 1rem);
+}
+
+[frAvatarImage],
+[frAvatarFallback],
+[frAvatarIcon] {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+}
+
+[frAvatarImage] {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: var(--frame-avatar-image-fit, cover);
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+[frAvatar][data-status='loaded'] [frAvatarImage] {
+  opacity: 1;
+}
+
+[frAvatarFallback] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  padding: var(--frame-avatar-fallback-padding, 0.25rem);
+  line-height: inherit;
+  text-align: center;
+  transition: opacity 160ms ease;
+}
+
+[frAvatarIcon] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  font-size: var(--frame-avatar-icon-size, 1rem);
+  line-height: inherit;
+  transition: opacity 160ms ease;
+}
+
+[frAvatarIcon] > * {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+[frAvatarFallback][data-visible='false'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+[frAvatarIcon][data-visible='false'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+[frAvatarBadge] {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  z-index: 2;
+  min-inline-size: var(--frame-avatar-badge-size-current);
+  block-size: var(--frame-avatar-badge-size-current);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 0.25rem;
+  border: 2px solid var(--frame-avatar-badge-border, var(--frame-surface));
+  border-radius: var(--frame-avatar-badge-radius, var(--frame-radius-full));
+  background: var(--frame-avatar-badge-bg, var(--frame-primary));
+  color: var(--frame-avatar-badge-color, var(--frame-primary-foreground));
+  font-size: var(--frame-avatar-badge-font-size-current);
+  font-weight: var(--frame-avatar-badge-font-weight, 700);
+  line-height: 1;
+  transform: translate(18%, 18%);
+}
+
+[frAvatarGroup] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[frAvatarGroup] > [frAvatar],
+[frAvatarGroup] > [frAvatarGroupCount] {
+  margin-inline-start: calc(var(--frame-avatar-group-overlap) * -1);
+  box-shadow: var(--frame-shadow-sm);
+  transition:
+    margin-inline-start var(--frame-avatar-group-transition-duration, 180ms)
+      var(--frame-avatar-group-transition-timing, ease),
+    transform var(--frame-avatar-group-transition-duration, 180ms)
+      var(--frame-avatar-group-transition-timing, ease);
+}
+
+[frAvatarGroup] > :first-child {
+  margin-inline-start: 0;
+}
+
+[frAvatarGroup] > [frAvatar],
+[frAvatarGroup] > [frAvatarGroupCount] {
+  position: relative;
+}
+
+[frAvatarGroup][data-expand-on-hover='true']:where(:hover, :focus-within)
+  > [frAvatar]:not(:first-child),
+[frAvatarGroup][data-expand-on-hover='true']:where(:hover, :focus-within)
+  > [frAvatarGroupCount]:not(:first-child) {
+  margin-inline-start: 0;
+}
+
+[frAvatarGroup][data-size='sm'] > [frAvatarGroupCount] {
+  inline-size: var(--frame-avatar-size-sm, 2rem);
+  block-size: var(--frame-avatar-size-sm, 2rem);
+  font-size: var(--frame-avatar-font-size-sm, 0.75rem);
+}
+
+[frAvatarGroup][data-size='md'] > [frAvatarGroupCount] {
+  inline-size: var(--frame-avatar-size-md, 2.5rem);
+  block-size: var(--frame-avatar-size-md, 2.5rem);
+  font-size: var(--frame-avatar-font-size-md, 0.875rem);
+}
+
+[frAvatarGroup][data-size='lg'] > [frAvatarGroupCount] {
+  inline-size: var(--frame-avatar-size-lg, 3.5rem);
+  block-size: var(--frame-avatar-size-lg, 3.5rem);
+  font-size: var(--frame-avatar-font-size-lg, 1rem);
+}
+
+[frAvatarGroup][data-size='sm'] > [frAvatar] {
+  --frame-avatar-size-current: var(--frame-avatar-size-sm, 2rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-sm, 0.75rem);
+}
+
+[frAvatarGroup][data-size='md'] > [frAvatar] {
+  --frame-avatar-size-current: var(--frame-avatar-size-md, 2.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-md, 0.875rem);
+}
+
+[frAvatarGroup][data-size='lg'] > [frAvatar] {
+  --frame-avatar-size-current: var(--frame-avatar-size-lg, 3.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-lg, 1rem);
+}
+
+[frAvatarGroupCount] {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--frame-avatar-group-count-border, var(--frame-border));
+  border-radius: var(--frame-avatar-root-radius, var(--frame-radius-full));
+  background: var(--frame-avatar-group-count-bg, var(--frame-surface));
+  color: var(--frame-avatar-group-count-color, var(--frame-muted-foreground));
+  font-weight: var(--frame-avatar-root-font-weight, 600);
+  box-shadow: var(--frame-avatar-root-shadow, none);
+}

package/badge/src/styles/_vars.css

@@ -1,16 +1,16 @@
-:root {
-  --frame-badge-root-gap: 0.25rem;
-  --frame-badge-root-min-height: 1.375rem;
-  --frame-badge-root-radius: 0;
+:where(:root) {
+  --frame-badge-root-gap: var(--frame-density-gap-sm);
+  --frame-badge-root-min-height: var(--frame-density-inline-height);
+  --frame-badge-root-radius: var(--frame-radius-sm);
   --frame-badge-root-font-size: 0.75rem;
   --frame-badge-root-font-weight: 600;
   --frame-badge-root-bg: var(--frame-primary);
   --frame-badge-root-color: var(--frame-primary-foreground);
-  --frame-badge-success-bg: color-mix(in srgb, #16a34a 16%, var(--frame-surface));
-  --frame-badge-success-border: color-mix(in srgb, #16a34a 32%, transparent);
-  --frame-badge-success-color: color-mix(in srgb, #16a34a 78%, var(--frame-foreground));
-  --frame-badge-root-padding-block: 0.1875rem;
-  --frame-badge-root-padding-inline: 0.625rem;
+  --frame-badge-success-bg: color-mix(in srgb, var(--frame-success) 16%, var(--frame-surface));
+  --frame-badge-success-border: color-mix(in srgb, var(--frame-success) 32%, transparent);
+  --frame-badge-success-color: color-mix(in srgb, var(--frame-success) 78%, var(--frame-foreground));
+  --frame-badge-root-padding-block: var(--frame-density-inline-padding-block);
+  --frame-badge-root-padding-inline: var(--frame-density-inline-padding-inline);
   --frame-badge-root-focus-shadow: none;
   --frame-badge-root-transition-duration: 150ms;
   --frame-badge-link-underline-offset: 0.1875rem;

package/breadcrumb/src/styles/_vars.css

@@ -1,8 +1,8 @@
-:root {
+:where(:root) {
   --frame-breadcrumb-root-color: var(--frame-muted-foreground);
   --frame-breadcrumb-root-font-size: 0.875rem;
   --frame-breadcrumb-root-line-height: 1.25rem;
-  --frame-breadcrumb-list-gap: 0.375rem;
+  --frame-breadcrumb-list-gap: var(--frame-density-gap-md);
   --frame-breadcrumb-link-radius: var(--frame-radius-sm);
   --frame-breadcrumb-link-color: var(--frame-muted-foreground);
   --frame-breadcrumb-link-hover-color: var(--frame-foreground);

package/button/src/styles/_vars.css

@@ -1,7 +1,7 @@
-:root {
-    --frame-button-root-gap: 0.5rem;
-    --frame-button-root-height: 2.25rem;
-    --frame-button-root-padding-x: 1rem;
+:where(:root) {
+    --frame-button-root-gap: var(--frame-density-gap-md);
+    --frame-button-root-height: var(--frame-density-control-height-md);
+    --frame-button-root-padding-x: var(--frame-density-control-padding-x-lg);
     --frame-button-root-radius: var(--frame-radius-md);
     --frame-button-root-shadow: var(--frame-shadow-sm);
     --frame-button-root-font-size: 0.875rem;
@@ -14,7 +14,7 @@
     --frame-button-root-disabled-shadow: none;
     --frame-button-loading-size: 1rem;
     --frame-button-loading-stroke: 2px;
-    --frame-button-loading-track: color-mix(in srgb, white 24%, transparent);
+    --frame-button-loading-track: color-mix(in srgb, currentColor 24%, transparent);
     --frame-button-icon-size: 1rem;
     --frame-button-label-weight: inherit;
 }

package/button/src/styles/button.css

@@ -5,12 +5,12 @@
 
 .frame-button {
   --frame-button-root-bg: var(--frame-primary);
-  --frame-button-root-border: color-mix(in srgb, var(--frame-primary) 84%, white);
+  --frame-button-root-border: color-mix(in srgb, var(--frame-primary) 84%, var(--frame-primary-foreground));
   --frame-button-root-color: var(--frame-primary-foreground);
-  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, black);
+  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, var(--frame-foreground));
   --frame-button-root-hover-border: var(--frame-button-root-border);
   --frame-button-root-hover-color: var(--frame-button-root-color);
-  --frame-button-root-active-bg: color-mix(in srgb, var(--frame-primary) 84%, black);
+  --frame-button-root-active-bg: color-mix(in srgb, var(--frame-primary) 84%, var(--frame-foreground));
   --frame-button-root-active-border: var(--frame-button-root-hover-border);
   --frame-button-root-active-color: var(--frame-button-root-hover-color);
   --frame-button-root-corner-color: color-mix(in srgb, var(--frame-primary-foreground) 88%, transparent);
@@ -34,10 +34,10 @@
   align-items: center;
   justify-content: center;
   gap: var(--frame-button-root-gap, 0.5rem);
-  border: 1px solid var(--frame-button-root-border);
-  border-radius: var(--frame-button-root-radius, var(--frame-radius-md));
-  background: var(--frame-button-root-bg);
-  /* box-shadow: var(--frame-button-root-shadow, var(--frame-shadow-sm)); */
+  border: 1px solid var(--frame-button-root-border);
+  border-radius: var(--frame-button-root-radius, var(--frame-radius-md));
+  background: var(--frame-button-root-bg);
+  box-shadow: var(--frame-button-root-shadow, var(--frame-shadow-sm));
   color: var(--frame-button-root-color);
   cursor: pointer;
   font: inherit;
@@ -102,7 +102,7 @@
   inline-size: var(--frame-spinner-size);
   block-size: var(--frame-spinner-size);
   border: var(--frame-spinner-stroke) solid var(--frame-spinner-track-color);
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   border-top-color: var(--frame-spinner-indicator-color);
   opacity: 0;
   pointer-events: none;
@@ -129,11 +129,11 @@
   transform: translateY(1px);
 }
 
-.frame-button:focus-visible {
-  outline: 1px solid var(--frame-button-root-ring-color, var(--frame-ring));
-  outline-offset: 2px;
-  box-shadow: none;
-}
+.frame-button:focus-visible {
+  outline: 1px solid var(--frame-button-root-ring-color, var(--frame-ring));
+  outline-offset: 2px;
+  box-shadow: var(--frame-button-root-focus-shadow, none);
+}
 
 .frame-button[data-loading]::after {
   animation: frame-button-spin 0.7s linear infinite;
@@ -163,12 +163,12 @@
 
 .frame-button:where(:disabled, [data-disabled]) {
   cursor: not-allowed;
-  opacity: var(--frame-button-root-disabled-opacity, 0.55);
-  filter: none;
-  transform: none;
-  transition: none;
-  /* box-shadow: var(--frame-button-root-disabled-shadow, none); */
-}
+  opacity: var(--frame-button-root-disabled-opacity, 0.55);
+  filter: none;
+  transform: none;
+  transition: none;
+  box-shadow: var(--frame-button-root-disabled-shadow, none);
+}
 
 .frame-button:where(:disabled, [data-disabled])::before {
   transition: none;
@@ -195,11 +195,11 @@
   --frame-button-root-hover-border: var(--frame-button-root-border);
   --frame-button-root-hover-color: var(--frame-button-root-color);
   --frame-button-root-active-bg: color-mix(in srgb, var(--frame-muted) 80%, transparent);
-  --frame-button-root-active-border: var(--frame-button-root-hover-border);
-  --frame-button-root-active-color: var(--frame-button-root-hover-color);
-  --frame-button-root-corner-color: var(--frame-frame-accent);
-  /* box-shadow: var(--frame-button-root-shadow, none); */
-}
+  --frame-button-root-active-border: var(--frame-button-root-hover-border);
+  --frame-button-root-active-color: var(--frame-button-root-hover-color);
+  --frame-button-root-corner-color: var(--frame-frame-accent);
+  --frame-button-root-shadow: none;
+}
 
 .frame-button[data-appearance='ghost']::before {
   opacity: 0;
@@ -211,44 +211,19 @@
 }
 
 .frame-button[data-size='sm'] {
-  --frame-button-root-height: 2rem;
+  --frame-button-root-height: var(--frame-density-control-height-sm);
   min-height: var(--frame-button-root-height);
   padding-inline: 0.75rem;
   font-size: 0.8125rem;
 }
 
 .frame-button[data-size='lg'] {
-  --frame-button-root-height: 2.75rem;
+  --frame-button-root-height: var(--frame-density-control-height-xl);
   min-height: var(--frame-button-root-height);
   padding-inline: 1.25rem;
   font-size: 0.9375rem;
 }
 
-.frame-button[data-radius='none'] {
-  --frame-button-root-radius: 0px;
-  border-radius: 0;
-}
-
-.frame-button[data-radius='sm'] {
-  --frame-button-root-radius: var(--frame-radius-sm);
-  border-radius: var(--frame-radius-sm);
-}
-
-.frame-button[data-radius='md'] {
-  --frame-button-root-radius: var(--frame-radius-md);
-  border-radius: var(--frame-radius-md);
-}
-
-.frame-button[data-radius='lg'] {
-  --frame-button-root-radius: var(--frame-radius-lg);
-  border-radius: var(--frame-radius-lg);
-}
-
-.frame-button[data-radius='full'] {
-  --frame-button-root-radius: var(--frame-radius-full);
-  border-radius: var(--frame-radius-full);
-}
-
 [frButtonLoading] {
   position: absolute;
   inset-block-start: 50%;

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

@@ -1,11 +1,13 @@
 .frame-button-group,
 [frButtonGroup],
 frame-button-group {
+  --frame-button-group-radius: var(--frame-button-root-radius, var(--frame-radius-md));
   position: relative;
   display: inline-flex;
   align-items: stretch;
   width: 100%;
   border: 1px solid var(--frame-frame-line-muted, var(--frame-border));
+  border-radius: var(--frame-button-group-radius);
   background: var(--frame-surface);
 }
 
@@ -74,18 +76,23 @@ frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-c
 .frame-button-group::before,
 [frButtonGroup]::before,
 frame-button-group::before {
+  --frame-button-group-corner-size: clamp(
+    0px,
+    calc((1px - var(--frame-button-group-radius, 0px)) * 9999),
+    var(--frame-frame-tick-size, 0.375rem)
+  );
   position: absolute;
   inset: 0;
   z-index: 2;
   background:
     linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      left top / var(--frame-frame-tick-size, 0.375rem) 1px no-repeat,
+      left top / var(--frame-button-group-corner-size) 1px no-repeat,
     linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      left top / 1px var(--frame-frame-tick-size, 0.375rem) no-repeat,
+      left top / 1px var(--frame-button-group-corner-size) no-repeat,
     linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      right bottom / var(--frame-frame-tick-size, 0.375rem) 1px no-repeat,
+      right bottom / var(--frame-button-group-corner-size) 1px no-repeat,
     linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      right bottom / 1px var(--frame-frame-tick-size, 0.375rem) no-repeat;
+      right bottom / 1px var(--frame-button-group-corner-size) no-repeat;
   content: "";
   pointer-events: none;
 }