Fix segmnet-buttons with wrong width in nested slots

[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	bd71a12
🔍 Latest deploy log	https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/66c4abe03bcea90008f7312e
😎 Deploy Preview	https://deploy-preview-2338--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.