docs: input button group search example & description improvements

components/composition/InputButtonGroup/InputButtonGroup.stories.ts

@@ -3,6 +3,14 @@ import { html } from 'lit';
 
 export default {
   component: 'diamond-input-button-group',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'This composition allows for an input control to be paired with a button, handling scaling and alignment of both elements.',
+      },
+    },
+  },
 };
 
 export const InputButtonGroup: StoryObj = {
@@ -25,8 +33,7 @@ export const InputButtonGroup: StoryObj = {
 InputButtonGroup.parameters = {
   docs: {
     description: {
-      story: `A composition of an input and a button, styled to look
-      like a single component.`,
+      story: `A composition of an input and a button.`,
     },
   },
 };
@@ -69,3 +76,19 @@ InputButtonGroupSelect.parameters = {
     },
   },
 };
+
+export const InputButtonGroupSearch: StoryObj = {
+  render: () => html`
+    <diamond-input-button-group>
+        <diamond-input>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+            <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
+          </svg>
+          <input value="" placeholder="Search..." />
+        </diamond-input>
+      <diamond-button>
+        <button type="button">Submit</button>
+      </diamond-button>
+    </diamond-input-button-group>
+  `,
+};