consul/ui/packages/consul-ui/app/components/disclosure-card/index.hbs

<CustomElement
  @element="disclosure-card"
  @description="Block level component with extra disclosable content"
  @attrs={{array
  }}
as |custom element|>
<Disclosure as |disclosure|>
  <disclosure-card
    {{did-insert custom.connect}}
    {{will-destroy custom.disconnect}}
    expanded={{disclosure.expanded}}
  >

      <custom.Template
        @styles={{css-map
          (require '/styles/base/icons/base-keyframes.css' from='/components/disclosure-card')
          (require '/styles/base/icons/icons/chevron-down/index.css' from='/components/disclosure-card')
          (require '/components/panel/index.css' from='/components/disclosure-card')
          (css "
            :host {
              display: block;
            }
            slot[name='action']::slotted(button) {
              display: block;
              cursor: pointer;
              width: 100%;

              background-color: rgb(var(--tone-gray-050));
              color: rgb(var(--tone-gray-800));
              padding-top: var(--padding-y);
              padding-bottom: var(--padding-y);
            }
            slot[name='action']::slotted(button)::after {
              transition-timing-function: linear;
              transition-duration: 300ms;
              transition-property: transform;
              --icon-name: icon-chevron-down;
              --icon-size: icon-000;
              content: '';
            }

            :host([expanded]) slot[name='action']::slotted(button)::after {
              transform: scaleY(-100%);
            }

            :host([expanded]) [style*='max-height'] {
              transition-duration: 50ms;
            }
            [style*='max-height'] {
              transition-timing-function: ease-out;
              transition-property: max-height;
              overflow: hidden;
            }
            .content {
              padding: var(--padding-y) var(--padding-x);
            }
          ")
        }}
      >
        <div part="base"
          class={{class-map
            "panel"
          }}
        >
          <div
            {{on-resize (dom-position (array
              (array 'height' 'max-height')
            ))}}
            class={{class-map
              'content'
            }}
          >
            <slot>
            </slot>
          </div>
          <hr
            class={{class-map
              'panel-separator'
            }}
          />
          <slot name="action">
          </slot>
        </div>
      </custom.Template>

      {{yield disclosure}}

  </disclosure-card>
</Disclosure>
</CustomElement>