refactor(segment): improves loading of the component and solves nested elemnts sizing issue

[amir-ba]

This PR attempts to address the issue raised here #2314:
As part of this PR the segment-button component is refactored to :

Use better lifecycle hooks to reduce the component render
Use default values for the segment IDs
Fallback to full-width option in the segment when calculating the child button width, when no getBoundingClientRect or width attribute exist for the segment child element. This issue will occur when the segment-button is rendered inside some other components <slot> element as it will be rendered but with display: none attribute, which will cause the component to break.

[netlify]

✅ Deploy Preview for marvelous-moxie-a6e2fe ready!

Name	Link
🔨 Latest commit	58aa972
🔍 Latest deploy log	https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/67110a5f98c78a00086209aa
😎 Deploy Preview	https://deploy-preview-2358--marvelous-moxie-a6e2fe.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 site configuration.