Glass Dock

import { GlassDock, GlassDockItem, GlassDockSeparator } from 'ngx-vitreo';

@Component({
  imports: [GlassDock, GlassDockItem, GlassDockSeparator],
  // ...
})

<div
  style="container-type: inline-size; display: grid; align-content: end; justify-items: center; box-sizing: border-box; width: 100%; min-height: 220px; padding-block: 24px"
>
  <glass-dock
    aria-label="Dock"
    role="group"
    style="--lg-dock-size: clamp(32px, calc((100cqi - 32px) / 5), 52px); --lg-dock-gap: clamp(4px, 1.4cqi, 8px); --lg-dock-pad: clamp(6px, 1.4cqi, 10px)"
  >
    @for (app of apps; track app.label; let index = $index) {
      <button glassDockItem [active]="running().includes(app.label)" [label]="app.label" (click)="open(app.label)">
        <svg aria-hidden="true" viewBox="0 0 64 64">
          <defs>
            <linearGradient [attr.id]="gradient(index)" x2=".35" y2="1">
              <stop [attr.stop-color]="app.from" />
              <stop offset="1" [attr.stop-color]="app.to" />
            </linearGradient>
          </defs>
          <rect [attr.fill]="'url(#' + gradient(index) + ')'" height="64" rx="14" width="64" />
          <rect x=".5" y=".5" width="63" height="63" rx="13.5" fill="none" stroke="#fff" stroke-opacity=".2" />
          <path
            [attr.d]="app.path"
            fill="none"
            stroke="#fff"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2.6"
          />
        </svg>
      </button>
    }
  </glass-dock>
  <span role="status" style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%)">
    {{ message() }}
  </span>
</div>