@auditcore/ui-core 0.3.0

package/styles/sampling.css

@@ -0,0 +1,31 @@
+
+/* Stichprobe – SamplingPanel (Vue) und FlowauditSampling (React). */
+.fa-sampling { display: flex; flex-direction: column; gap: var(--fa-space-4); font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); color: var(--fa-color-text); }
+.fa-sampling__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--fa-space-4); align-items: start; }
+.fa-sampling__card { display: flex; flex-direction: column; gap: var(--fa-space-3); padding: var(--fa-space-4); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius-lg); background: var(--fa-color-surface); box-shadow: var(--fa-shadow-sm); min-width: 0; }
+.fa-sampling__card--result { border-color: var(--fa-color-accent); grid-column: 1 / -1; }
+.fa-sampling__draw-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--fa-space-3); align-items: start; }
+.fa-sampling__heading { margin: 0; font-size: var(--fa-font-size-md); font-weight: 600; }
+.fa-sampling__form { display: flex; flex-direction: column; gap: var(--fa-space-3); }
+.fa-sampling__field { display: flex; flex-direction: column; gap: var(--fa-space-1); }
+.fa-sampling__label { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-sampling__input, .fa-sampling__select { min-height: 2.25rem; width: 100%; box-sizing: border-box; padding: 0 var(--fa-space-3); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); color: var(--fa-color-text); font: inherit; }
+.fa-sampling__input { text-align: end; font-variant-numeric: tabular-nums; }
+.fa-sampling__input--mono { font-family: var(--fa-font-mono); text-align: start; }
+.fa-sampling__input:focus-visible, .fa-sampling__select:focus-visible { outline: none; border-color: var(--fa-color-accent); box-shadow: var(--fa-focus-ring); }
+.fa-sampling__input-wrap { display: flex; align-items: center; gap: var(--fa-space-2); }
+.fa-sampling__unit { min-width: 1rem; color: var(--fa-color-text-muted); }
+.fa-sampling__field--error .fa-sampling__input, .fa-sampling__field--error .fa-sampling__select { border-color: var(--fa-color-danger); }
+.fa-sampling__error { margin: 0; font-size: var(--fa-font-size-xs); color: var(--fa-color-danger); }
+.fa-sampling__hint, .fa-sampling__muted { margin: 0; color: var(--fa-color-text-muted); font-size: var(--fa-font-size-xs); }
+.fa-sampling__actions { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); }
+.fa-sampling__profile p { margin: 0 0 var(--fa-space-2); }
+.fa-sampling__formula { font-family: var(--fa-font-mono); font-size: var(--fa-font-size-xs); }
+.fa-sampling__id { font-family: var(--fa-font-mono); font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-sampling__note { color: var(--fa-color-text-muted); }
+.fa-sampling__source code { display: block; margin-top: var(--fa-space-1); font-size: var(--fa-font-size-xs); overflow-wrap: anywhere; }
+.fa-sampling__size { margin: 0; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fa-color-accent); }
+.fa-sampling__warnings { margin: 0; padding: var(--fa-space-2) var(--fa-space-3) var(--fa-space-2) var(--fa-space-5); border-radius: var(--fa-radius); background: var(--fa-color-warning-soft); color: var(--fa-color-warning); }
+.fa-sampling__failure { margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border-radius: var(--fa-radius); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }
+.fa-sampling__selection { display: flex; flex-direction: column; gap: var(--fa-space-3); border-top: 1px solid var(--fa-color-border); padding-top: var(--fa-space-3); }
+.fa-sampling__seed { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); align-items: center; margin: 0; }

package/styles/screening.css

