chore(select-rich): docs for single-option and fix review comments

packages/select-rich/src/LionSelectInvoker.js

@@ -43,7 +43,7 @@ export class LionSelectInvoker extends LionButton {
       singleOption: {
         type: Boolean,
         reflect: true,
-        attribute: 'singleOption',
+        attribute: 'single-option',
       },
     };
   }
@@ -99,7 +99,11 @@ export class LionSelectInvoker extends LionButton {
   // eslint-disable-next-line class-methods-use-this
   _afterTemplate() {
     return html`
-      <slot name="after"></slot>
+      ${!this.singleOption
+        ? html`
+            <slot name="after"></slot>
+          `
+        : ''}
     `;
   }
 }

packages/select-rich/src/LionSelectRich.js

@@ -219,10 +219,6 @@ export class LionSelectRich extends ScopedElementsMixin(
 
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
-    if (this._listboxNode.childElementCount === 1) {
-      this.singleOption = true;
-      this._invokerNode.singleOption = true;
-    }
 
     this._overlaySetupComplete.then(() => {
       this.__setupOverlay();
@@ -281,6 +277,11 @@ export class LionSelectRich extends ScopedElementsMixin(
   updated(changedProperties) {
     super.updated(changedProperties);
 
+    if (this.formElements.length === 1) {
+      this.singleOption = true;
+      this._invokerNode.singleOption = true;
+    }
+
     if (changedProperties.has('disabled')) {
       if (this.disabled) {
         this._invokerNode.makeRequestToBeDisabled();

packages/select-rich/stories/index.stories.mdx

@@ -506,6 +506,28 @@ Both methods work with the `Required` validator.
 > but subclassers can easily override this in their extension, by the overriding `_noSelectionTemplate()` method.
 
 
+### Single Option
+
+If there is a single option rendered, then `singleOption` property is set to `true` on `lion-select-rich` and invoker as well. Invoker also gets `single-option` which can be used to having desired templating and styling. As in here the arrow is not displayed for single option
+
+<Story name="Single Option">
+  {html`
+    <lion-select-rich label="Single Option" name="color">
+      <lion-options slot="input">
+        <lion-option .choiceValue=${'red'}>Red</lion-option>
+      </lion-options>
+    </lion-select-rich>
+  `}
+</Story>
+
+```html
+<lion-select-rich label="single option select" name="color">
+  <lion-options slot="input">
+    <lion-option .choiceValue=${'red'}>Red</lion-option>
+  </lion-options>
+</lion-select-rich>
+```
+
 
 ### Custom Invoker
 

packages/select-rich/test/lion-select-rich.test.js

@@ -285,7 +285,7 @@ describe('lion-select-rich', () => {
       `);
 
       expect(el.singleOption).to.be.true;
-      expect(el._invokerNode.hasAttribute('singleOption')).to.be.true;
+      expect(el._invokerNode.hasAttribute('single-option')).to.be.true;
     });
   });