chromium/chrome/browser/resources/bluetooth_internals/characteristic_list_item.html

<style>
  :host {
    --brief-content-background-color: var(--dark-primary-color);
  }

  .info-container > h4,
  .info-container > object-field-set,
  .info-container > value-control {
    margin: 1em;
  }

  button.show-all-properties {
    background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;
    font: inherit;
    margin: 10px;
    min-height: 2em;
    min-width: 4em;
    outline: none;
    padding: 1px 10px;
    text-shadow: 0 1px 0 rgb(240, 240, 240);
    user-select: none;
  }

  button.show-all-properties:hover {
    background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    color: black;
  }

  button.show-all-properties:active {
    background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
    box-shadow: none;
    text-shadow: none;
  }

  button.show-all-properties:focus {
    border-color: rgb(77, 144, 254);
    outline: none;
    /* OVERRIDE */
    transition: border-color 200ms;
  }
</style>
<expandable-list-item>
  <div slot="brief-content">
    <div>Characteristic:</div>
    <div class="header-value"></div>
  </div>
  <div slot="expanded-content" class="info-container">
    <h4>Characteristic Info</h4>
    <object-field-set class="characteristics" show-all></object-field-set>
    <h4>Properties<button class="show-all-properties">Show All</button></h4>
    <object-field-set class="properties"></object-field-set>
    <h4>Value</h4>
    <value-control hidden></value-control>
    <h4>Descriptors</h4>
    <descriptor-list></descriptor-list>
  </div>
</expandable-list-item>