@@ -0,0 +1,86 @@
+/* Screening-Trefferprüfung – nur --fa-*-Designtoken (hell/dunkel aus tokens.css). */
+.fa-screening {
+  font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans);
+  color: var(--fa-color-text);
+  box-sizing: border-box;
+}
+.fa-screening *, .fa-screening *::before, .fa-screening *::after { box-sizing: inherit; }
+.fa-screening h2 { font-size: var(--fa-font-size-lg); margin: 0; }
+.fa-screening h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fa-space-2); flex-wrap: wrap; font-size: var(--fa-font-size-md); margin: 0 0 var(--fa-space-2); }
+.fa-screening__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fa-space-3); margin-bottom: var(--fa-space-3); flex-wrap: wrap; }
+.fa-screening__notice, .fa-screening__muted { color: var(--fa-color-text-muted); font-size: var(--fa-font-size-xs); }
+.fa-screening__notice { font-size: var(--fa-font-size-sm); }
+.fa-screening__layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: var(--fa-space-4); align-items: start; }
+.fa-screening__main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--fa-space-4); align-items: start; }
+.fa-screening__panel { background: var(--fa-color-surface); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); padding: var(--fa-space-3) var(--fa-space-4); margin-bottom: var(--fa-space-4); min-width: 0; box-shadow: var(--fa-shadow-sm); }
+.fa-screening__table { width: 100%; border-collapse: collapse; font-size: var(--fa-font-size-sm); }
+.fa-screening__table th, .fa-screening__table td { text-align: left; padding: var(--fa-space-1) var(--fa-space-2); border-bottom: 1px solid var(--fa-color-border); vertical-align: top; overflow-wrap: anywhere; }
+.fa-screening__table th { color: var(--fa-color-text-muted); font-weight: 600; }
+.fa-screening__table a { color: var(--fa-color-accent); }
+.fa-screening__btn { font: inherit; border: 1px solid var(--fa-color-border-strong); background: var(--fa-color-surface); color: var(--fa-color-text); border-radius: var(--fa-radius-sm); padding: var(--fa-space-1) var(--fa-space-3); cursor: pointer; transition: border-color var(--fa-transition), background var(--fa-transition); }
+.fa-screening__btn:hover:not(:disabled) { border-color: var(--fa-color-accent); }
+.fa-screening__btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.fa-screening__btn--primary { background: var(--fa-color-accent); border-color: var(--fa-color-accent); color: var(--fa-color-accent-contrast); }
+.fa-screening__btn--primary:hover:not(:disabled) { background: var(--fa-color-accent-hover); }
+.fa-screening__btn--confirmed { border-color: var(--fa-color-danger); color: var(--fa-color-danger); }
+.fa-screening__btn--dismissed { border-color: var(--fa-color-success); color: var(--fa-color-success); }
+.fa-screening__btn[aria-pressed='true'] { box-shadow: inset 0 0 0 2px currentColor; font-weight: 600; }
+.fa-screening button:focus-visible, .fa-screening input:focus-visible, .fa-screening select:focus-visible, .fa-screening textarea:focus-visible, .fa-screening a:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-screening__field { display: grid; gap: var(--fa-space-1); margin: 0 0 var(--fa-space-3); border: 0; padding: 0; }
+.fa-screening__field > span, .fa-screening__field legend { font-weight: 600; font-size: var(--fa-font-size-sm); padding: 0; }
+.fa-screening__field input, .fa-screening__field select, .fa-screening__field textarea { font: inherit; border: 1px solid var(--fa-color-border-strong); border-radius: var(--fa-radius-sm); padding: var(--fa-space-1) var(--fa-space-2); background: var(--fa-color-surface); color: var(--fa-color-text); width: 100%; }
+.fa-screening__field textarea { min-height: 84px; resize: vertical; }
+.fa-screening__check { display: flex; gap: var(--fa-space-2); align-items: flex-start; font-size: var(--fa-font-size-sm); margin: 2px 0; }
+.fa-screening__check > span { min-width: 0; overflow-wrap: anywhere; }
+.fa-screening__field input[type='checkbox'], .fa-screening__field input[type='radio'], .fa-screening__check input { width: auto; flex: none; margin-top: 3px; }
+.fa-screening__errors { color: var(--fa-color-danger); font-size: var(--fa-font-size-sm); margin: var(--fa-space-2) 0; padding-left: var(--fa-space-4); }
+.fa-screening__alert { border-radius: var(--fa-radius-sm); padding: var(--fa-space-2) var(--fa-space-3); margin: 0 0 var(--fa-space-3); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }
+.fa-screening__alert--warning { background: var(--fa-color-warning-soft); color: var(--fa-color-warning); }
+.fa-screening__runs { list-style: none; margin: 0; padding: 0; }
+.fa-screening__runs button { width: 100%; text-align: left; display: grid; gap: 2px; background: none; border: 0; border-bottom: 1px solid var(--fa-color-border); padding: var(--fa-space-2) var(--fa-space-1); font: inherit; color: inherit; cursor: pointer; }
+.fa-screening__runs button[aria-current='true'] { background: var(--fa-color-accent-soft); }
+.fa-screening__summary { display: flex; gap: var(--fa-space-2) var(--fa-space-4); flex-wrap: wrap; font-size: var(--fa-font-size-sm); }
+.fa-screening__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--fa-space-2) var(--fa-space-3); }
+.fa-screening__filters .fa-screening__field { margin: 0; }
+.fa-screening__subject { border-top: 2px solid var(--fa-color-border); padding-top: var(--fa-space-2); margin-top: var(--fa-space-2); }
+.fa-screening__subject:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
+.fa-screening__subject-head { display: flex; justify-content: space-between; gap: var(--fa-space-2); flex-wrap: wrap; align-items: baseline; }
+.fa-screening__findings { display: flex; gap: var(--fa-space-1); flex-wrap: wrap; margin: var(--fa-space-2) 0; }
+.fa-screening__findings .fa-badge { white-space: normal; text-align: left; }
+.fa-screening__hits { list-style: none; margin: 0; padding: 0; }
+.fa-screening__hit { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: var(--fa-space-1) var(--fa-space-3); align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: var(--fa-radius-sm); padding: var(--fa-space-2); cursor: pointer; }
+.fa-screening__hit:hover { background: var(--fa-color-surface-sunken); }
+.fa-screening__hit[aria-current='true'] { border-color: var(--fa-color-accent); background: var(--fa-color-accent-soft); }
+.fa-screening__hit-name { font-weight: 600; overflow-wrap: anywhere; }
+.fa-screening__hit-meta { grid-column: 1 / -1; display: flex; gap: var(--fa-space-1); flex-wrap: wrap; align-items: center; font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-screening__bar { position: relative; height: 8px; border-radius: 4px; background: var(--fa-color-surface-sunken); }
+.fa-screening__bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--fa-color-accent); }
+.fa-screening__bar > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fa-color-text); }
+.fa-screening__score { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
+.fa-screening__cmp th, .fa-screening__cmp td { overflow-wrap: break-word; hyphens: auto; }
+.fa-screening__cmp th[scope='row'] { width: 28%; }
+.fa-screening__state { width: 28px; text-align: center; font-weight: 700; }
+.fa-screening__cmp--conflict td { background: var(--fa-color-danger-soft); }
+.fa-screening__cmp--match .fa-screening__state { color: var(--fa-color-success); }
+.fa-screening__cmp--conflict .fa-screening__state { color: var(--fa-color-danger); }
+.fa-screening__cmp--not_compared .fa-screening__state { color: var(--fa-color-text-muted); }
+.fa-screening__points { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fa-screening__steps--plus .fa-screening__points { color: var(--fa-color-success); }
+.fa-screening__steps--minus .fa-screening__points { color: var(--fa-color-danger); }
+.fa-screening__steps--result td { font-weight: 700; border-top: 2px solid var(--fa-color-text); }
+.fa-screening__classes, .fa-screening__actions { display: flex; gap: var(--fa-space-2); flex-wrap: wrap; margin: var(--fa-space-2) 0; }
+.fa-screening__log { list-style: none; margin: 0; padding: 0; font-size: var(--fa-font-size-sm); }
+.fa-screening__log li { border-left: 3px solid var(--fa-color-border); padding: var(--fa-space-1) var(--fa-space-3); margin-bottom: var(--fa-space-2); }
+.fa-screening__log--decision_recorded { border-color: var(--fa-color-accent) !important; }
+.fa-screening__log--second_review_recorded { border-color: var(--fa-color-success) !important; }
+.fa-screening__source-list { list-style: none; margin: 0; padding: 0; font-size: var(--fa-font-size-sm); }
+.fa-screening__source-list li { border-bottom: 1px solid var(--fa-color-border); padding: var(--fa-space-2) 0; display: grid; gap: 2px; }
+.fa-screening__empty { color: var(--fa-color-text-muted); font-style: italic; }
+.fa-screening__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (max-width: 1100px) { .fa-screening__main { grid-template-columns: 1fr; } }
+@media (max-width: 760px) {
+  .fa-screening__layout { grid-template-columns: 1fr; }
+  .fa-screening__hit { grid-template-columns: 1fr auto; }
+  .fa-screening__hit .fa-screening__bar { display: none; }
+}
+@media (prefers-reduced-motion: reduce) { .fa-screening__btn { transition: none; } }

package/styles/synopsis.css

@@ -0,0 +1,83 @@
+/* Synopse / Versionsvergleich – gemeinsam für Vue und React. */
+
+/* FaSynopsis */
+.fa-synopsis { display: flex; flex-direction: column; gap: var(--fa-space-4); color: var(--fa-color-text); font: var(--fa-font-size-md) / var(--fa-line-height) var(--fa-font-sans); }
+.fa-synopsis__rows { display: flex; flex-direction: column; gap: var(--fa-space-3); }
+.fa-synopsis__state { margin: 0; padding: var(--fa-space-4); border: 1px dashed var(--fa-color-border-strong); border-radius: var(--fa-radius); color: var(--fa-color-text-muted); text-align: center; }
+.fa-synopsis__state--error { border-style: solid; border-color: var(--fa-color-danger); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }
+
+/* SynopsisHeader */
+.fa-synopsis-header { display: flex; flex-direction: column; gap: var(--fa-space-1); }
+.fa-synopsis-header__title { margin: 0; font-size: var(--fa-font-size-lg); line-height: 1.3; }
+.fa-synopsis-header p { margin: 0; }
+.fa-synopsis-header__files { font-weight: 600; overflow-wrap: anywhere; }
+.fa-synopsis-header__counts { color: var(--fa-color-text); }
+.fa-synopsis-header__meta { font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-synopsis-header__hash { font-family: var(--fa-font-mono); overflow-wrap: anywhere; }
+.fa-synopsis-header__commands { margin-top: var(--fa-space-2) !important; padding: var(--fa-space-2) var(--fa-space-3); border-radius: var(--fa-radius-sm); background: var(--fa-color-warning-soft); color: var(--fa-color-text); }
+.fa-synopsis-header__notices { display: flex; flex-direction: column; gap: var(--fa-space-2); margin: var(--fa-space-2) 0 0; padding: 0; list-style: none; }
+.fa-synopsis-header__notices li { display: flex; gap: var(--fa-space-2); align-items: flex-start; padding: var(--fa-space-2) var(--fa-space-3); border-left: 4px solid var(--fa-color-warning); border-radius: var(--fa-radius-sm); background: var(--fa-color-warning-soft); font-size: var(--fa-font-size-sm); }
+.fa-synopsis-header__notices .fa-icon { flex: none; margin-top: 0.15rem; color: var(--fa-color-warning); }
+
+/* SynopsisToolbar */
+.fa-synopsis-toolbar { display: flex; flex-direction: column; gap: var(--fa-space-3); padding: var(--fa-space-3) var(--fa-space-4); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface-raised); font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); }
+.fa-synopsis-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fa-space-3) var(--fa-space-5); }
+.fa-synopsis-toolbar__group, .fa-synopsis-toolbar__nav, .fa-synopsis-toolbar__export { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--fa-space-2); }
+.fa-synopsis-toolbar__search { flex: 1 1 14rem; min-width: 12rem; }
+.fa-synopsis-toolbar__position { display: inline-block; width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fa-color-text-muted); font-variant-numeric: tabular-nums; }
+.fa-synopsis-toolbar__filters { display: flex; flex-wrap: wrap; gap: var(--fa-space-2) var(--fa-space-4); margin: 0; padding: 0; border: 0; }
+.fa-synopsis-toolbar__filters legend { float: left; margin-right: var(--fa-space-3); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-synopsis-toolbar label { display: inline-flex; align-items: center; gap: var(--fa-space-1); cursor: pointer; }
+.fa-synopsis-toolbar input[type='checkbox'] { accent-color: var(--fa-color-accent); width: 1rem; height: 1rem; }
+.fa-synopsis-toolbar input[type='checkbox']:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-synopsis-toolbar__options { display: inline-flex; flex-wrap: wrap; gap: var(--fa-space-4); }
+.fa-synopsis-toolbar__label { font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-synopsis-toolbar__export a { text-decoration: none; }
+.fa-synopsis-toolbar__export a:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+
+/* SynopsisRow */
+.fa-synopsis-row { border: 1px solid var(--fa-color-border); border-left: 4px solid var(--fa-color-border-strong); border-radius: var(--fa-radius); background: var(--fa-color-surface); scroll-margin: var(--fa-space-6); }
+.fa-synopsis-row:focus-visible, .fa-synopsis-row--active { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-synopsis-row--changed { border-left-color: var(--fa-color-accent); }
+.fa-synopsis-row--added { border-left-color: var(--fa-color-success); }
+.fa-synopsis-row--removed { border-left-color: var(--fa-color-danger); }
+.fa-synopsis-row--moved { border-left-color: var(--fa-color-warning); }
+.fa-synopsis-row--muted { opacity: 0.6; }
+.fa-synopsis-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fa-space-3); padding: var(--fa-space-2) var(--fa-space-4); border-bottom: 1px solid var(--fa-color-border); background: var(--fa-color-surface-raised); border-radius: var(--fa-radius) var(--fa-radius) 0 0; }
+.fa-synopsis-row__title { flex: 1; margin: 0; font-size: var(--fa-font-size-sm); font-weight: 600; }
+.fa-synopsis-row__include { display: inline-flex; align-items: center; gap: var(--fa-space-2); font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-synopsis-row__sides { display: grid; grid-template-columns: 1fr 1fr; }
+.fa-synopsis-row__side, .fa-synopsis-row__inline { padding: var(--fa-space-3) var(--fa-space-4); min-width: 0; }
+.fa-synopsis-row__side + .fa-synopsis-row__side { border-left: 1px solid var(--fa-color-border); }
+.fa-synopsis-row__side-title { margin: 0 0 var(--fa-space-2); font-size: var(--fa-font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fa-color-text-muted); }
+.fa-synopsis-row__field { margin-top: var(--fa-space-3); font-size: var(--fa-font-size-sm); }
+.fa-synopsis-row__field strong { display: block; font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-synopsis-row__reason { padding: var(--fa-space-2) var(--fa-space-4) var(--fa-space-3); border-top: 1px dashed var(--fa-color-border); font-size: var(--fa-font-size-sm); }
+.fa-synopsis-row__reason p { margin: 0; white-space: pre-wrap; }
+.fa-synopsis-row__reason-edit { display: flex; flex-direction: column; gap: var(--fa-space-1); font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-synopsis-row__reason-edit textarea { font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); color: var(--fa-color-text); background: var(--fa-color-surface); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius-sm); padding: var(--fa-space-2); resize: vertical; }
+.fa-synopsis-row__reason-edit textarea:focus-visible, .fa-synopsis-row__include input:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-synopsis-row__hint { margin-top: var(--fa-space-1) !important; font-size: var(--fa-font-size-xs); color: var(--fa-color-warning); }
+.fa-synopsis-row__hint--ok { color: var(--fa-color-success); }
+@media (max-width: 720px) {
+  .fa-synopsis-row__sides { grid-template-columns: 1fr; }
+  .fa-synopsis-row__side + .fa-synopsis-row__side { border-left: 0; border-top: 1px solid var(--fa-color-border); }
+}
+
+/* SynopsisText */
+.fa-synopsis__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
+.fa-synopsis__empty { color: var(--fa-color-text-muted); font-style: italic; }
+.fa-synopsis__del { background: var(--fa-color-danger-soft); color: var(--fa-color-danger); text-decoration: line-through; text-decoration-thickness: 1.5px; border-radius: 2px; }
+.fa-synopsis__ins { background: var(--fa-color-success-soft); color: var(--fa-color-success); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; border-radius: 2px; }
+
+/* SynopsisCommands */
+.fa-synopsis-commands { padding: var(--fa-space-3) var(--fa-space-4); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); font-size: var(--fa-font-size-sm); }
+.fa-synopsis-commands h3 { margin: 0 0 var(--fa-space-2); font-size: var(--fa-font-size-md); }
+.fa-synopsis-commands ol { margin: 0; padding-left: var(--fa-space-5); display: flex; flex-direction: column; gap: var(--fa-space-1); }
+.fa-synopsis-commands summary { cursor: pointer; font-weight: 600; }
+.fa-synopsis-commands summary:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); border-radius: var(--fa-radius-sm); }
+.fa-synopsis-commands dl { margin: var(--fa-space-3) 0 0; }
+.fa-synopsis-commands dt { font-weight: 600; margin-top: var(--fa-space-2); }
+.fa-synopsis-commands dt span { font-weight: 400; color: var(--fa-color-text-muted); }
+.fa-synopsis-commands dd { margin: 0; white-space: pre-wrap; }
+.fa-synopsis-commands__repealed { text-decoration: line-through; color: var(--fa-color-text-muted); }

