SegmentedGroup: add SuperSelect and SuperSelectMultiple as yielded components

Author: pkj-web

packages/components/src/components/hds/segmented-group/index.gts

@@ -10,6 +10,8 @@ import HdsButton from '../button/index.gts';
 import HdsDropdown from '../dropdown/index.gts';
 import HdsFormSelectBase from '../form/select/base.gts';
 import HdsFormTextInputBase from '../form/text-input/base.gts';
+import HdsFormSuperSelectSingleBase from '../form/super-select/single/base.gts';
+import HdsFormSuperSelectMultipleBase from '../form/super-select/multiple/base.gts';
 import HdsYield from '../yield/index.gts';
 
 export interface HdsSegmentedGroupSignature {
@@ -20,6 +22,8 @@ export interface HdsSegmentedGroupSignature {
         Dropdown?: typeof HdsDropdown;
         Select?: typeof HdsFormSelectBase;
         TextInput?: typeof HdsFormTextInputBase;
+        SuperSelect?: typeof HdsFormSuperSelectSingleBase;
+        SuperSelectMultiple?: typeof HdsFormSuperSelectMultipleBase;
         Generic?: typeof HdsYield;
       },
     ];
@@ -36,6 +40,8 @@ const HdsSegmentedGroup: TemplateOnlyComponent<HdsSegmentedGroupSignature> =
           Dropdown=HdsDropdown
           Select=HdsFormSelectBase
           TextInput=HdsFormTextInputBase
+          SuperSelect=HdsFormSuperSelectSingleBase
+          SuperSelectMultiple=HdsFormSuperSelectMultipleBase
           Generic=HdsYield
         )
       }}

packages/components/src/styles/components/segmented-group.scss

@@ -13,7 +13,8 @@
   > .hds-button,
   > .hds-dropdown,
   > .hds-form-select,
-  > .hds-form-text-input {
+  > .hds-form-text-input,
+  > .hds-form-super-select {
     &:first-child:not(:only-child) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -22,7 +23,8 @@
       .hds-dropdown-toggle-button,
       .hds-dropdown-toggle-button::before,
       .hds-dropdown-toggle-icon,
-      .hds-dropdown-toggle-icon::before {
+      .hds-dropdown-toggle-icon::before,
+      .ember-power-select-trigger {
         border-top-right-radius: inherit;
         border-bottom-right-radius: inherit;
       }
@@ -37,7 +39,8 @@
       .hds-dropdown-toggle-button,
       .hds-dropdown-toggle-button::before,
       .hds-dropdown-toggle-icon,
-      .hds-dropdown-toggle-icon::before {
+      .hds-dropdown-toggle-icon::before,
+      .ember-power-select-trigger {
         border-top-left-radius: inherit;
         border-bottom-left-radius: inherit;
       }
@@ -51,15 +54,17 @@
       .hds-dropdown-toggle-button,
       .hds-dropdown-toggle-button::before,
       .hds-dropdown-toggle-icon,
-      .hds-dropdown-toggle-icon::before {
+      .hds-dropdown-toggle-icon::before,
+      .ember-power-select-trigger {
         border-radius: inherit;
       }
     }
 
     &:focus,
     &.mock-focus,
     .hds-dropdown-toggle-button:focus,
-    .hds-dropdown-toggle-icon:focus {
+    .hds-dropdown-toggle-icon:focus,
+    .ember-power-select-trigger:focus {
       z-index: 1;
     }
   }