docs(aria/combobox): dev app ui changes

Author: wagnermaciel

src/components-examples/aria/combobox/combobox-auto-select/combobox-auto-select-example.ts

@@ -62,7 +62,7 @@ export class ComboboxAutoSelectExample {
 
     if (comboboxRect) {
       popoverEl.style.width = `${comboboxRect.width}px`;
-      popoverEl.style.top = `${comboboxRect.bottom}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
       popoverEl.style.left = `${comboboxRect.left - 1}px`;
     }
 

src/components-examples/aria/combobox/combobox-examples.css

@@ -2,22 +2,25 @@
   position: relative;
   width: 300px;
   display: flex;
-  overflow: hidden;
   flex-direction: column;
   border: 1px solid var(--mat-sys-outline);
   border-radius: var(--mat-sys-corner-extra-small);
 }
 
-.example-combobox-container:has(.example-combobox-input[aria-expanded='true']) {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .example-combobox-input-container {
   display: flex;
-  overflow: hidden;
   position: relative;
   align-items: center;
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-combobox-input {
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-combobox-container:focus-within .example-combobox-input {
+  outline: 1.5px solid var(--mat-sys-primary);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mat-sys-primary) 25%, transparent);
 }
 
 .example-icon {
@@ -35,6 +38,18 @@
   opacity: 0.8;
 }
 
+.example-arrow-icon {
+  padding: 0 0.5rem;
+  position: absolute;
+  right: 0;
+  opacity: 0.8;
+  transition: transform 0.2s ease;
+}
+
+.example-combobox-input[aria-expanded='true'] + .example-arrow-icon {
+  transform: rotate(180deg);
+}
+
 .example-combobox-input {
   width: 100%;
   border: none;
@@ -48,8 +63,7 @@
   margin: 0;
   padding: 0;
   border: 1px solid var(--mat-sys-outline);
-  border-bottom-right-radius: var(--mat-sys-corner-extra-small);
-  border-bottom-left-radius: var(--mat-sys-corner-extra-small);
+  border-radius: var(--mat-sys-corner-extra-small);
   background-color: var(--mat-sys-surface);
 }
 

src/components-examples/aria/combobox/combobox-highlight/combobox-highlight-example.ts

@@ -71,7 +71,7 @@ export class ComboboxHighlightExample {
 
     if (comboboxRect) {
       popoverEl.style.width = `${comboboxRect.width}px`;
-      popoverEl.style.top = `${comboboxRect.bottom}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
       popoverEl.style.left = `${comboboxRect.left - 1}px`;
     }
 

src/components-examples/aria/combobox/combobox-manual/combobox-manual-example.ts

@@ -71,7 +71,7 @@ export class ComboboxManualExample {
 
     if (comboboxRect) {
       popoverEl.style.width = `${comboboxRect.width}px`;
-      popoverEl.style.top = `${comboboxRect.bottom}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
       popoverEl.style.left = `${comboboxRect.left - 1}px`;
     }
 

src/components-examples/aria/combobox/combobox-tree-auto-select/combobox-tree-auto-select-example.ts

@@ -97,7 +97,7 @@ export class ComboboxTreeAutoSelectExample {
 
     if (comboboxRect) {
       popoverEl.style.width = `${comboboxRect.width}px`;
-      popoverEl.style.top = `${comboboxRect.bottom}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
       popoverEl.style.left = `${comboboxRect.left - 1}px`;
     }
 

src/components-examples/aria/combobox/combobox-tree-highlight/combobox-tree-highlight-example.ts

@@ -97,7 +97,7 @@ export class ComboboxTreeHighlightExample {
 
     if (comboboxRect) {
       popoverEl.style.width = `${comboboxRect.width}px`;
-      popoverEl.style.top = `${comboboxRect.bottom}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
       popoverEl.style.left = `${comboboxRect.left - 1}px`;
     }
 

src/components-examples/aria/combobox/combobox-tree-manual/combobox-tree-manual-example.ts

@@ -97,7 +97,7 @@ export class ComboboxTreeManualExample {
 
     if (comboboxRect) {
       popoverEl.style.width = `${comboboxRect.width}px`;
-      popoverEl.style.top = `${comboboxRect.bottom}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
       popoverEl.style.left = `${comboboxRect.left - 1}px`;
     }