chore: variable added for listbox max-height

Author: ArathyKumar

elements/pf-search-input/docs/pf-search-input.md

@@ -77,17 +77,16 @@ Listbox options use the [APG's Roving tabindex](https://www.w3.org/WAI/ARIA/apg/
 
 {% endband %}
 
-
-
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
+{% renderSlots for="pf-search-input", header="Slots on `pf-search-input`" %}{% endrenderSlots %}
+{% renderAttributes for="pf-search-input", header="Attributes on `pf-search-input`" %}{% endrenderAttributes %}
+{% renderMethods for="pf-search-input", header="Methods on `pf-search-input`" %}{% endrenderMethods %}
+{% renderEvents for="pf-search-input", header="Events on `pf-search-input`" %}{% endrenderEvents %}
+{% renderCssCustomProperties for="pf-search-input", header="CSS Custom Properties on `pf-search-input`" %}{% endrenderCssCustomProperties %}
+{% renderCssParts for="pf-search-input", header="CSS Parts on `pf-search-input`" %}{% endrenderCssParts %}
+
+{% renderSlots for="pf-option", header="Slots on `pf-option`" %}{% endrenderSlots %}
+{% renderAttributes for="pf-option", header="Attributes on `pf-option`" %}{% endrenderAttributes %}
+{% renderMethods for="pf-option", header="Methods on `pf-option`" %}{% endrenderMethods %}
+{% renderEvents for="pf-option", header="Events on `pf-option`" %}{% endrenderEvents %}
+{% renderCssCustomProperties for="pf-option", header="CSS Custom Properties on `pf-option`" %}{% endrenderCssCustomProperties %}
+{% renderCssParts for="pf-option", header="CSS Parts on `pf-option`" %}{% endrenderCssParts %}

elements/pf-search-input/pf-search-input.css

@@ -68,19 +68,15 @@
 	--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
 	--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-
-	/* --pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
-	--pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
-	--pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); */
+	--pf-c-search-input__menu-content--MaxHeight: 20rem;
 }
 
 :host,
 #outer {
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	width: fit-content;
+	width: 100%;
 }
 
 :host([hidden]),
@@ -113,7 +109,7 @@
 #outer.expanded #listbox-container {
 	opacity: 1;
 	z-index: 9999 !important;
-	max-height: 300px;
+	max-height: var(--pf-c-search-input__menu-content--MaxHeight, 20rem);
 	overflow: hidden;
 }
 
@@ -158,10 +154,9 @@
 	color: var(--pf-global--Color--dark-200, #6a6e73) !important;
 	background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	caret-color: transparent;
 }
 
-
-/* #toggle-button, */
 #toggle-input {
 	background: transparent;
 	border: none;
@@ -172,7 +167,7 @@
 
 #toggle-input {
 	justify-content: space-between;
-	min-width: calc(100% - 33px);
+	width: 100%;
 	box-sizing: border-box;
 	height: 2.25rem;
 }
@@ -298,10 +293,10 @@ div.search-icon {
 
 		&::after {
 			content: '';
-			width: 2.25rem;
+			width: 36px;
 			height: var(--pf-global--spacer--xs, 0.125rem);
 			bottom: 0px;
-			left: -3px;
+			left: 0px;
 			background-color: var(--pf-theme--color--accent, #0066cc);
 			position: absolute;
 		}

elements/pf-search-input/pf-search-input.ts

@@ -100,6 +100,7 @@ export class PfSearchChangeEvent extends Event {
  * @cssprop [--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
  * @cssprop [--pf-c-search-input__toggle-button--Color=var(--pf-global--Color--100, #151515)]
  * @cssprop [--pf-c-search-input__list-item--m-loading--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-search-input__menu-content--MaxHeight=20rem;]
  **/
 @customElement('pf-search-input')
 export class PfSearchInput extends LitElement {
@@ -432,9 +433,8 @@ export class PfSearchInput extends LitElement {
 
   #setItemActive(item: PfOption, active: boolean) {
     item.active = active;
-    if (this.expanded) {
-      const activeOption = this.querySelector('pf-option[active]');
-      activeOption?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
+    if (this.expanded && active) {
+      item?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
     }
   }
 }