fix(select): resolve parity issues

[makafsal]

Closes #17931 #18164

Resolved a few parity issues

Changelog

Changed

• Resolved the issue [Bug]: Select component ignores "selected" property on page load #18164
• Changed AI gradient to match the React version
• Changed AI button focus to match the React version

Testing / Reviewing

Verify issue #18164
Please see the acceptance criteria table here

1. Open select playground storybook
2. Inspect the select element using the browser dev tools and select any option by putting the selected attribute
3. Also, we can utilize the value prop from controls to give the value prop to the component
   This way we can verify all cases mentioned in the table.

Verify AI Label gradient

1. Open the with AI label sub-story from the select storybook
2. Then compare the gradient style with the corresponding React storybook

Verify AI button focus style

1. Open the with AI label sub-story from the select storybook
2. Then press the tab button and compare the focus border thickness with the corresponding React storybook

Note Also verify this style from the AI Label component storybook

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	02b01e4
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/679242e08e987d0009426803
😎 Deploy Preview	https://deploy-preview-18367--v11-carbon-web-components.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.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	02b01e4
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/679242e038560c0008c856d2
😎 Deploy Preview	https://deploy-preview-18367--carbon-elements.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.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	02b01e4
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/679242e045919e0008970484
😎 Deploy Preview	https://deploy-preview-18367--v11-carbon-react.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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.17%. Comparing base (02d6f94) to head (02b01e4).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18367   +/-   ##
=======================================
  Coverage   84.17%   84.17%           
=======================================
  Files         408      408           
  Lines       14435    14435           
  Branches     4690     4694    +4     
=======================================
  Hits        12150    12150           
  Misses       2120     2120           
  Partials      165      165           

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

[laurenmrice]

Hey @makafsal , this is looking good! Just had a couple of comments:

Default story

• There should be no helper text shown in the field in WC to match React.
• When the select menu is open, can we match the menu options to be exactly the same as the React one? It would be good to try to keep them the same.

• I do not see the decorator, noLabel, or slug props in WC but they are present in React. Just clarifying if that is intentional?
• I see onInput, placeholder, and value props in Web components but not in React. Also clarifying if that is intentional that they do not match between the two?
• When the prop inline is set to true and the prop disabled is set to true, there should be no background on the field, it should be transparent.
• There is a bug when the prop inline is set to true and the prop warn is set to true. The warning icon should be 8px to the left of the chevron icon. I do want to note that this scenario in React is currently really broken, which I am making a separate issue for. But I feel that we can address the WC spacing problem here in this PR.

Inline story

• There should be no helper text shown in the field in WC to match React.
• When the select menu is open, can we match the menu options to be exactly the same as the React one? It would be good to try to keep them the same.
• When the prop disabled is set to true, there should be no background on the field, it should be transparent.
• There is a slight bug when the prop inline is set to true and the prop warn is set to true. The warning icon should be 8px to the left of the chevron icon.

With AI Label

• There should be no helper text shown in the field in WC to match React.
• The input field is missing the vertical divider between the AI slug and the chevron icon. You can view the design specs here on our website.
• I do not see the decorator, noLabel, or slug props in WC but they are present in React. Just clarifying if that is intentional?
• I do see the onInput, placeholder, and value props in WC but not React. Also is this intentional?
• The WC AI explainability popover design isn’t matching the React one. I have documented the design specs in this image below.

---

*Note: I will be making a separate bug issue to tackle some unrelated visual bugs that were already in React.