fix(cibg): datablock row separators + filled Bestand-upload button

- Datablock entries had no separators: CIBG ships the border on dt/dd with a
  :last-of-type reset, but the one-row-per-<div> grouping (for axe) made every
  dt/dd a last-of-type, stripping them all. Carry the separator on the row
  (:host:not(:last-of-type)) in the CIBG line colour (#f1f5f9 = cool-grey-200).
- Upload "Bestand toevoegen" button read as a pale outline: btn-outline-primary
  forced a transparent background over .btn-upload's accent fill. Use
  btn-primary btn-upload (solid #01689b, white text, folder glyph) and drop the
  redundant centred background-image folder.

GREEN: lint, tokens, 183 tests, build, 137 axe stories. Verified via Storybook
screenshots (datablock separators, filled blue upload button).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-03 08:46:06 +02:00
parent 05314afd98
commit 0f360c5939
3 changed files with 481 additions and 473 deletions

View File

@@ -26,7 +26,9 @@ const TYPE_LABELS: Record<string, string> = {
.file-picker-drop-area { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rhc-space-max-sm); }
/* Default (not subtle) foreground: subtle grey on the grey drop-area fails WCAG AA contrast. */
.upload-instructions { margin: 0; color: var(--rhc-color-foreground-default); font-size: var(--rhc-text-font-size-sm); }
.btn-upload { cursor: pointer; }
/* Solid CIBG-blue button; the .btn-upload ::before folder glyph is the icon, so
drop its redundant centred background-image folder. */
.btn-upload { cursor: pointer; background-image: none; }
.btn-upload.disabled { cursor: not-allowed; }
/* The input is visually hidden but still focusable; surface its focus on the button. */
input:focus-visible + .btn-upload { outline: var(--rhc-border-width-md) solid var(--rhc-color-foreground-link); outline-offset: 2px; }
@@ -48,7 +50,7 @@ const TYPE_LABELS: Record<string, string> = {
[multiple]="multiple()"
[disabled]="disabled()"
(change)="onChange($event)" />
<label class="btn btn-outline-primary btn-upload" [class.disabled]="disabled()" [attr.for]="inputId()">
<label class="btn btn-primary btn-upload" [class.disabled]="disabled()" [attr.for]="inputId()">
{{ buttonText() }}
</label>
</div>