Make skeleton widths caller-controlled and sized

TextSkeleton and HeadingSkeleton baked w-full into their shared base.
Under tailwind-variants/lite (no tailwind-merge) that collided with the
caller's width class and won by stylesheet order, so every skeleton
ignored its width: bars stretched full in column contexts and collapsed
in flex rows.

Drop w-full from the base so the single caller width applies, matching
ButtonSkeleton/AvatarSkeleton. Size the compliance-portal TopBar and
Hero skeleton bars to roughly match their English copy, and add a rule
so skeleton widths are revisited when en-US strings change.

Signed-off-by: Émile Ré <emile@probo.com>

packages/ui/src/v2/typography/HeadingSkeleton.tsx

@@ -20,7 +20,8 @@ import { headingSkeleton } from "./variants";
 export type HeadingSkeletonProps = Omit<ComponentProps<"span">, "children"> & VariantProps<typeof headingSkeleton>;
 
 // Loading placeholder paired with Heading: a pulse block matching a heading
-// line at the given size. Defaults to full width; constrain with a width class.
+// line at the given size. Supply a width class (e.g. w-80, or w-full for a full
+// line); with none the block collapses to its content.
 export function HeadingSkeleton(props: HeadingSkeletonProps) {
   const { size, className, ...rest } = props;
 

packages/ui/src/v2/typography/Text.stories.tsx

@@ -104,7 +104,7 @@ export const Skeleton: Story = {
   render: () => (
     <div className="flex w-96 flex-col gap-3">
       <TextSkeleton size={6} className="w-1/2" />
-      <TextSkeleton size={3} />
+      <TextSkeleton size={3} className="w-full" />
       <TextSkeleton size={3} className="w-2/3" />
     </div>
   ),

packages/ui/src/v2/typography/TextSkeleton.tsx

@@ -20,7 +20,8 @@ import { textSkeleton } from "./variants";
 export type TextSkeletonProps = Omit<ComponentProps<"span">, "children"> & VariantProps<typeof textSkeleton>;
 
 // Loading placeholder paired with Text: a pulse block matching a line of text
-// at the given size. Defaults to full width; constrain with a width class.
+// at the given size. Supply a width class (e.g. w-24, or w-full for a full
+// line); with none the block collapses to its content.
 export function TextSkeleton(props: TextSkeletonProps) {
   const { size, className, ...rest } = props;
 

packages/ui/src/v2/typography/variants.ts

@@ -97,7 +97,7 @@ export const heading = tv({
   },
 });
 
-const skeletonBase = "inline-block w-full animate-pulse select-none rounded-2 bg-sand-3 text-transparent";
+const skeletonBase = "inline-block animate-pulse select-none rounded-2 bg-sand-3 text-transparent";
 
 export const textSkeleton = tv({
   base: skeletonBase,