feat(empty-state): new SHINE styles and Svelte Component

[mukunku]

Summary

This PR:

• Updates the empty state component according to the latest designs.
• Introduces a new EmptyState Svelte component
• Updates ExpandingInput to Svelte 5 syntax.
  • Turns out expanding input was slightly broken after my TextArea update. So thought I'd fix that in this PR.

How to Test

• Review the updated Stacks Docs page: https://deploy-preview-2100--stacks.netlify.app/product/components/empty-states/
• Check out the new EmptyState Svelte component: https://deploy-preview-2100--stacks-svelte.netlify.app/?path=/docs/components-emptystate--docs
• Confirm ExpandingInput works again: https://deploy-preview-2100--stacks-svelte.netlify.app/?path=/docs/components-expandinginput--docs

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ca500c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	6ca500c
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/695c18d2eb79fa000843c01a
😎 Deploy Preview	https://deploy-preview-2100--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	6ca500c
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/695c18d25bc6ff00082224ae
😎 Deploy Preview	https://deploy-preview-2100--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[dancormier]

Thanks for building this out @mukunku. I have a few suggestions to tidy things up and reinforce a bit more consistency across the component/library. Nothing too out there. Let me know if anything could use clarification

[dancormier]

Since heading levels are dependent on context, maybe it would make sense to do one of the following:

• Add a prop to the EmptyState component for titleTag or titleHeadingLevel
• Provide a EmptyStateTitle component that renders using a svelte:element tag. It could provide a prop of headingLevel or tag (with a default value)

I'm probably leaning towards the first solution but I could be swayed. If we go with either, we can limit the potential tags by typing the prop "h2" | "h3" | ….

What do you think @mukunku?

[mukunku]

That's a good idea 👍🏾 I went with allowing any tag the user wants for the most flexibility: b4fb2ae

[dancormier]

Great work @mukunku ❤️