feat: added href to card

[BF150]

No description provided.

[github-actions]

🚀 MCP preview deployed to Vercel: https://kolibri-9apzfh4rm-public-ui-kolibri-mcp.vercel.app

[github-actions]

Netlify Draft Deployment
URL: https://6a7c3a34ba017747a123265b--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/projects/kolibri-public-ui/deploys/6a7c3a34ba017747a123265b

[github-actions]

🚀 Preview deployed to GitHub Pages: https://public-ui.github.io/kolibri/pr-10660/f7dc851/
Commit: f7dc851

[github-actions]

📸 Visual Test Reports

Theme	Report
theme-bwst	Open report
theme-default	Open report
theme-desy	Open report
theme-ecl	Open report
theme-kern	Open report
test-tag-name-transformer	Open report

Run: https://github.com/public-ui/kolibri/actions/runs/31581991199

[BF150]

@deleonio Ich bekomme die Click/Focus Decorator nicht zum laufen. Können wir da heute mal zusammen drauf schauen?

[deleonio]

Hi @BF150 👋
Hier die Erkenntnisse zum PR — vorab direkt zu deiner Frage:

Warum die Click/Focus-Decoratoren nicht laufen 🔴

In shadow.tsx fehlt @Element() host. Die delegateFocus/delegateClick-Decoratoren lesen this.host und brechen stillschweigend ab, wenn es nicht existiert (element-interaction.ts: const host = self['host']; if (!host) return;). Die innere kol-card-wc mit @directFocus würde funktionieren, aber die öffentliche API kol-card.focus() / .click() ist aktuell ein No-Op.

Fix in shadow.tsx:

export class KolCard implements CardProps, ClickableElement, FocusableElement {
	@Element() protected readonly host?: HTMLKolCardElement; // ← ergänzen
	protected readonly ctaRef = createCtaRef<HTMLKolCardWcElement>();

Vergleich: link/shadow.tsx:39 macht genau das.

validateHref({ required: true }) vs. optionaler Prop 🟠

_href ist optional deklariert (_href?:) und im Render per this._href && … bedingt — Karten ohne Link sind der Normalfall. Trotzdem wird mit required: true validiert. watchValidator loggt dann bei jeder nicht-verlinkten Karte eine Dev-Warnung. Codebaseweit gibt es diese Kombi (optional + required) sonst nicht.

Fix: required: true weglassen → validateHref(this, value) (analog tree-item).

Vor Merge klären 🟡

1. Stretched-Link überdeckt Slot & Close-Button:
.kol-card__link::after { inset: 0 } legt sich als klickbare Fläche über die ganze Karte. Da der <a> nur das Heading umschließt, werden interaktive Slott-Elemente (Links/Buttons vom Konsumenten) und der Close-Button (_hasCloser=true) blockiert. → Verlinkte Karte + Closer ist derzeit funktional kaputt. Entweder dokumentieren ("verlinkte Karte ohne weitere Interaktionen") oder die pointer-events-Architektur überdenken (interaktive Kinder brauchen eigenen Stacking-Kontext).

2. ECL bricht das Konzept:
ecl-ec/mixins/card.scss setzt __link::after { display: none } → bei ECL ist nur das Heading klickbar, nicht die ganze Karte. Inkonsistent zu den anderen Themes. Bewusst? Dann bitte dokumentieren.

3. KolFocusOptions-Import prüfen:
Du nutzt KolFocusOptions in focus(), aber im Diff-Import-Block taucht es nicht auf. Konvention ist Named-Import aus '../../schema' (vgl. button/component.tsx:21). Falls es wirklich fehlt → TS-Fehler; am Code gegenprüfen.

Minor / Cleanup ⚪

• desy/src/mixins/alert.scss ist nur eine Stylelint-Property-Neusortierung und hat nichts mit dem Feature zu tun → besser in einen separaten Commit auslagern.
• linked.tsx: kopierter Kommentar "Ensure the popover is closed on initial render" stammt noch aus dem Popover-Sample — für die Karte falsch, bitte anpassen.
• Optional: ein onClick-Callback in KoliBriCardEventCallbacks für SPA-Routing-Konsumenten (native Anker-Navigation funktioniert aber ohnehin).

Was super ist ✅

• Direct/Delegate-Split korrekt gewählt (analog link/button/select).
• Focus-Ring über ::after { @include focus-outline } = saubere, ganzflächige Indikation.
• Vollständige Abdeckung: Schema, beide Komponenten-Dateien, Tests, Sample, alle Themes.

Sag Bescheid, wenn wir beim host-Fix gemeinsam drüberschauen wollen — das war der eigentliche Stolperstein. 🙂

[BF150]

Funktional stimmt jetzt alles.

zu 1. -> Für das Thema mit dem Close Button habe ich ein Ticket angelegt: #10672
zu 2. -> ECL hat laut Styleguide nur einen klickbare Headline, deswegen so umgesetzt.
"3. KolFocusOptions-Import prüfen:
Du nutzt KolFocusOptions in focus(), aber im Diff-Import-Block taucht es nicht auf. Konvention ist Named-Import aus '../../schema' (vgl. button/component.tsx:21). Falls es wirklich fehlt → TS-Fehler; am Code gegenprüfen." -> Was meint er damit?

Desy alert.scss war tatsächlich der Linter. Würde ich jetzt so lassen.