<div class="item-box" tabindex="0" (click)="OnExpand(!IsExpand)" (keydown.enter)="OnExpand(!IsExpand)" (keydown.space)="OnExpand(!IsExpand)">
    <ion-icon class="expand" [hidden]="IsExpand === true" name="chevron-down-outline"></ion-icon>
    <ion-icon class="expand" [hidden]="IsExpand !== true" name="chevron-up-outline"></ion-icon>
    <ng-content></ng-content>
</div>

./upp-select.scss

:host {
    .item-box {
        position: relative;
        margin: 0px 6px;

        ion-icon {
            font-size: 40px;
            position: absolute;
            top: 6px;
            right: 10px;
        }

        ::ng-deep ion-item {
            --border-style: none;
            --inner-padding-start: 10px;
        }
    }    

    .list-sep {
        position: absolute;
        width: 100%;
        z-index: 4;

        clear: both; 
        height: 40px; 
        background: linear-gradient(180deg, var(--ion-background-color) 30%, transparent 100%);

        transition: all ease-in .3s;
        top: 0px;
        visibility: hidden;

        &.visible {
            visibility: visible;
            top: calc(25vh - 10px);
        }
    }

    .list-box {
        position: absolute;
        height: 100vh;
        top: 0px;
        left: 10px;
        right: 10px;
        overflow: hidden;
        background: var(--ion-color-light);
        border-radius: 8px;
        z-index: 5;

        transition: all ease-in .3s;
        max-height: 0px;
        
        &.visible {
            max-height: 25vh;
        }

        .inner {
            height: 25vh;

            ion-list {
                margin: 0px !important;
                border-radius: 0px !important;
                background: transparent !important;
            }
    
            upp-scrollable {
                ::ng-deep .content {
                    background: transparent !important;
                }    
            }
        }
    }


    /*
    .options-box {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 10px;
        right: 10px;
        height: 100vh;

        background: var(--ion-color-light);
        border-radius: 8px;
        overflow: hidden;
        z-index: 5;

        .list-box {
            transition: all ease-in .3s;
    
            max-height: 0px;
            &.visible {
                max-height: 20vh;
            }
    
        }    
    }
    */
}