package/styles/table.css

@@ -0,0 +1,17 @@
+/* Tabelle (FaTable / FlowauditTable) – gemeinsam für Vue und React. */
+
+/* FaTable */
+.fa-table-wrap { overflow-x: auto; border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); }
+.fa-table { width: 100%; border-collapse: collapse; font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); color: var(--fa-color-text); }
+.fa-table__caption { caption-side: top; text-align: start; padding: var(--fa-space-3) var(--fa-space-4); font-weight: 600; }
+.fa-table th, .fa-table td { padding: var(--fa-space-2) var(--fa-space-4); border-bottom: 1px solid var(--fa-color-border); }
+.fa-table th { background: var(--fa-color-surface-raised); font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
+.fa-table tbody tr:last-child td { border-bottom: none; }
+.fa-table--clickable tbody tr { cursor: pointer; }
+.fa-table--clickable tbody tr:hover { background: var(--fa-color-surface-sunken); }
+.fa-table tbody tr:focus-visible { outline: none; box-shadow: inset var(--fa-focus-ring); }
+.fa-table__cell--end { text-align: end; font-variant-numeric: tabular-nums; }
+.fa-table__cell--center { text-align: center; }
+.fa-table__sort { display: inline-flex; align-items: center; gap: var(--fa-space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
+.fa-table__sort:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); border-radius: var(--fa-radius-sm); }
+.fa-table__empty { text-align: center; color: var(--fa-color-text-muted); padding: var(--fa-space-5); }

package/styles/tabular.css

@@ -0,0 +1,11 @@
+/* Datei-Import (Stichprobe, Benford) – TableImport (Vue) und TableImport (React). */
+.fa-import { display: flex; flex-direction: column; gap: var(--fa-space-2); font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); color: var(--fa-color-text); }
+.fa-import__label, .fa-import__field > span { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-import__file { font: inherit; }
+.fa-import__file:focus-visible, .fa-import select:focus-visible, .fa-import input[type='checkbox']:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-import__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--fa-space-3); align-items: end; }
+.fa-import__field { display: flex; flex-direction: column; gap: var(--fa-space-1); }
+.fa-import select { min-height: 2.25rem; padding: 0 var(--fa-space-2); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); color: var(--fa-color-text); font: inherit; }
+.fa-import__check { display: inline-flex; gap: var(--fa-space-2); align-items: center; }
+.fa-import__note { margin: 0; color: var(--fa-color-text-muted); }
+.fa-import__warning { margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border-radius: var(--fa-radius); background: var(--fa-color-warning-soft); color: var(--fa-color-warning); }

