OZG-7474 OPT focus-visible styles, OPT action buttons

alfa-client/libs/design-system/src/lib/button/button.component.ts

@@ -36,11 +36,11 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'bg-primary text-whitetext shadow-md hover:enabled:bg-primary-hover',
+        primary: 'bg-primary text-whitetext shadow-md hover:enabled:bg-primary-hover focus-visible:bg-primary-hover',
         outline:
-          'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:border-background-200',
+          'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:bg-ghost-hover focus-visible:border-background-200',
         ghost:
-          'border-2 border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 font-semibold',
+          'border border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 focus-visible:bg-ghost-hover font-semibold [&]:focus-visible:outline-offset-1',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',

alfa-client/libs/design-system/src/lib/link/link.component.ts

@@ -11,7 +11,7 @@ import { twMerge } from 'tailwind-merge';
     [href]="url"
     [class]="
       twMerge(
-        'hover:bg-ghost-hover block rounded border-2 border-transparent text-text focus:border-focus focus:outline-none dark:hover:bg-neutral-700',
+        'block rounded-lg border-2 border-transparent text-text hover:bg-ghost-hover focus-visible:border-focus focus-visible:bg-ghost-hover focus-visible:outline-none dark:hover:bg-neutral-700',
         class
       )
     "

alfa-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss

@@ -24,7 +24,7 @@
 @import 'variables';
 
 :host {
-  @apply flex h-12 w-full items-center justify-start pb-1 pl-4 pr-3 pt-1 sm:sticky;
+  @apply flex h-12 w-full items-center justify-start pb-1 pl-3 pr-3 pt-1 sm:sticky;
   top: $header-height;
   z-index: 2;
   box-shadow: $shadow-bottom;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.scss

-/**
- * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
-:host {
-  display: flex;
-  flex-grow: 1;
-  z-index: 1;
-
-  ::ng-deep {
-    a {
-      color: inherit;
-    }
-  }
-}

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.ts

@@ -21,13 +21,13 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'alfa-vorgang-detail-action-buttons',
   templateUrl: './vorgang-detail-action-buttons.component.html',
-  styleUrls: ['./vorgang-detail-action-buttons.component.scss'],
+  styles: [':host {@apply flex grow gap-0.5}'],
 })
 export class VorgangDetailActionButtonsComponent {
   @Input() vorgangWithEingang: VorgangWithEingangResource;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html

@@ -25,7 +25,7 @@
 -->
 <main *ngIf="vorgangStateResource$ | async as vorgangStateResource">
   <h1 class="sr-only">Details zum Vorgang</h1>
-  <ozgcloud-subnavigation class="mat-typography mat-app-background" data-test-id="subnavigation">
+  <ozgcloud-subnavigation class="flex gap-0.5 bg-background-100" data-test-id="subnavigation">
     <alfa-vorgang-detail-back-button-container></alfa-vorgang-detail-back-button-container>
     <ng-container *ngIf="vorgangStateResource.resource">
       <alfa-vorgang-detail-action-buttons
@@ -39,9 +39,7 @@
     </ng-container>
   </ozgcloud-subnavigation>
 
-  <div
-    class="l-scroll-area--full flex border-l border-r border-grayborder/30 dark:border-transparent"
-  >
+  <div class="l-scroll-area--full flex border-l border-r border-grayborder/30 dark:border-transparent">
     <alfa-vorgang-detail-area
       *ngIf="vorgangStateResource"
       [vorgangStateResource]="vorgangStateResource"
@@ -50,9 +48,5 @@
   </div>
 </main>
 
-<ozgcloud-progress-bar
-  [stateResource]="revokeCommandStateResource$ | async"
-></ozgcloud-progress-bar>
-<ozgcloud-spinner-transparency
-  [stateResource]="vorgangLoeschenCommandStateResource$ | async"
-></ozgcloud-spinner-transparency>
+<ozgcloud-progress-bar [stateResource]="revokeCommandStateResource$ | async"></ozgcloud-progress-bar>
+<ozgcloud-spinner-transparency [stateResource]="vorgangLoeschenCommandStateResource$ | async"></ozgcloud-spinner-transparency>