podcast-feed.html

<style>
  :host {
    display: block;
    border-top: 1px solid var(--border);
    position: relative;
    margin-bottom: 8px;
  }
  
  :host(.expanded) {
    margin-bottom: 24px;
  }

  :host(.expanded) .feed-meta {
    position: sticky;
    z-index: 99;
    top: 0;
  }

  .feed-meta .primary {
    display: flex;
    background: var(--shaded);
    font-family: var(--title-font);
    align-items: center;
  }
  
  [as="title"] {
    white-space: nowrap;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.3rem;
    padding: 8px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
  }
  
  @keyframes spinner {
    from { transform: rotateY(0) }
    to { transform: rotateY(3600deg) }
  }
  
  .load-spinner {
    display: none;
    animation: 5s spinner infinite ease-in-out alternate;
  }

  .play-latest {
    display: block;
  }
  
  :host(.loading) .load-spinner { display: block; }
  :host(.loading) .play-latest { display: none; }

  :host([data-unheard="0"]) .play-latest {
    display: none;
  }

  .counts {
    margin-right: 8px;
  }

  .primary :is(button, .icon) {
    background: transparent;
    padding: 4px 12px;
    color: inherit;
    font-size: 2rem;
    border: none;
    font-weight: normal;
    margin: 0 4px;
    line-height: 1;
    text-align: center;
  }
  
  .expando {
    transform-origin: center;
    transform: rotateX(180deg);
    transition: transform .4s ease;

    &[aria-pressed="true"] {
      transform: rotateX(0);
    }
  }
  
  .controls {
    display: flex;
    display: none;
    font-size: .8rem;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--background);
    margin-bottom: 12px;

    & button {
      background: transparent;
      border: 1px solid var(--foreground);
      border: none;
      text-transform: uppercase;
      padding: 4px;
      color: var(--foreground);
      font-size: inherit;
    }
  }
  
  [as="showMoreButton"] {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    font-family: var(--ui-font);
    background: transparent;
    border: none;
    color: var(--foreground);
    text-transform: uppercase;
    padding: 8px;
    text-align: center;
  }
  
  :host(:not(.expanded)) .controls { display: none; }
  :host(:not(.expanded)) .onlyExpanded { display: none; }
  :host(.searching) .notSearching { display: none; }

  .sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
  }
</style>
<div class="feed-meta">
  <div class="primary">
    <h2 as="title">Loading...</h2>
    <div class="load-spinner icon">&#9836;</div>
    <button
      aria-label="play latest"
      as="playLatest"
      class="play-latest"
    >
      &#8795;
    </button>
    <podcast-menu></podcast-menu>
  </div>
  <div as="controls" class="controls" role="navigation" aria-label="Feed admin">
    <button as="unsubscribeButton">
      Remove <span class="sr-only feed-name"></span>
    </button>
    <hr aria-hidden="true">
    <button as="renameButton">
      Rename <span class="sr-only feed-name"></span>
    </button>
    <hr aria-hidden="true">
    <button as="searchButton">
      Search <span class="sr-only feed-name"></span>
    </button>
    <hr aria-hidden="true">
    <button as="markHeardButton">
      Clear <span class="sr-only feed-name"></span>
    </button>
    <hr aria-hidden="true">
    <button as="refreshButton">
      Refresh <span class="sr-only feed-name"></span>
    </button>
  </div>
</div>
<div class="onlyExpanded" as="items">
  <h3 as="itemsHeader" class="sr-only" tabindex="-1">
    <span class="feed-name"></span>
    Episodes
  </h3>
  <div role="list">
    <slot></slot>
  </div>
</div>
<button class="notSearching onlyExpanded" as="showMoreButton">
  Show more...
</button>