feat: Add skeleton component

[gethinwebster]

Description

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.42%. Comparing base (f2240cf) to head (da20589).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4512   +/-   ##
=======================================
  Coverage   97.42%   97.42%           
=======================================
  Files         936      939    +3     
  Lines       29626    29645   +19     
  Branches    10764    10771    +7     
=======================================
+ Hits        28864    28883   +19     
  Misses        755      755           
  Partials        7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jperals]

• Are both font size and line height necessary?
• Will this approach reliably give the box the desired size even if empty spaces are stripped out from the HTML output? This might not work if our code gets transformed from

<tag>
  <tag/>
</tag>

to

<tag><tag/></tag>

[gethinwebster]

Yes, both are needed to get the correct size. I've tested with spaces stripped and it seems to also work fine in that scenario.

[jperals]

OK. Looks like these rule pairs (font size and line height) should almost always go together across the system, plus there is some overlap between this code and the styles defined in src/internal/styles/typography/mixins.scss. What do you tink about moving them there and reuse them?

For example, in src/internal/styles/typography/mixins.scss:

// New mixin
@mixin text-body-s {
  font-size: awsui.$font-size-body-s;
  line-height: awsui.$line-height-body-s;
}

// New mixin
@mixin .text-body-m {
  font-size: awsui.$font-size-body-m;
  line-height: awsui.$line-height-body-m;
}

(...)

// Existing mixin, refactored
@mixin font-body-s {
  @include text-body-s;
  // Some of the existing mixins contain extra rules besides font size and line height
  letter-spacing: awsui.$letter-spacing-body-s;
}

// Existing mixin, refactored
@mixin font-body-m {
  @include text-body-m;
}

And in this new file:

.variant-text-body-s {
  @include text-body-s;
}

.variant-text-body-m {
  @include text-body-m;
}

(...)

[gethinwebster]

looking at font-size-body-s for example, there are more places where it's used without the lineheight than with, so I think there's not much to be gained from putting this into mixins