package/styles/tokens.css

@@ -0,0 +1,121 @@
+/*
+ * FlowAudit-Designtoken. Jede Komponente liest ausschließlich diese Variablen,
+ * Anwendungen passen das Erscheinungsbild durch Überschreiben an.
+ * Hell ist Standard; dunkel über data-fa-theme="dark" oder, ohne explizite
+ * Wahl, über prefers-color-scheme.
+ */
+:where(:root, [data-fa-theme]) {
+  --fa-font-sans: 'IBM Plex Sans', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --fa-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
+  --fa-font-size-xs: 0.75rem;
+  --fa-font-size-sm: 0.8125rem;
+  --fa-font-size-md: 0.9375rem;
+  --fa-font-size-lg: 1.125rem;
+  --fa-line-height: 1.45;
+
+  --fa-space-1: 0.25rem;
+  --fa-space-2: 0.5rem;
+  --fa-space-3: 0.75rem;
+  --fa-space-4: 1rem;
+  --fa-space-5: 1.5rem;
+  --fa-space-6: 2rem;
+
+  --fa-radius-sm: 4px;
+  --fa-radius: 8px;
+  --fa-radius-lg: 12px;
+
+  --fa-color-bg: #f4f5f2;
+  --fa-color-surface: #ffffff;
+  --fa-color-surface-raised: #fbfbf9;
+  --fa-color-surface-sunken: #eceee9;
+  --fa-color-text: #1b2230;
+  --fa-color-text-muted: #5b6474;
+  --fa-color-border: #d6d9d2;
+  --fa-color-border-strong: #a9aea4;
+  --fa-color-accent: #1f5f8b;
+  --fa-color-accent-hover: #174a6d;
+  --fa-color-accent-contrast: #ffffff;
+  --fa-color-accent-soft: #e3eef6;
+  --fa-color-danger: #b42318;
+  --fa-color-danger-soft: #fdecea;
+  --fa-color-warning: #a15c07;
+  --fa-color-warning-soft: #fdf1dc;
+  --fa-color-success: #1d7a46;
+  --fa-color-success-soft: #e3f4ea;
+  --fa-color-overlay: rgb(15 20 28 / 0.45);
+
+  --fa-shadow-sm: 0 1px 2px rgb(20 26 36 / 0.08);
+  --fa-shadow: 0 2px 6px rgb(20 26 36 / 0.1), 0 1px 2px rgb(20 26 36 / 0.06);
+  --fa-shadow-lg: 0 18px 40px rgb(20 26 36 / 0.18);
+  --fa-focus-ring: 0 0 0 3px rgb(31 95 139 / 0.35);
+  --fa-transition: 140ms ease;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-fa-theme='light'])) {
+    --fa-color-bg: #101318;
+    --fa-color-surface: #181c23;
+    --fa-color-surface-raised: #1f242c;
+    --fa-color-surface-sunken: #0c0f13;
+    --fa-color-text: #e6e9ee;
+    --fa-color-text-muted: #9aa3b2;
+    --fa-color-border: #2c323c;
+    --fa-color-border-strong: #4a5260;
+    --fa-color-accent: #6fb1e0;
+    --fa-color-accent-hover: #93c6ea;
+    --fa-color-accent-contrast: #0c1a26;
+    --fa-color-accent-soft: #1b3346;
+    --fa-color-danger: #f0877d;
+    --fa-color-danger-soft: #3a1c1a;
+    --fa-color-warning: #e7b35f;
+    --fa-color-warning-soft: #3a2c14;
+    --fa-color-success: #6fcf97;
+    --fa-color-success-soft: #173323;
+    --fa-color-overlay: rgb(0 0 0 / 0.6);
+    --fa-focus-ring: 0 0 0 3px rgb(111 177 224 / 0.45);
+    color-scheme: dark;
+  }
+}
+
+:where([data-fa-theme='dark']) {
+  --fa-color-bg: #101318;
+  --fa-color-surface: #181c23;
+  --fa-color-surface-raised: #1f242c;
+  --fa-color-surface-sunken: #0c0f13;
+  --fa-color-text: #e6e9ee;
+  --fa-color-text-muted: #9aa3b2;
+  --fa-color-border: #2c323c;
+  --fa-color-border-strong: #4a5260;
+  --fa-color-accent: #6fb1e0;
+  --fa-color-accent-hover: #93c6ea;
+  --fa-color-accent-contrast: #0c1a26;
+  --fa-color-accent-soft: #1b3346;
+  --fa-color-danger: #f0877d;
+  --fa-color-danger-soft: #3a1c1a;
+  --fa-color-warning: #e7b35f;
+  --fa-color-warning-soft: #3a2c14;
+  --fa-color-success: #6fcf97;
+  --fa-color-success-soft: #173323;
+  --fa-color-overlay: rgb(0 0 0 / 0.6);
+  --fa-focus-ring: 0 0 0 3px rgb(111 177 224 / 0.45);
+  color-scheme: dark;
+}
+
+.fa-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-fa-theme], :root) {
+    --fa-transition: 0ms linear;
+  }
+}