import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as e,o as a}from"./app-h9l50wZ_.js";const n={};function l(r,s){return a(),t("div",null,s[0]||(s[0]=[e(`

OsButton Status

Status-Tracking der OsButton-Komponente

Übersicht

Aspekt	Status
Implementierung	Basis implementiert
CVA-Integration	Vollständig
Tests	9 Tests vorhanden
Storybook	Ausstehend
A11y	Teilweise

Implementierte Features

Props

Prop	Typ	Default	Status	Notizen
`variant`	`'primary' \| 'secondary' \| 'danger' \| 'warning' \| 'success' \| 'info' \| 'ghost' \| 'outline'`	`'primary'`	Implementiert	8 Varianten via CVA
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Implementiert	5 Größen via CVA
`fullWidth`	`boolean`	`false`	Implementiert
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Implementiert
`disabled`	`boolean`	`false`	Implementiert
`class`	`string`	`''`	Implementiert	Via cn() gemerged

Slots

Slot	Status	Notizen
`default`	Implementiert	Button-Content

Events

Event	Status	Notizen
Native Events	Implementiert	click, focus, etc. werden durchgereicht

Fehlende Features (aus KATALOG.md)

Hohe Priorität

Feature	Beschreibung	Aufwand
`icon`	Icon-Name/Komponente einbinden	Mittel - erfordert OsIcon
`iconPosition`	`'left' \| 'right'`	Klein - nach Icon-Support
`loading`	Ladezustand mit Spinner	Mittel - erfordert OsSpinner

Mittlere Priorität

Feature	Beschreibung	Aufwand
`to`	Vue Router Link-Support	Mittel - erfordert router-link/NuxtLink
`href`	Externer Link-Support	Klein - `<a>` statt `<button>`
`circle`	Runder Button	Klein - CVA-Variant hinzufügen

Niedrige Priorität

Feature	Beschreibung	Aufwand
`filled` vs `ghost`	Explizite Unterscheidung	Diskussion nötig - aktuell via `variant`

Nicht geplant

Feature	Begründung
`bullet`	Zu spezifisch, kann mit `circle` + custom size erreicht werden
`hover` prop	CSS :hover reicht
`padding` prop	Sollte über size geregelt werden

Vergleich: Aktuell vs. Zielzustand

KATALOG.md Vorschlag (OsButtonProps)

interface OsButtonProps {
  // Variante
  variant?: 'default' | 'primary' | 'secondary' | 'danger'
  filled?: boolean
  ghost?: boolean

  // Größe & Form
  size?: 'tiny' | 'small' | 'base' | 'large'
  circle?: boolean
  fullWidth?: boolean

  // Icon
  icon?: string
  iconPosition?: 'left' | 'right'

  // Zustände
  loading?: boolean
  disabled?: boolean

  // Link-Support
  to?: string | RouteLocationRaw
  href?: string

  // Button-Typ
  type?: 'button' | 'submit'
}

Aktuelle Implementierung

interface OsButtonProps {
  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'ghost' | 'outline'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  fullWidth?: boolean
  type?: 'button' \\| 'submit' \\| 'reset'
  disabled?: boolean
  class?: string
}

Unterschiede

Aspekt	KATALOG.md	Implementiert	Kommentar
Varianten	4 + filled/ghost Modifikatoren	8 eigenständige	Besser: Mehr Varianten ohne Modifikatoren
Sizes	tiny, small, base, large	xs, sm, md, lg, xl	Besser: 5 statt 4, Standard-Naming
Icon-Support	icon, iconPosition	-	Fehlt: erfordert OsIcon
Loading	loading	-	Fehlt: erfordert OsSpinner
Link-Support	to, href	-	Fehlt: Router-Integration
Circle	circle	-	Fehlt: einfach hinzuzufügen

Test-Coverage

Datei: OsButton.spec.ts

Test	Beschreibung
renders slot content	Slot-Inhalt wird gerendert
applies default variant classes	Primary-Variante als Default
applies size variant classes	Size-Classes korrekt
applies variant classes	Varianten-Classes korrekt
applies fullWidth class	w-full wird gesetzt
merges custom classes	Custom Classes werden via cn() gemerged
sets disabled attribute	disabled-Attribut wird gesetzt
sets button type	type-Attribut wird gesetzt
emits click event	Click-Event wird emittiert

Fehlende Tests

[ ] Alle 8 Varianten testen
[ ] Alle 5 Sizes testen
[ ] Keyboard-Navigation (Enter, Space)
[ ] Focus-States
[ ] Disabled-State verhindert Click

Architektur

Datei-Struktur

src/components/OsButton/
├── OsButton.vue          # Hauptkomponente
├── OsButton.spec.ts      # Tests
├── button.variants.ts    # CVA-Varianten-Definition
├── index.ts              # Exports
└── STATUS.md             # Diese Datei

CVA-Pattern

Die Komponente nutzt das CVA-Pattern (Class Variance Authority):

button.variants.ts - Definiert alle Varianten als Type-Safe Funktion
OsButton.vue - Nutzt buttonVariants() + cn() für finale Klassen
Export - Varianten-Funktion + Typen werden exportiert für Composability

CSS-Variablen

Die Komponente nutzt CSS Custom Properties für Theming:

--color-primary
--color-primary-contrast
--color-primary-hover
--color-secondary (etc.)
--color-danger (etc.)
--color-warning (etc.)
--color-success (etc.)
--color-info (etc.)

Nächste Schritte

Phase 1: Icon-Support (erfordert OsIcon)

OsIcon-Komponente erstellen
icon Prop hinzufügen (string für Icon-Name oder Komponente)
iconPosition Prop hinzufügen ('left' | 'right')
Layout für Icon + Text anpassen

Phase 2: Loading-State (erfordert OsSpinner)

OsSpinner-Komponente erstellen
loading Prop hinzufügen
Bei loading: Spinner anzeigen, Button disabled

Phase 3: Link-Support

to Prop für Vue Router Links
href Prop für externe Links
Dynamisches Element: <button> | <router-link> | <a>

Phase 4: Circle-Variant

circle Prop hinzufügen
CVA-Variant für runden Button

Abhängigkeiten

OsButton
├── Benötigt: cn() utility  Vorhanden
├── Benötigt: CVA           Vorhanden
├── Für Icon: OsIcon        Ausstehend (Tier 1)
├── Für Loading: OsSpinner  Ausstehend (Tier 1)
└── Für Link: Vue Router    Optional (nur für SPA-Links)

Changelog

Datum	Änderung
2026-02-07	Status-Datei erstellt
2026-02-07	CVA-Integration abgeschlossen
2026-02-07	8 Varianten, 5 Sizes implementiert
2026-02-07	9 Tests vorhanden

`,63)]))}const p=i(n,[["render",l],["__file","STATUS.html.vue"]]),o=JSON.parse('{"path":"/packages/ui/src/components/OsButton/STATUS.html","title":"OsButton Status","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Übersicht","slug":"ubersicht","link":"#ubersicht","children":[]},{"level":2,"title":"Implementierte Features","slug":"implementierte-features","link":"#implementierte-features","children":[{"level":3,"title":"Props","slug":"props","link":"#props","children":[]},{"level":3,"title":"Slots","slug":"slots","link":"#slots","children":[]},{"level":3,"title":"Events","slug":"events","link":"#events","children":[]}]},{"level":2,"title":"Fehlende Features (aus KATALOG.md)","slug":"fehlende-features-aus-katalog-md","link":"#fehlende-features-aus-katalog-md","children":[{"level":3,"title":"Hohe Priorität","slug":"hohe-prioritat","link":"#hohe-prioritat","children":[]},{"level":3,"title":"Mittlere Priorität","slug":"mittlere-prioritat","link":"#mittlere-prioritat","children":[]},{"level":3,"title":"Niedrige Priorität","slug":"niedrige-prioritat","link":"#niedrige-prioritat","children":[]},{"level":3,"title":"Nicht geplant","slug":"nicht-geplant","link":"#nicht-geplant","children":[]}]},{"level":2,"title":"Vergleich: Aktuell vs. Zielzustand","slug":"vergleich-aktuell-vs-zielzustand","link":"#vergleich-aktuell-vs-zielzustand","children":[{"level":3,"title":"KATALOG.md Vorschlag (OsButtonProps)","slug":"katalog-md-vorschlag-osbuttonprops","link":"#katalog-md-vorschlag-osbuttonprops","children":[]},{"level":3,"title":"Aktuelle Implementierung","slug":"aktuelle-implementierung","link":"#aktuelle-implementierung","children":[]},{"level":3,"title":"Unterschiede","slug":"unterschiede","link":"#unterschiede","children":[]}]},{"level":2,"title":"Test-Coverage","slug":"test-coverage","link":"#test-coverage","children":[{"level":3,"title":"Fehlende Tests","slug":"fehlende-tests","link":"#fehlende-tests","children":[]}]},{"level":2,"title":"Architektur","slug":"architektur","link":"#architektur","children":[{"level":3,"title":"Datei-Struktur","slug":"datei-struktur","link":"#datei-struktur","children":[]},{"level":3,"title":"CVA-Pattern","slug":"cva-pattern","link":"#cva-pattern","children":[]},{"level":3,"title":"CSS-Variablen","slug":"css-variablen","link":"#css-variablen","children":[]}]},{"level":2,"title":"Nächste Schritte","slug":"nachste-schritte","link":"#nachste-schritte","children":[{"level":3,"title":"Phase 1: Icon-Support (erfordert OsIcon)","slug":"phase-1-icon-support-erfordert-osicon","link":"#phase-1-icon-support-erfordert-osicon","children":[]},{"level":3,"title":"Phase 2: Loading-State (erfordert OsSpinner)","slug":"phase-2-loading-state-erfordert-osspinner","link":"#phase-2-loading-state-erfordert-osspinner","children":[]},{"level":3,"title":"Phase 3: Link-Support","slug":"phase-3-link-support","link":"#phase-3-link-support","children":[]},{"level":3,"title":"Phase 4: Circle-Variant","slug":"phase-4-circle-variant","link":"#phase-4-circle-variant","children":[]}]},{"level":2,"title":"Abhängigkeiten","slug":"abhangigkeiten","link":"#abhangigkeiten","children":[]},{"level":2,"title":"Changelog","slug":"changelog","link":"#changelog","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.25,"words":676},"filePathRelative":"packages/ui/src/components/OsButton/STATUS.md","localizedDate":"April 5, 2026","excerpt":"\\n

\\n
Status-Tracking der OsButton-Komponente
\\n

\\n

Übersicht

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

Aspekt	Status
Implementierung	Basis implementiert
CVA-Integration	Vollständig
Tests	9 Tests vorhanden
Storybook	Ausstehend
A11y	Teilweise

"}');export{p as comp,o as data};