mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-04-06 01:25:31 +00:00
161 lines
158 KiB
HTML
161 lines
158 KiB
HTML
<!doctype html>
|
|
<html lang="en-US" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta name="generator" content="VuePress 2.0.0-rc.18" />
|
|
<meta name="theme" content="VuePress Theme Hope 2.0.0-rc.59" />
|
|
<style>
|
|
:root {
|
|
--vp-c-bg: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--vp-c-bg: #1b1b1f;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: var(--vp-c-bg);
|
|
}
|
|
</style>
|
|
<script>
|
|
const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
|
|
const systemDarkMode =
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
|
|
if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
}
|
|
</script>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>Komponenten-Katalog | Ocelot.Social Documentation</title><meta name="description" content="Ocelot.Social Documentation">
|
|
<link rel="preload" href="/assets/style-B3yxn0TC.css" as="style"><link rel="stylesheet" href="/assets/style-B3yxn0TC.css">
|
|
<link rel="modulepreload" href="/assets/app-YeL2FPh5.js"><link rel="modulepreload" href="/assets/KATALOG.html-SVN7ENGL.js"><link rel="modulepreload" href="/assets/plugin-vue_export-helper-DlAUqK2U.js">
|
|
<link rel="prefetch" href="/assets/CHANGELOG.html-DxDf3Y5y.js" as="script"><link rel="prefetch" href="/assets/CODE_OF_CONDUCT.html-CtZI1jFG.js" as="script"><link rel="prefetch" href="/assets/CONTRIBUTING.html-CH_1Cmsm.js" as="script"><link rel="prefetch" href="/assets/LICENSE.html-DMXQq9qh.js" as="script"><link rel="prefetch" href="/assets/index.html-CSdUS5Wz.js" as="script"><link rel="prefetch" href="/assets/SUMMARY.html-COtv636O.js" as="script"><link rel="prefetch" href="/assets/documentation.html-tkJ1RdId.js" as="script"><link rel="prefetch" href="/assets/testing.html-C1fTlJNT.js" as="script"><link rel="prefetch" href="/assets/index.html-Dus1h9cv.js" as="script"><link rel="prefetch" href="/assets/graphql.html-DCJTUGfa.js" as="script"><link rel="prefetch" href="/assets/neo4j-graphql-js.html-H61UtYL1.js" as="script"><link rel="prefetch" href="/assets/testing.html-B3RFk52-.js" as="script"><link rel="prefetch" href="/assets/index.html-C9tkxr5F.js" as="script"><link rel="prefetch" href="/assets/features.html-CDLi3UNv.js" as="script"><link rel="prefetch" href="/assets/TODO-next-update.html-BlCLbfy9.js" as="script"><link rel="prefetch" href="/assets/deployment-values.html-BAZiAXI8.js" as="script"><link rel="prefetch" href="/assets/index.html-DyrkXi47.js" as="script"><link rel="prefetch" href="/assets/index.html-DNK1YdNs.js" as="script"><link rel="prefetch" href="/assets/index.html-ndrwOTLe.js" as="script"><link rel="prefetch" href="/assets/index.html-OWd4LMMo.js" as="script"><link rel="prefetch" href="/assets/components.html-DAz1RhHt.js" as="script"><link rel="prefetch" href="/assets/html.html-Dnq_RqvR.js" as="script"><link rel="prefetch" href="/assets/scss.html-Dly6Ly_r.js" as="script"><link rel="prefetch" href="/assets/testing.html-BYF3jnQf.js" as="script"><link rel="prefetch" href="/assets/vue.html-z96_EfaV.js" as="script"><link rel="prefetch" href="/assets/index.html-DK2Z14ql.js" as="script"><link rel="prefetch" href="/assets/CONTRIBUTING.html-Cc0VkxIe.js" as="script"><link rel="prefetch" href="/assets/PROJEKT.html-DFHpLv6E.js" as="script"><link rel="prefetch" href="/assets/index.html-BdrWE24B.js" as="script"><link rel="prefetch" href="/assets/GraphQL-Playground.html-C0nm3ebg.js" as="script"><link rel="prefetch" href="/assets/index.html-B8t6Akje.js" as="script"><link rel="prefetch" href="/assets/index.html-BqI5T05d.js" as="script"><link rel="prefetch" href="/assets/demo.html-qjSh8yJi.js" as="script"><link rel="prefetch" href="/assets/DataDisplay.html-BOPzIn75.js" as="script"><link rel="prefetch" href="/assets/DesignTokens.html-4jN1KH4z.js" as="script"><link rel="prefetch" href="/assets/Introduction.html-DF3G3o1W.js" as="script"><link rel="prefetch" href="/assets/Layout.html-DdFtESnj.js" as="script"><link rel="prefetch" href="/assets/Navigation.html-CbpY101w.js" as="script"><link rel="prefetch" href="/assets/Typography.html-CWCCBmHF.js" as="script"><link rel="prefetch" href="/assets/STATUS.html-B8lF1vHG.js" as="script"><link rel="prefetch" href="/assets/index.html-CanARjt0.js" as="script"><link rel="prefetch" href="/assets/demo.html-JsmuDsv3.js" as="script"><link rel="prefetch" href="/assets/demo.html-D0yBhhfa.js" as="script"><link rel="prefetch" href="/assets/demo.html-6qdww2jI.js" as="script"><link rel="prefetch" href="/assets/demo.html-B_OD1HTe.js" as="script"><link rel="prefetch" href="/assets/demo.html-Flaw5adT.js" as="script"><link rel="prefetch" href="/assets/demo.html-DRVoMp-c.js" as="script"><link rel="prefetch" href="/assets/demo.html-DWrCIEWO.js" as="script"><link rel="prefetch" href="/assets/demo.html-CAR_IUc6.js" as="script"><link rel="prefetch" href="/assets/demo.html-B6jX1CF5.js" as="script"><link rel="prefetch" href="/assets/demo.html-BYq87wj2.js" as="script"><link rel="prefetch" href="/assets/demo.html-CSYeyJpM.js" as="script"><link rel="prefetch" href="/assets/demo.html-sJOn1z-4.js" as="script"><link rel="prefetch" href="/assets/demo.html-CH_kvitY.js" as="script"><link rel="prefetch" href="/assets/demo.html-DiHRBqOZ.js" as="script"><link rel="prefetch" href="/assets/demo.html-ECXRXNmg.js" as="script"><link rel="prefetch" href="/assets/demo.html-uAyEG8Fg.js" as="script"><link rel="prefetch" href="/assets/demo.html-CF8ucSk3.js" as="script"><link rel="prefetch" href="/assets/demo.html-BNO-x-DF.js" as="script"><link rel="prefetch" href="/assets/demo.html-BMAjMYgv.js" as="script"><link rel="prefetch" href="/assets/demo.html-Bg2twjmB.js" as="script"><link rel="prefetch" href="/assets/demo.html-iCi-97Uj.js" as="script"><link rel="prefetch" href="/assets/demo.html-itXm2-21.js" as="script"><link rel="prefetch" href="/assets/demo.html-DVwjYx1l.js" as="script"><link rel="prefetch" href="/assets/demo.html-B4fDaieB.js" as="script"><link rel="prefetch" href="/assets/demo.html-BJZ7DWw8.js" as="script"><link rel="prefetch" href="/assets/demo.html-CXoqyt5d.js" as="script"><link rel="prefetch" href="/assets/demo.html-8v26_O6q.js" as="script"><link rel="prefetch" href="/assets/demo.html-DI2SHnL1.js" as="script"><link rel="prefetch" href="/assets/demo.html-D6VYxLOD.js" as="script"><link rel="prefetch" href="/assets/404.html-CIz-L9ei.js" as="script"><link rel="prefetch" href="/assets/index.html-BSrXyFwC.js" as="script"><link rel="prefetch" href="/assets/index.html-CHmj5dO0.js" as="script"><link rel="prefetch" href="/assets/index.html-VTo3CKum.js" as="script"><link rel="prefetch" href="/assets/index.html-u0XrWa34.js" as="script"><link rel="prefetch" href="/assets/index.html-WNvAakE4.js" as="script"><link rel="prefetch" href="/assets/index.html-DTeWRDh_.js" as="script"><link rel="prefetch" href="/assets/index.html-YYg1JHmU.js" as="script"><link rel="prefetch" href="/assets/index.html-CCZbpm34.js" as="script"><link rel="prefetch" href="/assets/index.html-C66vup47.js" as="script"><link rel="prefetch" href="/assets/index.html-YdLcdSoL.js" as="script"><link rel="prefetch" href="/assets/index.html-Be7jDzHB.js" as="script"><link rel="prefetch" href="/assets/index.html-BzwHGABR.js" as="script"><link rel="prefetch" href="/assets/index.html-BUQ1nMfT.js" as="script"><link rel="prefetch" href="/assets/index.html-DpzX0y7r.js" as="script"><link rel="prefetch" href="/assets/index.html-BjFF6MPI.js" as="script"><link rel="prefetch" href="/assets/index.html-By6pcQSo.js" as="script"><link rel="prefetch" href="/assets/index.html-DlXAw5zK.js" as="script"><link rel="prefetch" href="/assets/index.html-D3O1OBWJ.js" as="script"><link rel="prefetch" href="/assets/index.html-CvlzUZBn.js" as="script"><link rel="prefetch" href="/assets/index.html-BOYrZCkM.js" as="script"><link rel="prefetch" href="/assets/index.html-D1X3TNNI.js" as="script"><link rel="prefetch" href="/assets/index.html-BI3_sLKN.js" as="script"><link rel="prefetch" href="/assets/index.html-DowmL8rw.js" as="script"><link rel="prefetch" href="/assets/index.html-Bc1fnnmy.js" as="script"><link rel="prefetch" href="/assets/index.html-BmQnNLlz.js" as="script"><link rel="prefetch" href="/assets/index.html-CR2bkE-w.js" as="script"><link rel="prefetch" href="/assets/index.html-D-84IiAx.js" as="script"><link rel="prefetch" href="/assets/index.html-Cjm34Pgi.js" as="script"><link rel="prefetch" href="/assets/index.html-BJYSHhv-.js" as="script"><link rel="prefetch" href="/assets/index.html-C2znmgof.js" as="script"><link rel="prefetch" href="/assets/index.html-BVqSaX0o.js" as="script"><link rel="prefetch" href="/assets/index.html-Dy0bkpwz.js" as="script"><link rel="prefetch" href="/assets/index.html-B8HgQift.js" as="script"><link rel="prefetch" href="/assets/index.html-CPRs9ePw.js" as="script"><link rel="prefetch" href="/assets/index.html-DEhFMlqf.js" as="script"><link rel="prefetch" href="/assets/index.html-rBv5OEAG.js" as="script"><link rel="prefetch" href="/assets/index.html-B37Uhch1.js" as="script"><link rel="prefetch" href="/assets/index.html-Bh76T7Dw.js" as="script"><link rel="prefetch" href="/assets/index.html-Cbgrz0f4.js" as="script"><link rel="prefetch" href="/assets/index.html-DEQzzykZ.js" as="script"><link rel="prefetch" href="/assets/index.html-Dy6oDwD3.js" as="script"><link rel="prefetch" href="/assets/index.html-Dxo2mPX8.js" as="script"><link rel="prefetch" href="/assets/index.html-0V5UHX_Y.js" as="script"><link rel="prefetch" href="/assets/index.html-BuXfCeBn.js" as="script"><link rel="prefetch" href="/assets/index.html-lWBWTP2b.js" as="script"><link rel="prefetch" href="/assets/index.html-CH9jcrHg.js" as="script"><link rel="prefetch" href="/assets/index.html-D77Yc_KE.js" as="script"><link rel="prefetch" href="/assets/index.html-DO7ORpR-.js" as="script"><link rel="prefetch" href="/assets/index.html-Bqs2jFk9.js" as="script"><link rel="prefetch" href="/assets/index.html-BFr3KeDQ.js" as="script"><link rel="prefetch" href="/assets/index.html-CF0gG2Fc.js" as="script"><link rel="prefetch" href="/assets/photoswipe.esm-GXRgw7eJ.js" as="script"><link rel="prefetch" href="/assets/SearchResult-IVaLvtwz.js" as="script"><link rel="prefetch" href="/assets/setupDevtools-7MC2TMWH-6MzY1JNW.js" as="script">
|
|
</head>
|
|
<body>
|
|
<div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="vp-skip-link sr-only">Skip to main content</a><!--]--><!--[--><div class="theme-container external-link-icon pure has-toc" vp-container><!--[--><header id="navbar" class="vp-navbar" vp-navbar><div class="vp-navbar-start"><button type="button" class="vp-toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!----><!--[--><a class="route-link vp-brand" href="/" aria-label="Take me home"><img class="vp-nav-logo" src="/logo.svg" alt><!----><span class="vp-site-name hide-in-pad">Ocelot.Social Documentation</span></a><!--]--><!----></div><div class="vp-navbar-center"><!----><!--[--><nav class="vp-nav-links"><div class="vp-nav-item hide-in-mobile"><a class="auto-link external-link" href="https://stage.ocelot.social/" aria-label="Demo" target="_self"><!---->Demo<!----></a></div></nav><!--]--><!----></div><div class="vp-navbar-end"><!----><!--[--><div class="vp-nav-item vp-action"><a class="vp-action-link" href="https://github.com/Ocelot-Social-Community/Ocelot-Social" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="github icon" name="github" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="vp-nav-item hide-in-mobile"><button type="button" class="vp-color-mode-switch" id="color-mode-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" name="auto" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" name="dark" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon" name="light" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><!--[--><button type="button" class="search-pro-button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon" name="search"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="search-pro-placeholder">Search</div><div class="search-pro-key-hints"><kbd class="search-pro-key">Ctrl</kbd><kbd class="search-pro-key">K</kbd></div></button><!--]--><!--]--><!----><button type="button" class="vp-toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span><span class="vp-top"></span><span class="vp-middle"></span><span class="vp-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow start"></span></div><aside id="sidebar" class="vp-sidebar" vp-sidebar><!----><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/" aria-label="Introduction"><!---->Introduction<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/neo4j/" aria-label="Neo4J"><!---->Neo4J<!----></a></li><li><section class="vp-sidebar-group"><p class="vp-sidebar-header clickable"><!----><a class="route-link auto-link vp-sidebar-title no-external-link-icon" href="/backend/" aria-label="Backend"><!---->Backend<!----></a><!----></p><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/backend/graphql.html" aria-label="GraphQL"><!---->GraphQL<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/backend/neo4j-graphql-js.html" aria-label="neo4j-graphql-js"><!---->neo4j-graphql-js<!----></a></li></ul></section></li><li><section class="vp-sidebar-group"><p class="vp-sidebar-header clickable"><!----><a class="route-link auto-link vp-sidebar-title no-external-link-icon" href="/webapp/" aria-label="Webapp (Frontend)"><!---->Webapp (Frontend)<!----></a><!----></p><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/components.html" aria-label="Components"><!---->Components<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/html.html" aria-label="HTML"><!---->HTML<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/scss.html" aria-label="SCSS"><!---->SCSS<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/vue.html" aria-label="Vue"><!---->Vue<!----></a></li></ul></section></li><li><section class="vp-sidebar-group"><p class="vp-sidebar-header clickable"><!----><a class="route-link auto-link vp-sidebar-title no-external-link-icon" href="/testing.html" aria-label="Testing Guide"><!---->Testing Guide<!----></a><!----></p><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/cypress/" aria-label="End-to-end Tests"><!---->End-to-end Tests<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/testing.html" aria-label="Webapp (Frontend) Tests"><!---->Webapp (Frontend) Tests<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/backend/testing.html" aria-label="Backend Tests"><!---->Backend Tests<!----></a></li></ul></section></li><li><a class="route-link auto-link vp-sidebar-link" href="/deployment/" aria-label="Deployment"><!---->Deployment<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/CONTRIBUTING.html" aria-label="Contributing"><!---->Contributing<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/cypress/features.html" aria-label="Feature Specification"><!---->Feature Specification<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/CODE_OF_CONDUCT.html" aria-label="Code of Conduct"><!---->Code of Conduct<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/documentation.html" aria-label="Documentation"><!---->Documentation<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/LICENSE.html" aria-label="License"><!---->License<!----></a></li></ul><!----></aside><!--[--><!--[--><main id="main-content" class="vp-page"><!--[--><!----><!----><nav class="vp-breadcrumb disable"></nav><div class="vp-page-title"><h1><!---->Komponenten-Katalog</h1><div class="page-info"><!----><!----><span class="page-date-info" aria-label="Writing Date"><svg xmlns="http://www.w3.org/2000/svg" class="icon calendar-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="calendar icon" name="calendar"><path d="M716.4 110.137c0-18.753-14.72-33.473-33.472-33.473-18.753 0-33.473 14.72-33.473 33.473v33.473h66.993v-33.473zm-334.87 0c0-18.753-14.72-33.473-33.473-33.473s-33.52 14.72-33.52 33.473v33.473h66.993v-33.473zm468.81 33.52H716.4v100.465c0 18.753-14.72 33.473-33.472 33.473a33.145 33.145 0 01-33.473-33.473V143.657H381.53v100.465c0 18.753-14.72 33.473-33.473 33.473a33.145 33.145 0 01-33.473-33.473V143.657H180.6A134.314 134.314 0 0046.66 277.595v535.756A134.314 134.314 0 00180.6 947.289h669.74a134.36 134.36 0 00133.94-133.938V277.595a134.314 134.314 0 00-133.94-133.938zm33.473 267.877H147.126a33.145 33.145 0 01-33.473-33.473c0-18.752 14.72-33.473 33.473-33.473h736.687c18.752 0 33.472 14.72 33.472 33.473a33.145 33.145 0 01-33.472 33.473z"></path></svg><span data-allow-mismatch="text">April 5, 2026</span><meta property="datePublished" content="2026-04-05T11:31:31.000Z"></span><!----><span class="page-reading-time-info" aria-label="Reading Time"><svg xmlns="http://www.w3.org/2000/svg" class="icon timer-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="timer icon" name="timer"><path d="M799.387 122.15c4.402-2.978 7.38-7.897 7.38-13.463v-1.165c0-8.933-7.38-16.312-16.312-16.312H256.33c-8.933 0-16.311 7.38-16.311 16.312v1.165c0 5.825 2.977 10.874 7.637 13.592 4.143 194.44 97.22 354.963 220.201 392.763-122.204 37.542-214.893 196.511-220.2 389.397-4.661 5.049-7.638 11.651-7.638 19.03v5.825h566.49v-5.825c0-7.379-2.849-13.981-7.509-18.9-5.049-193.016-97.867-351.985-220.2-389.527 123.24-37.67 216.446-198.453 220.588-392.892zM531.16 450.445v352.632c117.674 1.553 211.787 40.778 211.787 88.676H304.097c0-48.286 95.149-87.382 213.728-88.676V450.445c-93.077-3.107-167.901-81.297-167.901-177.093 0-8.803 6.99-15.793 15.793-15.793 8.803 0 15.794 6.99 15.794 15.793 0 80.261 63.69 145.635 142.01 145.635s142.011-65.374 142.011-145.635c0-8.803 6.99-15.793 15.794-15.793s15.793 6.99 15.793 15.793c0 95.019-73.789 172.82-165.96 177.093z"></path></svg><span>About 17 min</span><meta property="timeRequired" content="PT17M"></span><!----><!----></div><hr></div><div class="vp-toc-placeholder"><aside id="toc" vp-toc><!----><div class="vp-toc-header">On This Page<!----><div class="arrow end"></div></div><div class="vp-toc-wrapper"><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#fortschritt">Fortschritt</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#ubersicht">Übersicht</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#statistiken">Statistiken</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#architektur-entscheidungen">Architektur-Entscheidungen</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-migration-phase-3-✅">OsButton Migration (Phase 3) ✅</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#styleguide-komponenten-38">Styleguide Komponenten (38)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#data-display">Data Display</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#data-input">Data Input</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#layout">Layout</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#navigation">Navigation</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#typography">Typography</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#webapp-komponenten-139">Webapp Komponenten (139)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#status-legende">Status-Legende</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#a-b">A-B</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#c">C</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#d-e">D-E</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#f-g">F-G</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#h-l">H-L</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#m-o">M-O</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#p-r">P-R</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#s">S</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#t-z">T-Z</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#identifizierte-duplikate-konsolidierung">Identifizierte Duplikate & Konsolidierung</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#direkte-duplikate-webapp-↔-styleguide">Direkte Duplikate (Webapp ↔ Styleguide)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#button-familie-✅-alle-nutzen-osbutton">Button-Familie ✅ (alle nutzen OsButton)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#modal-familie-✅-alle-nutzen-osmodal">Modal-Familie ✅ (alle nutzen OsModal)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#menu-familie-zur-konsolidierung">Menu-Familie (zur Konsolidierung)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#kategorisierung">Kategorisierung</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#basis-komponenten-—-ui-library-✅">Basis-Komponenten — UI-Library ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#basis-komponenten-—-ui-library-ausstehend">Basis-Komponenten — UI-Library (ausstehend)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#layout-typography-—-→-plain-html-✅-tier-a">Layout & Typography — → Plain HTML ✅ (Tier A)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#noch-zu-migrieren-tier-b-rest">Noch zu migrieren (Tier B Rest)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#feature-komponenten-bleiben-in-webapp">Feature-Komponenten (bleiben in Webapp)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#analyse-protokoll">Analyse-Protokoll</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#nachste-schritte">Nächste Schritte</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-0-analyse-✅">Phase 0: Analyse ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-3-osbutton-migration-✅">Phase 3: OsButton Migration ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-1-—-ui-library-kern-✅">Phase 4: Tier 1 — UI-Library Kern ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-a-—-ds-→-plain-html-✅">Phase 4: Tier A — ds-* → Plain HTML ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-b-—-ds-migration-60">Phase 4: Tier B — ds-* Migration (60%)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-2-4-—-ui-library">Phase 4: Tier 2-4 — UI-Library</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#detailanalyse-button-familie">Detailanalyse: Button-Familie</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-button-dsbutton">Styleguide Button (DsButton)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#webapp-basebutton">Webapp BaseButton</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#vergleich-styleguide-vs-webapp">Vergleich: Styleguide vs Webapp</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#wrapper-komponenten-nutzen-basebutton">Wrapper-Komponenten (nutzen BaseButton)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#feature-buttons-business-logik-✅">Feature-Buttons (Business-Logik) ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#konsolidierungsvorschlag-osbutton-✅-implementiert">Konsolidierungsvorschlag: OsButton ✅ IMPLEMENTIERT</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#verwendete-design-tokens-tatsachlich-genutzt">Verwendete Design-Tokens (tatsächlich genutzt)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#offene-fragen-✅-alle-gelost">Offene Fragen ✅ (alle gelöst)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#detailanalyse-modal-familie">Detailanalyse: Modal-Familie</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#architektur-ubersicht">Architektur-Übersicht</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-dsmodal">Styleguide DsModal</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#feature-modals-✅-nutzen-osmodal">Feature-Modals ✅ (nutzen OsModal)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#webapp-modal-vue-modal-manager-✅-geloscht">Webapp Modal.vue (Modal-Manager) ✅ Gelöscht</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#konsolidierungsvorschlag-osmodal-✅-implementiert">Konsolidierungsvorschlag OsModal ✅ (implementiert)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#verwendete-design-tokens-tatsachlich-genutzt-1">Verwendete Design-Tokens (tatsächlich genutzt)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#detailanalyse-menu-familie">Detailanalyse: Menu-Familie</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#architektur-ubersicht-1">Architektur-Übersicht</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-dsmenu">Styleguide DsMenu</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-dsmenuitem">Styleguide DsMenuItem</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#webapp-dropdown">Webapp Dropdown</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#kategorisierung-der-menu-komponenten">Kategorisierung der Menu-Komponenten</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#konsolidierungsvorschlag">Konsolidierungsvorschlag</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#verwendete-design-tokens-tatsachlich-genutzt-2">Verwendete Design-Tokens (tatsächlich genutzt)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#priorisierung-der-komponenten">Priorisierung der Komponenten</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-1-kern-komponenten-✅">Tier 1: Kern-Komponenten ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-a-triviale-ds-→-plain-html-✅">Tier A: Triviale ds-* → Plain HTML ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-b-einfache-ds-migration-✅">Tier B: Einfache ds-* Migration ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-2-layout-feedback">Tier 2: Layout & Feedback</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-3-navigation-ausstehend">Tier 3: Navigation (ausstehend)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-4-spezial-komponenten-ausstehend">Tier 4: Spezial-Komponenten (ausstehend)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#finaler-konsolidierungsplan">Finaler Konsolidierungsplan</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-1-kern-komponenten-✅-1">Tier 1: Kern-Komponenten ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-a-triviale-ds-wrapper-→-plain-html-✅">Tier A: Triviale ds-* Wrapper → Plain HTML ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-b-einfache-ds-migration-60">Tier B: Einfache ds-* Migration (60%)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-2-4-ui-library">Tier 2-4: UI-Library</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#erkenntnisse-aus-der-analyse">Erkenntnisse aus der Analyse</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#was-funktioniert-gut">Was funktioniert gut:</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#was-gelost-wurde-✅">Was gelöst wurde: ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#noch-offen">Noch offen:</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#token-extraktion-aus-analyse">Token-Extraktion (aus Analyse)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#benotigte-design-tokens-fur-phase-1">Benötigte Design-Tokens für Phase 1</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#phase-3-webapp-integration-tracking">Phase 3: Webapp-Integration (Tracking)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-migration-abgeschlossen-133-133-✅">OsButton Migration - Abgeschlossen (133/133) ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-migration-alle-milestones-abgeschlossen-✅">OsButton Migration - Alle Milestones abgeschlossen ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-features-alle-implementiert-✅">OsButton Features - Alle implementiert ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#status">Status</a></li><!----><!--]--></ul></li><!--]--></ul><div class="vp-toc-marker" style="top:-1.7rem;"></div></div><!----></aside></div><!----><div class="theme-hope-content" vp-content><h1 id="komponenten-katalog" tabindex="-1"><a class="header-anchor" href="#komponenten-katalog"><span>Komponenten-Katalog</span></a></h1><blockquote><p>Tracking der Katalogisierung aller bestehenden Komponenten. Diese Datei ermöglicht das Unterbrechen und Fortsetzen der Analyse.</p></blockquote><hr><h2 id="fortschritt" tabindex="-1"><a class="header-anchor" href="#fortschritt"><span>Fortschritt</span></a></h2><h3 id="ubersicht" tabindex="-1"><a class="header-anchor" href="#ubersicht"><span>Übersicht</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>Phase 0: Analyse ██████████ 100% (8/8 Schritte) ✅</span></span>
|
|
<span class="line"><span>Phase 3: OsButton ██████████ 100% (133/133 Buttons) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier 1 ██████████ 100% (OsButton, OsIcon, OsSpinner, OsCard) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier A → HTML ██████████ 100% (10 ds-* Wrapper → Plain HTML) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier B ██████████ 100% (ds-chip→OsBadge✅, ds-tag→OsBadge✅, ds-grid✅, ds-number→OsNumber✅, ds-radio→HTML✅)</span></span>
|
|
<span class="line"><span>Phase 4: Tier B ██████████ 100% (Chip→OsBadge, Tag→OsBadge, Grid→HTML, Number→OsNumber, Radio→HTML, Table→HTML) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier 2+ ██████████ 100% (OsModal✅, ds-form✅, OcelotInput✅, OcelotSelect✅, OsMenu/OsMenuItem✅) | 0 ds-* Tags verbleibend ✅</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="statistiken" tabindex="-1"><a class="header-anchor" href="#statistiken"><span>Statistiken</span></a></h3><table><thead><tr><th>Metrik</th><th>Wert</th></tr></thead><tbody><tr><td>Webapp Komponenten</td><td>139</td></tr><tr><td>Styleguide Komponenten</td><td>38 (23 in Webapp genutzt)</td></tr><tr><td><strong>Gesamt</strong></td><td><strong>177</strong></td></tr><tr><td>✅ UI-Library</td><td>OsButton, OsIcon, OsSpinner, OsCard, OsBadge, OsNumber (6)</td></tr><tr><td>✅ → Plain HTML</td><td>Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem, Grid, GridItem, Table (13)</td></tr><tr><td>✅ → OsBadge</td><td>Chip (20 Nutzungen → OsBadge), Tag (3 → OsBadge shape="square")</td></tr><tr><td>✅ → OsNumber</td><td>Number (5 Nutzungen → OsNumber, CountTo.vue gelöscht, vue-count-to entfernt)</td></tr><tr><td>✅ → Plain HTML</td><td>Radio (1 Datei → native <code><input type="radio"></code> in ReportModal)</td></tr><tr><td>✅ → OsModal</td><td>Modal (7 Nutzungen → OsModal, Focus-Trap, Scroll-Lock, A11y)</td></tr><tr><td>✅ ds-input → OcelotInput</td><td>Input (23 Dateien → OcelotInput Webapp-Komponente, lokale Imports, formValidation-kompatibel)</td></tr><tr><td>✅ ds-form entkoppelt</td><td>Form-Validierung → formValidation Mixin (async-validator), vuelidate entfernt</td></tr><tr><td>✅ ds-select → OcelotSelect</td><td>Select (3 Dateien → OcelotSelect Webapp-Komponente, lokale Imports, click-outside inline)</td></tr><tr><td>✅ → OsMenu/OsMenuItem</td><td>Menu, MenuItem (17 Nutzungen → packages/ui, dropdown Prop, eigene CSS)</td></tr><tr><td>⬜ Nicht in Webapp</td><td>Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11)</td></tr><tr><td>❌ Nicht geplant</td><td>OsLocaleSwitch — bricht Props-Only-Philosophie oder ist nur OsMenu-Wrapper (siehe Entscheidung unten)</td></tr><tr><td>✅ Maintenance entkoppelt</td><td>Eigenständiges Nuxt 4-Projekt unter <code>maintenance/</code> — nutzt OsButton, OsIcon, OsCard aus packages/ui</td></tr></tbody></table><h3 id="architektur-entscheidungen" tabindex="-1"><a class="header-anchor" href="#architektur-entscheidungen"><span>Architektur-Entscheidungen</span></a></h3><p><strong>OsLocaleSwitch: Nicht in packages/ui</strong> (Session 34, 2026-03-27)</p><p>Evaluiert und abgelehnt. Eine LocaleSwitch-Komponente in der UI-Library würde entweder:</p><ol><li>Die Props-Only-Philosophie brechen (i18n-Logik, Sprachnamen, Cookie-Handling eingebaut)</li><li>Oder nur ein triviales OsMenu-Wrapper sein (kein Mehrwert)</li></ol><p>Stattdessen: Jede App baut ihre eigene LocaleSwitch mit UI-Library-Komponenten + app-spezifischer Logik.</p><p><strong>Maintenance-App: Entkopplung umgesetzt ✅</strong> (Session 35, 2026-03-28)</p><p>Die Maintenance-App ist jetzt ein eigenständiges Nuxt 4-Projekt unter <code>maintenance/</code>:</p><ul><li>Eigene LocaleSwitch: OsButton (ghost/circle) + OsIcon (language) + floating-vue VDropdown</li><li>@nuxtjs/i18n v10 mit 11 Sprachen, eigene Locale-Dateien</li><li>Abhängigkeiten: @ocelot-social/ui, @nuxtjs/i18n, floating-vue, Tailwind CSS v4</li><li>Kein Vuex, kein Apollo, kein v-tooltip — <strong>vollständig von Webapp entkoppelt</strong></li><li>Docker + nginx für statisches Hosting</li><li><strong>Validiert packages/ui als echten Shared Layer</strong> (erster externer Consumer)</li></ul><h3 id="osbutton-migration-phase-3-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-migration-phase-3-✅"><span>OsButton Migration (Phase 3) ✅</span></a></h3><p><strong>133 Buttons migriert in 79 Dateien ✅</strong> — BaseButton.vue gelöscht, base-components.js Plugin entfernt.</p><p><strong>Erkenntnisse aus der Migration:</strong></p><ul><li><code>type="submit"</code> muss explizit gesetzt werden (OsButton Default: <code>type="button"</code>)</li><li><code>formErrors</code> ist ein Objekt → <code>!!formErrors</code> für Boolean-Cast bei <code>:disabled</code></li><li>CSS <code>.base-button</code> Selektoren → <code>> button</code> oder <code>button</code></li><li>Filter-Buttons nutzen <code>:appearance="condition ? 'filled' : 'outline'"</code> Pattern</li><li>Circle-Buttons mit Icon: <code><template #icon><os-icon :icon="..." /></template></code></li></ul><hr><h2 id="styleguide-komponenten-38" tabindex="-1"><a class="header-anchor" href="#styleguide-komponenten-38"><span>Styleguide Komponenten (38)</span></a></h2><blockquote><p>Quelle: <code>../../styleguide/src/system/components/</code> Live: http://styleguide.ocelot.social/</p></blockquote><h3 id="data-display" tabindex="-1"><a class="header-anchor" href="#data-display"><span>Data Display</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>1</td><td>Avatar</td><td>⬜ Nicht genutzt</td><td>Webapp nutzt eigenes ProfileAvatar</td></tr><tr><td>2</td><td>Card</td><td>✅ UI-Library</td><td>→ OsCard (BaseCard gelöscht)</td></tr><tr><td>3</td><td>Chip</td><td>✅ UI-Library</td><td>→ OsBadge (20 Nutzungen in 5 Dateien)</td></tr><tr><td>4</td><td>Code</td><td>⬜ Nicht genutzt</td><td>Nicht in Webapp verwendet</td></tr><tr><td>5</td><td>Icon</td><td>✅ UI-Library</td><td>→ OsIcon (BaseIcon gelöscht, 82 Ocelot-Icons)</td></tr><tr><td>6</td><td>Number</td><td>✅ UI-Library</td><td>→ OsNumber (5 Dateien, CountTo.vue gelöscht, vue-count-to entfernt)</td></tr><tr><td>7</td><td>Placeholder</td><td>✅ → HTML</td><td>Tier A: <code><div class="ds-placeholder"></code></td></tr><tr><td>8</td><td>Spinner</td><td>✅ UI-Library</td><td>→ OsSpinner (LoadingSpinner gelöscht)</td></tr><tr><td>9</td><td>Table</td><td>✅ → HTML</td><td>7 Dateien → Plain HTML <code><table></code> + CSS-Klassen (kein OsTable nötig)</td></tr><tr><td>10</td><td>TableCol</td><td>✅ → HTML</td><td>Ersetzt durch native <code><td class="ds-table-col"></code></td></tr><tr><td>11</td><td>TableHeadCol</td><td>✅ → HTML</td><td>Ersetzt durch native <code><th class="ds-table-head-col"></code></td></tr><tr><td>12</td><td>Tag</td><td>✅ UI-Library</td><td>→ OsBadge shape="square" (3 Nutzungen in 3 Dateien)</td></tr></tbody></table><h3 id="data-input" tabindex="-1"><a class="header-anchor" href="#data-input"><span>Data Input</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>13</td><td>Button</td><td>✅ UI-Library</td><td>→ OsButton (133 Buttons in 79 Dateien, BaseButton gelöscht)</td></tr><tr><td>14</td><td>CopyField</td><td>⬜ Nicht genutzt</td><td>Nicht in Webapp verwendet</td></tr><tr><td>15</td><td>Form</td><td>⬜ Offen</td><td>18 Dateien — HTML <code><form></code> oder OsForm?</td></tr><tr><td>16</td><td>FormItem</td><td>⬜ Nicht genutzt</td><td>Nicht in Webapp verwendet</td></tr><tr><td>17</td><td>Input</td><td>✅ → OcelotInput</td><td>23 Dateien → OcelotInput (Webapp-Komponente, FormItem/Label/Error vereint)</td></tr><tr><td>18</td><td>InputError</td><td>✅ → OcelotInput</td><td>In OcelotInput integriert</td></tr><tr><td>19</td><td>InputLabel</td><td>✅ → OcelotInput</td><td>In OcelotInput integriert</td></tr><tr><td>20</td><td>Radio</td><td>✅ → HTML</td><td>1 Datei → native <code><input type="radio"></code> + <code><fieldset></code> (ReportModal)</td></tr><tr><td>21</td><td>Select</td><td>✅ → OcelotSelect</td><td>3 Dateien → OcelotSelect (Webapp-Komponente, click-outside inline)</td></tr></tbody></table><h3 id="layout" tabindex="-1"><a class="header-anchor" href="#layout"><span>Layout</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>22</td><td>Container</td><td>✅ → HTML</td><td>Tier A: <code><div class="ds-container ds-container-{width}"></code></td></tr><tr><td>23</td><td>Flex</td><td>✅ → HTML</td><td>Tier A: Plain HTML + CSS @media Queries</td></tr><tr><td>24</td><td>FlexItem</td><td>✅ → HTML</td><td>Tier A: Plain HTML + CSS @media Queries</td></tr><tr><td>25</td><td>Grid</td><td>✅ → HTML</td><td>2 Dateien → CSS Grid (class="ds-grid")</td></tr><tr><td>26</td><td>GridItem</td><td>✅ → HTML</td><td>8 Dateien → CSS Grid</td></tr><tr><td>27</td><td>Modal</td><td>✅ Tier 2</td><td>→ OsModal (h() Render, Focus-Trap, Scroll-Lock, A11y; ConfirmModal + ReportModal nutzen OsModal)</td></tr><tr><td>28</td><td>Page</td><td>⬜ Nicht genutzt</td><td>Nicht direkt in Webapp verwendet</td></tr><tr><td>29</td><td>PageTitle</td><td>⬜ Nicht genutzt</td><td>Nicht direkt in Webapp verwendet</td></tr><tr><td>30</td><td>Section</td><td>✅ → HTML</td><td>Tier A: <code><section class="ds-section"></code></td></tr><tr><td>31</td><td>Space</td><td>✅ → HTML</td><td>Tier A: <code><div class="ds-mb-{size}"></code> / <code><div class="ds-my-{size}"></code></td></tr></tbody></table><h3 id="navigation" tabindex="-1"><a class="header-anchor" href="#navigation"><span>Navigation</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>32</td><td>List</td><td>✅ → HTML</td><td>Tier A: <code><ul class="ds-list"></code></td></tr><tr><td>33</td><td>ListItem</td><td>✅ → HTML</td><td>Tier A: <code><li class="ds-list-item"></code></td></tr><tr><td>34</td><td>Logo</td><td>⬜ Nicht genutzt</td><td>Webapp nutzt eigenes Logo</td></tr><tr><td>35</td><td>Menu</td><td>✅ UI-Library</td><td>11 Dateien → OsMenu (packages/ui, dropdown Prop)</td></tr><tr><td>36</td><td>MenuItem</td><td>✅ UI-Library</td><td>6 Dateien → OsMenuItem (packages/ui)</td></tr></tbody></table><h3 id="typography" tabindex="-1"><a class="header-anchor" href="#typography"><span>Typography</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>37</td><td>Heading</td><td>✅ → HTML</td><td>Tier A: <code><h1-h4 class="ds-heading ds-heading-h{n}"></code></td></tr><tr><td>38</td><td>Text</td><td>✅ → HTML</td><td>Tier A: <code><p class="ds-text ds-text-{color}"></code></td></tr></tbody></table><hr><h2 id="webapp-komponenten-139" tabindex="-1"><a class="header-anchor" href="#webapp-komponenten-139"><span>Webapp Komponenten (139)</span></a></h2><blockquote><p>Quelle: <code>../../webapp/components/</code></p></blockquote><h3 id="status-legende" tabindex="-1"><a class="header-anchor" href="#status-legende"><span>Status-Legende</span></a></h3><ul><li>⬜ Ausstehend</li><li>⏳ In Arbeit</li><li>✅ Analysiert</li><li>🔗 Duplikat (siehe Notizen)</li><li>⛔ Nicht migrieren (veraltet/ungenutzt)</li><li>🔄 Konsolidieren (mit anderen zusammenführen)</li></ul><h3 id="a-b" tabindex="-1"><a class="header-anchor" href="#a-b"><span>A-B</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>1</td><td>ActionButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>2</td><td>ActionRadiusSelect</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>3</td><td>AddChatRoomByUserSearch</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Chat-spezifisch</td></tr><tr><td>4</td><td>AddGroupMember</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Group-spezifisch</td></tr><tr><td>5</td><td>AvatarMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Avatar + Menu</td><td></td></tr><tr><td>6</td><td>AvatarUploader</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>7</td><td>BadgeSelection</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>8</td><td>Badges</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>9</td><td>BadgesSection</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>10</td><td><s>BaseButton</s></td><td>✅ Gelöscht</td><td>Button</td><td>Button</td><td>→ OsButton (133 Buttons, Komponente gelöscht)</td></tr><tr><td>11</td><td><s>BaseCard</s></td><td>✅ Gelöscht</td><td>Layout</td><td>Card</td><td>→ OsCard (~30 Dateien, Komponente gelöscht)</td></tr><tr><td>12</td><td><s>BaseIcon</s></td><td>✅ Gelöscht</td><td>Display</td><td>Icon</td><td>→ OsIcon (131 Nutzungen, Komponente gelöscht)</td></tr></tbody></table><h3 id="c" tabindex="-1"><a class="header-anchor" href="#c"><span>C</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>13</td><td>CategoriesFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>14</td><td>CategoriesMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>15</td><td>CategoriesSelect</td><td>✅ Migriert</td><td>Input</td><td>Select</td><td>Buttons → OsButton (icon)</td></tr><tr><td>16</td><td>ChangePassword</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth-spezifisch</td></tr><tr><td>17</td><td>Change</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>18</td><td>Chat</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Chat-spezifisch</td></tr><tr><td>19</td><td>ChatNotificationMenu</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Chat-spezifisch</td></tr><tr><td>20</td><td>CommentCard</td><td>✅ Migriert</td><td>Display</td><td>Card</td><td>Buttons → OsButton, BaseCard → OsCard</td></tr><tr><td>21</td><td>CommentForm</td><td>⬜ Ausstehend</td><td>Input</td><td>Form</td><td></td></tr><tr><td>22</td><td>CommentList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>23</td><td>ComponentSlider</td><td>⬜ Ausstehend</td><td>Layout</td><td></td><td></td></tr><tr><td>24</td><td>ConfirmModal</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie</td></tr><tr><td>25</td><td>ContentMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>26</td><td>ContentViewer</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>27</td><td>ContextMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>28</td><td>ContributionForm</td><td>✅ Migriert</td><td>Feature</td><td>Form</td><td>Buttons → OsButton, ds-* → HTML</td></tr><tr><td>29</td><td>CounterIcon</td><td>⬜ Ausstehend</td><td>Display</td><td>Icon</td><td></td></tr><tr><td>30</td><td><s>CountTo</s></td><td>✅ Gelöscht</td><td>Display</td><td>Number</td><td>→ OsNumber (Animation eingebaut, vue-count-to entfernt)</td></tr><tr><td>31</td><td>CreateInvitation</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>32</td><td>CtaJoinLeaveGroup</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>33</td><td>CtaUnblockAuthor</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton (icon, as="nuxt-link")</td></tr><tr><td>34</td><td>CustomButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr></tbody></table><h3 id="d-e" tabindex="-1"><a class="header-anchor" href="#d-e"><span>D-E</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>35</td><td>DateTimeRange</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>36</td><td>DeleteData</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>37</td><td>DeleteUserModal</td><td>✅ Migriert</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie, Buttons → OsButton</td></tr><tr><td>38</td><td>DisableModal</td><td>✅ Migriert</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie, Buttons → OsButton</td></tr><tr><td>39</td><td>DonationInfo</td><td>✅ Migriert</td><td>Display</td><td></td><td>Button → OsButton</td></tr><tr><td>40</td><td>Dropdown</td><td>⬜ Ausstehend</td><td>Input</td><td>Select</td><td></td></tr><tr><td>41</td><td>DropdownFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td>Select</td><td></td></tr><tr><td>42</td><td>Editor</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td>Rich-Text</td></tr><tr><td>43</td><td>EmailDisplayAndVerify</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>44</td><td>EmbedComponent</td><td>✅ Migriert</td><td>Display</td><td></td><td>Buttons → OsButton</td></tr><tr><td>45</td><td>EmotionButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>46</td><td>Emotions</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>47</td><td>Empty</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Placeholder</td><td></td></tr><tr><td>48</td><td>EnterNonce</td><td>✅ Migriert</td><td>Feature</td><td></td><td>Auth, Submit → OsButton</td></tr></tbody></table><h3 id="f-g" tabindex="-1"><a class="header-anchor" href="#f-g"><span>F-G</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>49</td><td>EventsByFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>50</td><td>FiledReportsTable</td><td>⬜ Ausstehend</td><td>Display</td><td>Table</td><td></td></tr><tr><td>51</td><td>FilterMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>52</td><td>FilterMenuComponent</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>53</td><td>FilterMenuSection</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>54</td><td>FollowButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>55</td><td>FollowingFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>56</td><td>FollowList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>57</td><td>GroupButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>58</td><td>GroupContentMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>59</td><td>GroupForm</td><td>✅ Migriert</td><td>Input</td><td>Form</td><td>Buttons → OsButton</td></tr><tr><td>60</td><td>GroupLink</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>61</td><td>GroupList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>62</td><td>GroupMember</td><td>✅ Migriert</td><td>Display</td><td></td><td>Button → OsButton</td></tr><tr><td>63</td><td>GroupTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr></tbody></table><h3 id="h-l" tabindex="-1"><a class="header-anchor" href="#h-l"><span>H-L</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>64</td><td>Hashtag</td><td>✅ Migriert</td><td>Display</td><td>Tag/Chip</td><td>🔄 nutzt OsBadge shape="square"</td></tr><tr><td>65</td><td>HashtagsFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>66</td><td>HeaderButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>67</td><td>HeaderMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>68</td><td>ImageUploader</td><td>✅ Migriert</td><td>Input</td><td></td><td>Crop-Buttons → OsButton, Spinner → OsSpinner</td></tr><tr><td>69</td><td>index</td><td>⬜ Ausstehend</td><td>?</td><td></td><td>Prüfen</td></tr><tr><td>70</td><td>InternalPage</td><td>⬜ Ausstehend</td><td>Layout</td><td>Page</td><td></td></tr><tr><td>71</td><td>Invitation</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>72</td><td>InvitationList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>73</td><td>InviteButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>74</td><td>JoinLeaveButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>75</td><td>LabeledButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>76</td><td>LinkInput</td><td>⬜ Ausstehend</td><td>Input</td><td>Input</td><td></td></tr><tr><td>77</td><td><s>LoadingSpinner</s></td><td>✅ Gelöscht</td><td>Feedback</td><td>Spinner</td><td>→ OsSpinner (Komponente gelöscht)</td></tr><tr><td>78</td><td>LocaleSwitch</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>79</td><td>LocationInfo</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>80</td><td>LocationSelect</td><td>✅ Migriert</td><td>Input</td><td>Select</td><td>Close-Button → OsButton (icon)</td></tr><tr><td>81</td><td>LocationTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr><tr><td>82</td><td>LoginButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>83</td><td>LoginForm</td><td>⬜ Ausstehend</td><td>Feature</td><td>Form</td><td>Auth</td></tr><tr><td>84</td><td>Logo</td><td>⬜ Ausstehend</td><td>Display</td><td>Logo</td><td>🔗 DUPLIKAT (noch ungelöst)</td></tr></tbody></table><h3 id="m-o" tabindex="-1"><a class="header-anchor" href="#m-o"><span>M-O</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>85</td><td>MapButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>86</td><td>MapStylesButtons</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Button → OsButton</td></tr><tr><td>87</td><td>MasonryGrid</td><td>⬜ Ausstehend</td><td>Layout</td><td>Grid</td><td></td></tr><tr><td>88</td><td>MasonryGridItem</td><td>⬜ Ausstehend</td><td>Layout</td><td>GridItem</td><td></td></tr><tr><td>89</td><td>MenuBar</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>90</td><td>MenuBarButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>91</td><td>MenuLegend</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>92</td><td>Modal</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Modal</td><td>🔗 DUPLIKAT</td></tr><tr><td>93</td><td>MySomethingList</td><td>✅ Migriert</td><td>Display</td><td>List</td><td>Buttons → OsButton</td></tr><tr><td>94</td><td>NotificationMenu</td><td>✅ Migriert</td><td>Navigation</td><td>Menu</td><td>Buttons → OsButton</td></tr><tr><td>95</td><td>NotificationsTable</td><td>⬜ Ausstehend</td><td>Display</td><td>Table</td><td></td></tr><tr><td>96</td><td>ObserveButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>97</td><td>OrderByFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr></tbody></table><h3 id="p-r" tabindex="-1"><a class="header-anchor" href="#p-r"><span>P-R</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>98</td><td>PageFooter</td><td>⬜ Ausstehend</td><td>Layout</td><td></td><td></td></tr><tr><td>99</td><td>PageParamsLink</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>100</td><td>PaginationButtons</td><td>✅ Migriert</td><td>Navigation</td><td></td><td>2 Buttons → OsButton (icon, circle)</td></tr><tr><td>101</td><td>PostTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr><tr><td>102</td><td>PostTypeFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>103</td><td>ProfileAvatar</td><td>⬜ Ausstehend</td><td>Display</td><td>Avatar</td><td></td></tr><tr><td>104</td><td>ProfileList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>105</td><td>ProgressBar</td><td>⬜ Ausstehend</td><td>Feedback</td><td></td><td></td></tr><tr><td>106</td><td>RegistrationSlideCreate</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>107</td><td>RegistrationSlideEmail</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>108</td><td>RegistrationSlideInvite</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>109</td><td>RegistrationSlideNonce</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>110</td><td>RegistrationSlideNoPublic</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>111</td><td>RegistrationSlider</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>112</td><td>ReleaseModal</td><td>✅ Migriert</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie, Buttons → OsButton</td></tr><tr><td>113</td><td>ReportList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>114</td><td>ReportModal</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie</td></tr><tr><td>115</td><td>ReportRow</td><td>✅ Migriert</td><td>Display</td><td></td><td>More Details → OsButton</td></tr><tr><td>116</td><td>ReportsTable</td><td>⬜ Ausstehend</td><td>Display</td><td>Table</td><td></td></tr><tr><td>117</td><td>Request</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>118</td><td>ResponsiveImage</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr></tbody></table><h3 id="s" tabindex="-1"><a class="header-anchor" href="#s"><span>S</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>119</td><td>SearchableInput</td><td>⬜ Ausstehend</td><td>Input</td><td>Input</td><td></td></tr><tr><td>120</td><td>SearchField</td><td>⬜ Ausstehend</td><td>Input</td><td>Input</td><td></td></tr><tr><td>121</td><td>SearchGroup</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Search</td></tr><tr><td>122</td><td>SearchHeading</td><td>⬜ Ausstehend</td><td>Display</td><td>Heading</td><td></td></tr><tr><td>123</td><td>SearchPost</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Search</td></tr><tr><td>124</td><td>SearchResults</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Search</td></tr><tr><td>125</td><td>SelectUserSearch</td><td>⬜ Ausstehend</td><td>Input</td><td>Select</td><td></td></tr><tr><td>126</td><td>ShoutButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>127</td><td>ShowPassword</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>128</td><td>Signup</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>129</td><td>SocialMedia</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>130</td><td>SocialMediaListItem</td><td>⬜ Ausstehend</td><td>Display</td><td>ListItem</td><td></td></tr><tr><td>131</td><td>Strength</td><td>⬜ Ausstehend</td><td>Feedback</td><td></td><td>Password</td></tr><tr><td>132</td><td>SuggestionList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr></tbody></table><h3 id="t-z" tabindex="-1"><a class="header-anchor" href="#t-z"><span>T-Z</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>133</td><td>TabNavigation</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>134</td><td>UserTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr><tr><td>135</td><td>UserTeaserHelper</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>136</td><td>UserTeaserNonAnonymous</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>137</td><td>UserTeaserPopover</td><td>✅ Migriert</td><td>Display</td><td></td><td>Button → OsButton</td></tr></tbody></table><hr><h2 id="identifizierte-duplikate-konsolidierung" tabindex="-1"><a class="header-anchor" href="#identifizierte-duplikate-konsolidierung"><span>Identifizierte Duplikate & Konsolidierung</span></a></h2><h3 id="direkte-duplikate-webapp-↔-styleguide" tabindex="-1"><a class="header-anchor" href="#direkte-duplikate-webapp-↔-styleguide"><span>Direkte Duplikate (Webapp ↔ Styleguide)</span></a></h3><table><thead><tr><th>Webapp</th><th>Styleguide</th><th>Aktion</th><th>Status</th></tr></thead><tbody><tr><td>Logo</td><td>Logo</td><td>Konsolidieren zu OsLogo</td><td>⬜ Ausstehend</td></tr><tr><td>Modal</td><td>Modal</td><td>Konsolidieren zu OsModal</td><td>✅ Erledigt</td></tr><tr><td><s>BaseCard</s></td><td>Card</td><td>→ OsCard</td><td>✅ Erledigt (BaseCard gelöscht)</td></tr><tr><td><s>BaseIcon</s></td><td>Icon</td><td>→ OsIcon</td><td>✅ Erledigt (BaseIcon gelöscht)</td></tr><tr><td><s>LoadingSpinner</s></td><td>Spinner</td><td>→ OsSpinner</td><td>✅ Erledigt (LoadingSpinner gelöscht)</td></tr></tbody></table><h3 id="button-familie-✅-alle-nutzen-osbutton" tabindex="-1"><a class="header-anchor" href="#button-familie-✅-alle-nutzen-osbutton"><span>Button-Familie ✅ (alle nutzen OsButton)</span></a></h3><table><thead><tr><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><s>Button (Styleguide)</s></td><td>✅ Ersetzt</td><td>→ OsButton</td></tr><tr><td><s>BaseButton</s></td><td>✅ Gelöscht</td><td>→ OsButton (133 Buttons)</td></tr><tr><td>CustomButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>ActionButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>HeaderButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>LabeledButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>MenuBarButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>FollowButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>GroupButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>InviteButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>LoginButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>EmotionButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>JoinLeaveButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>MapButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>MapStylesButtons</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>PaginationButtons</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>CtaJoinLeaveGroup</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>CtaUnblockAuthor</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr></tbody></table><h3 id="modal-familie-✅-alle-nutzen-osmodal" tabindex="-1"><a class="header-anchor" href="#modal-familie-✅-alle-nutzen-osmodal"><span>Modal-Familie ✅ (alle nutzen OsModal)</span></a></h3><table><thead><tr><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><s>Modal (Styleguide)</s></td><td>✅ Ersetzt</td><td>→ OsModal</td></tr><tr><td><s>Modal (Webapp)</s></td><td>✅ Ersetzt</td><td>→ OsModal</td></tr><tr><td>ConfirmModal</td><td>✅ Nutzt OsModal</td><td>Generischer Confirm-Dialog mit Callbacks</td></tr><tr><td><s>DeleteUserModal</s></td><td>✅ Gelöscht</td><td>→ ConfirmModal</td></tr><tr><td><s>DisableModal</s></td><td>✅ Gelöscht</td><td>→ ConfirmModal</td></tr><tr><td><s>ReleaseModal</s></td><td>✅ Gelöscht</td><td>→ ConfirmModal</td></tr><tr><td>ReportModal</td><td>✅ Nutzt OsModal</td><td>Feature-spezifisch</td></tr></tbody></table><h3 id="menu-familie-zur-konsolidierung" tabindex="-1"><a class="header-anchor" href="#menu-familie-zur-konsolidierung"><span>Menu-Familie (zur Konsolidierung)</span></a></h3><table><thead><tr><th>Komponente</th><th>Beschreibung</th><th>Ziel</th></tr></thead><tbody><tr><td>Menu (Styleguide)</td><td>Basis-Menu</td><td>OsMenu</td></tr><tr><td>MenuItem (Styleguide)</td><td>Menu-Item</td><td>OsMenuItem</td></tr><tr><td>HeaderMenu</td><td>Header-Navigation</td><td>→ OsMenu</td></tr><tr><td>ContentMenu</td><td>Kontext-Menu</td><td>→ OsMenu variant</td></tr><tr><td>ContextMenu</td><td>Kontext-Menu</td><td>→ OsMenu variant</td></tr><tr><td>FilterMenu</td><td>Filter-Menu</td><td>→ OsMenu variant</td></tr><tr><td>NotificationMenu</td><td>Benachrichtigungen</td><td>Feature-spezifisch</td></tr><tr><td>CategoriesMenu</td><td>Kategorien</td><td>Feature-spezifisch</td></tr><tr><td>AvatarMenu</td><td>User-Menu</td><td>Feature-spezifisch</td></tr></tbody></table><hr><h2 id="kategorisierung" tabindex="-1"><a class="header-anchor" href="#kategorisierung"><span>Kategorisierung</span></a></h2><h3 id="basis-komponenten-—-ui-library-✅" tabindex="-1"><a class="header-anchor" href="#basis-komponenten-—-ui-library-✅"><span>Basis-Komponenten — UI-Library ✅</span></a></h3><ul><li><s>Button → OsButton</s> ✅</li><li><s>Card → OsCard</s> ✅</li><li><s>Icon → OsIcon</s> ✅</li><li><s>Spinner → OsSpinner</s> ✅</li></ul><h3 id="basis-komponenten-—-ui-library-ausstehend" tabindex="-1"><a class="header-anchor" href="#basis-komponenten-—-ui-library-ausstehend"><span>Basis-Komponenten — UI-Library (ausstehend)</span></a></h3><ul><li>Modal → OsModal ✅</li><li>Input → OcelotInput (Webapp-Komponente) ✅ — langfristig → OsInput in packages/ui</li><li>Select → OcelotSelect (Webapp-Komponente) ✅ — langfristig → OsSelect in packages/ui</li><li>Menu → OsMenu (packages/ui) ✅</li><li>MenuItem → OsMenuItem (packages/ui) ✅</li><li>Avatar → OsAvatar (falls benötigt)</li></ul><h3 id="layout-typography-—-→-plain-html-✅-tier-a" tabindex="-1"><a class="header-anchor" href="#layout-typography-—-→-plain-html-✅-tier-a"><span>Layout & Typography — → Plain HTML ✅ (Tier A)</span></a></h3><ul><li><s>Container, Flex, FlexItem, Section, Space</s> ✅ → HTML + CSS</li><li><s>Heading, Text, List, ListItem, Placeholder</s> ✅ → HTML + CSS</li><li><s>Chip, Tag</s> ✅ → OsBadge (UI-Library)</li></ul><h3 id="noch-zu-migrieren-tier-b-rest" tabindex="-1"><a class="header-anchor" href="#noch-zu-migrieren-tier-b-rest"><span>Noch zu migrieren (Tier B Rest)</span></a></h3><ul><li>Number (5 Dateien), Radio (1 Datei)</li><li><s>Grid, GridItem</s> ✅ → CSS Grid (Plain HTML)</li></ul><h3 id="feature-komponenten-bleiben-in-webapp" tabindex="-1"><a class="header-anchor" href="#feature-komponenten-bleiben-in-webapp"><span>Feature-Komponenten (bleiben in Webapp)</span></a></h3><ul><li>Chat, Group, Registration, Search, etc.</li></ul><hr><h2 id="analyse-protokoll" tabindex="-1"><a class="header-anchor" href="#analyse-protokoll"><span>Analyse-Protokoll</span></a></h2><table><thead><tr><th>Datum</th><th>Bearbeiter</th><th>Aktion</th><th>Details</th></tr></thead><tbody><tr><td>2026-02-04</td><td>Claude</td><td>Katalog erstellt</td><td>177 Komponenten erfasst</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Duplikate identifiziert</td><td>Button, Modal, Menu Familien</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Button-Analyse</td><td>Props-Vergleich, Konsolidierungsvorschlag, Token-Extraktion</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Modal-Analyse</td><td>Architektur erkannt: DsModal = Basis, Feature-Modals nutzen DsModal</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Menu-Analyse</td><td>DsMenu, Dropdown, Feature-Menus - 3 separate Patterns identifiziert</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Priorisierung</td><td>15 Komponenten in 4 Tiers priorisiert</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Konsolidierungsplan</td><td>3 Phasen definiert, Token-Liste erstellt</td></tr><tr><td>2026-02-04</td><td>Claude</td><td><strong>Phase 0 abgeschlossen</strong></td><td>Bereit für Phase 2 (Projekt-Setup)</td></tr><tr><td>2026-02-08</td><td>Claude</td><td>OsButton entwickelt</td><td>CVA-Varianten, Vue 2/3 kompatibel via vue-demi</td></tr><tr><td>2026-02-08</td><td>Claude</td><td>Webapp-Integration</td><td>Jest Mock, Docker Build, CI-Kompatibilität</td></tr><tr><td>2026-02-08</td><td>Claude</td><td><strong>16 Buttons migriert</strong></td><td>Alle ohne icon/circle/loading Props, validiert</td></tr><tr><td>2026-02-08</td><td>Claude</td><td>OsButton erweitert</td><td>attrs/listeners Forwarding für Vue 2 ($listeners)</td></tr><tr><td>2026-02-09</td><td>Claude</td><td>Scope erweitert</td><td>~90 Buttons identifiziert (16 migriert, 14 ohne Props, ~60 mit Props)</td></tr><tr><td>2026-02-09</td><td>Claude</td><td><strong>Milestone 4a: 8 Buttons</strong></td><td>DisableModal, DeleteUserModal, ReleaseModal, ContributionForm, EnterNonce, MySomethingList, ImageUploader (2x)</td></tr><tr><td>2026-02-09</td><td>Claude</td><td><strong>Milestone 4a abgeschlossen</strong></td><td>6 weitere: donations, profile (2x), badges, notifications/index, ReportRow</td></tr><tr><td>2026-02-11</td><td>Claude</td><td><strong>M4b: icon + circle</strong></td><td>icon-Slot implementiert, circle-Prop mit CVA</td></tr><tr><td>2026-02-11</td><td>Claude</td><td><strong>9 icon-Buttons migriert (M4c)</strong></td><td>DisableModal, DeleteUserModal, CtaUnblockAuthor, LocationSelect, CategoriesSelect, my-email-address, profile Chat, PaginationButtons (2x circle)</td></tr><tr><td>2026-02-11→18</td><td>Claude</td><td><strong>Sessions 12-26</strong></td><td>OsButton M4c abgeschlossen, OsIcon, OsSpinner, OsCard implementiert + Webapp-Migration, BaseButton/BaseCard/BaseIcon/LoadingSpinner gelöscht</td></tr><tr><td>2026-02-19</td><td>Claude</td><td><strong>Tier A Migration</strong></td><td>10 ds-* Vue-Wrapper → Plain HTML + CSS, _ds-compat.scss, ~450 Nutzungen in ~90 Dateien</td></tr><tr><td>2026-02-19</td><td>Claude</td><td><strong>Katalog konsolidiert</strong></td><td>Styleguide- und Webapp-Tabellen aktualisiert, veraltete Status korrigiert</td></tr><tr><td>2026-03-23</td><td>Claude</td><td><strong>ds-input → OcelotInput</strong></td><td>23 Dateien migriert, Webapp-Komponente mit lokalen Imports (tree-shakeable), FormItem/Label/Error vereint</td></tr><tr><td>2026-03-23</td><td>Claude</td><td><strong>ds-select → OcelotSelect</strong></td><td>3 Dateien migriert, Webapp-Komponente, DsSelect+inputMixin+multiinputMixin vereint, Form-Kopplung entfernt, DsChip→OsBadge, DsSpinner→OsSpinner, click-outside inline</td></tr><tr><td>2026-03-23</td><td>Claude</td><td><strong>ds-menu → OsMenu/OsMenuItem</strong></td><td>packages/ui Komponenten mit h() Render, vue-demi, provide/inject, dropdown Prop, eigene CSS in index.css. 17 Nutzungen in 11 Dateien migriert. Vite-Build: ui.css in style.css integriert. Action-Menüs nutzen <code><a></code> statt router-link. 0 ds-* Tags verbleibend in Webapp.</td></tr></tbody></table><hr><h2 id="nachste-schritte" tabindex="-1"><a class="header-anchor" href="#nachste-schritte"><span>Nächste Schritte</span></a></h2><h3 id="phase-0-analyse-✅" tabindex="-1"><a class="header-anchor" href="#phase-0-analyse-✅"><span>Phase 0: Analyse ✅</span></a></h3><ol><li>[x] Webapp-Komponenten auflisten</li><li>[x] Styleguide-Komponenten auflisten</li><li>[x] Duplikate und Familien identifizieren</li><li>[x] Button/Modal/Menu im Detail analysieren</li><li>[x] Priorisierung und Konsolidierungsplan</li></ol><h3 id="phase-3-osbutton-migration-✅" tabindex="-1"><a class="header-anchor" href="#phase-3-osbutton-migration-✅"><span>Phase 3: OsButton Migration ✅</span></a></h3><ol start="6"><li>[x] OsButton entwickeln (CVA, vue-demi)</li><li>[x] 133 Buttons in 79 Dateien migriert</li><li>[x] BaseButton.vue gelöscht, base-components.js Plugin entfernt</li></ol><h3 id="phase-4-tier-1-—-ui-library-kern-✅" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-1-—-ui-library-kern-✅"><span>Phase 4: Tier 1 — UI-Library Kern ✅</span></a></h3><ol start="9"><li>[x] OsIcon + 82 Ocelot-Icons, BaseIcon gelöscht</li><li>[x] OsSpinner + Webapp-Migration, LoadingSpinner gelöscht</li><li>[x] OsCard + Webapp-Migration, BaseCard gelöscht</li></ol><h3 id="phase-4-tier-a-—-ds-→-plain-html-✅" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-a-—-ds-→-plain-html-✅"><span>Phase 4: Tier A — ds-* → Plain HTML ✅</span></a></h3><ol start="12"><li>[x] _ds-compat.scss Utility-Klassen</li><li>[x] 10 ds-* Wrapper → HTML + CSS (~450 Nutzungen, ~90 Dateien)</li></ol><h3 id="phase-4-tier-b-—-ds-migration-60" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-b-—-ds-migration-60"><span>Phase 4: Tier B — ds-* Migration (60%)</span></a></h3><ol start="14"><li>[x] ds-chip (5 Dateien, 20 Nutzungen) → OsBadge (UI-Library)</li><li>[x] ds-tag (3 Dateien) → OsBadge shape="square" (UI-Library)</li><li>[x] ds-grid / ds-grid-item (10 Dateien) → CSS Grid (Plain HTML)</li><li>[x] ds-number (5 Dateien) → OsNumber (UI-Library) ✅</li><li>[x] ds-radio (1 Datei) → native <code><input type="radio"></code> + <code><fieldset></code> (ReportModal) ✅</li></ol><h3 id="phase-4-tier-2-4-—-ui-library" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-2-4-—-ui-library"><span>Phase 4: Tier 2-4 — UI-Library</span></a></h3><ol start="19"><li>[x] OsModal (h() Render, Focus-Trap, Scroll-Lock, A11y; ConfirmModal + ReportModal nutzen OsModal; DeleteUserModal/DisableModal/ReleaseModal gelöscht) ✅</li><li>[x] ds-form → formValidation Mixin (async-validator), 18 Dateien migriert, vuelidate entfernt ✅</li><li>[x] ds-input → OcelotInput (23 Dateien, Webapp-Komponente mit lokalen Imports, FormItem/Label/Error vereint, formValidation-kompatibel) ✅</li><li>[x] OsMenu / OsMenuItem (packages/ui, 17 Nutzungen in 11 Dateien, dropdown Prop, eigene CSS) ✅</li><li>[x] ds-select → OcelotSelect (3 Dateien, Webapp-Komponente, click-outside inline, DsChip→OsBadge) ✅</li></ol><hr><p><em><em>✅ Phase 0-3 abgeschlossen. Phase 4: Alle ds-</em> Komponenten migriert! Tier 1 ✅, Tier A ✅, Tier B ✅, Tier 2: OsModal ✅, OcelotInput ✅, OcelotSelect ✅, Tier 3: OsMenu/OsMenuItem ✅. 0 ds-</em> Tags in Webapp.**</p><hr><h2 id="detailanalyse-button-familie" tabindex="-1"><a class="header-anchor" href="#detailanalyse-button-familie"><span>Detailanalyse: Button-Familie</span></a></h2><h3 id="styleguide-button-dsbutton" tabindex="-1"><a class="header-anchor" href="#styleguide-button-dsbutton"><span>Styleguide Button (DsButton)</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/navigation/Button/Button.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>path</td><td>String|Object</td><td>null</td><td>URL oder Vue Router Pfad</td></tr><tr><td>size</td><td>String</td><td>null</td><td><code>small</code> | <code>base</code> | <code>large</code></td></tr><tr><td>linkTag</td><td>String</td><td>auto</td><td><code>router-link</code> | <code>a</code> | <code>button</code></td></tr><tr><td>name</td><td>String</td><td>null</td><td>Accessibility name</td></tr><tr><td>primary</td><td>Boolean</td><td>false</td><td>Primärer Stil (grün)</td></tr><tr><td>secondary</td><td>Boolean</td><td>false</td><td>Sekundärer Stil (blau)</td></tr><tr><td>danger</td><td>Boolean</td><td>false</td><td>Danger Stil (rot)</td></tr><tr><td>hover</td><td>Boolean</td><td>false</td><td>Hover-State erzwingen</td></tr><tr><td>ghost</td><td>Boolean</td><td>false</td><td>Transparenter Hintergrund</td></tr><tr><td>icon</td><td>String</td><td>null</td><td>Icon-Name</td></tr><tr><td>right</td><td>Boolean</td><td>false</td><td>Icon rechts positionieren</td></tr><tr><td>fullwidth</td><td>Boolean</td><td>false</td><td>Volle Breite</td></tr><tr><td>loading</td><td>Boolean</td><td>false</td><td>Ladezustand</td></tr></tbody></table><p><strong>Besonderheiten:</strong></p><ul><li>Automatische Link-Erkennung (router-link/a/button)</li><li>Icon-Only Modus wenn kein Slot-Content</li><li>Spinner bei loading</li><li>CSS-Klassen: <code>ds-button</code>, <code>ds-button-primary</code>, etc.</li></ul><hr><h3 id="webapp-basebutton" tabindex="-1"><a class="header-anchor" href="#webapp-basebutton"><span>Webapp BaseButton</span></a></h3><p><strong>Pfad:</strong> <code>webapp/components/_new/generic/BaseButton/BaseButton.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>bullet</td><td>Boolean</td><td>false</td><td>Kleiner runder Punkt (18px)</td></tr><tr><td>circle</td><td>Boolean</td><td>false</td><td>Runder Button</td></tr><tr><td>danger</td><td>Boolean</td><td>false</td><td>Danger-Farbschema</td></tr><tr><td>filled</td><td>Boolean</td><td>false</td><td>Gefüllter Hintergrund</td></tr><tr><td>ghost</td><td>Boolean</td><td>false</td><td>Ohne Border</td></tr><tr><td>icon</td><td>String</td><td>-</td><td>Icon-Name</td></tr><tr><td>loading</td><td>Boolean</td><td>false</td><td>Ladezustand</td></tr><tr><td>size</td><td>String</td><td>'regular'</td><td><code>tiny</code> | <code>small</code> | <code>regular</code> | <code>large</code></td></tr><tr><td>padding</td><td>Boolean</td><td>false</td><td>Extra Padding</td></tr><tr><td>type</td><td>String</td><td>'button'</td><td><code>button</code> | <code>submit</code></td></tr><tr><td>disabled</td><td>Boolean</td><td>false</td><td>Deaktiviert</td></tr></tbody></table><p><strong>Besonderheiten:</strong></p><ul><li>Kein automatischer Link-Support (nur <code><button></code>)</li><li>Nutzt <code>buttonStates</code> Mixin für Farben</li><li>CSS-Klassen: <code>base-button</code>, <code>--filled</code>, <code>--ghost</code>, etc.</li><li>Zusätzliche Größe: <code>tiny</code></li><li>Zusätzliche Form: <code>bullet</code></li></ul><hr><h3 id="vergleich-styleguide-vs-webapp" tabindex="-1"><a class="header-anchor" href="#vergleich-styleguide-vs-webapp"><span>Vergleich: Styleguide vs Webapp</span></a></h3><table><thead><tr><th>Feature</th><th>Styleguide (DsButton)</th><th>Webapp (BaseButton)</th></tr></thead><tbody><tr><td><strong>Sizes</strong></td><td>small, base, large</td><td>tiny, small, regular, large</td></tr><tr><td><strong>Varianten</strong></td><td>primary, secondary, danger</td><td>danger (+ filled)</td></tr><tr><td><strong>Formen</strong></td><td>icon-only (auto)</td><td>circle, bullet, icon-only (auto)</td></tr><tr><td><strong>Ghost</strong></td><td>✅</td><td>✅</td></tr><tr><td><strong>Loading</strong></td><td>✅ Spinner</td><td>✅ LoadingSpinner</td></tr><tr><td><strong>Link-Support</strong></td><td>✅ path prop</td><td>❌</td></tr><tr><td><strong>Fullwidth</strong></td><td>✅</td><td>❌</td></tr><tr><td><strong>Icon-Position</strong></td><td>✅ left/right</td><td>❌ nur links</td></tr><tr><td><strong>Submit-Type</strong></td><td>❌</td><td>✅</td></tr><tr><td><strong>CSS-Prefix</strong></td><td>ds-button</td><td>base-button</td></tr></tbody></table><hr><h3 id="wrapper-komponenten-nutzen-basebutton" tabindex="-1"><a class="header-anchor" href="#wrapper-komponenten-nutzen-basebutton"><span>Wrapper-Komponenten (nutzen BaseButton)</span></a></h3><table><thead><tr><th>Komponente</th><th>Zweck</th><th>Eigene Props</th><th>Migration</th></tr></thead><tbody><tr><td><strong>ActionButton</strong></td><td>Button + Counter Badge</td><td>count, text, icon, filled</td><td>Eigene Komponente behalten</td></tr><tr><td><strong>LabeledButton</strong></td><td>Button + Label darunter</td><td>icon, label, filled</td><td>Eigene Komponente behalten</td></tr><tr><td><strong>HeaderButton</strong></td><td>Filter-Button + Remove</td><td>title, clickButton, titleRemove, clickRemove</td><td>Feature-spezifisch</td></tr><tr><td><strong>MenuBarButton</strong></td><td>Editor-Toolbar</td><td>isActive, icon, label, onClick</td><td>Feature-spezifisch</td></tr><tr><td><strong>CustomButton</strong></td><td>Button mit externem Icon</td><td>settings (Object)</td><td>Feature-spezifisch</td></tr></tbody></table><p><strong>Erkenntnis:</strong> Diese Wrapper fügen Layout/Logik hinzu, nicht Button-Varianten.</p><hr><h3 id="feature-buttons-business-logik-✅" tabindex="-1"><a class="header-anchor" href="#feature-buttons-business-logik-✅"><span>Feature-Buttons (Business-Logik) ✅</span></a></h3><p>Feature-Buttons behalten Business-Logik, nutzen aber intern alle OsButton:</p><table><thead><tr><th>Komponente</th><th>Status</th></tr></thead><tbody><tr><td>FollowButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>GroupButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>InviteButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>LoginButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>ShoutButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>ObserveButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>EmotionButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>JoinLeaveButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>MapButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>MapStylesButtons</td><td>✅ Nutzt OsButton</td></tr><tr><td>PaginationButtons</td><td>✅ Nutzt OsButton</td></tr></tbody></table><hr><h3 id="konsolidierungsvorschlag-osbutton-✅-implementiert" tabindex="-1"><a class="header-anchor" href="#konsolidierungsvorschlag-osbutton-✅-implementiert"><span>Konsolidierungsvorschlag: OsButton ✅ IMPLEMENTIERT</span></a></h3><blockquote><p><strong>Hinweis:</strong> Die tatsächliche API weicht vom ursprünglichen Vorschlag ab. Siehe <code>packages/ui/src/components/OsButton/OsButton.vue</code> für die aktuelle Implementierung.</p></blockquote><p><strong>Implementierte API (CVA-basiert):</strong></p><div class="language-typescript line-numbers-mode" data-highlighter="shiki" data-ext="typescript" data-title="typescript" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> OsButtonProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> variant</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'default'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'primary'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'secondary'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'danger'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'warning'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'success'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'info'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> appearance</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'filled'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'outline'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'ghost'</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // statt separate booleans</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> size</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'sm'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'md'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'lg'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'xl'</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // vereinfachte Größen</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> circle</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> fullWidth</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> loading</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> disabled</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> as</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'button'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'a'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'nuxt-link'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'router-link'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> Component</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // polymorphes Rendering</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> type</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'button'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'submit'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'reset'</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Icon: slot-basiert (<template #icon>), nicht prop-basiert</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="verwendete-design-tokens-tatsachlich-genutzt" tabindex="-1"><a class="header-anchor" href="#verwendete-design-tokens-tatsachlich-genutzt"><span>Verwendete Design-Tokens (tatsächlich genutzt)</span></a></h3><p><strong>Farben:</strong></p><ul><li><code>$color-primary</code>, <code>$color-primary-dark</code>, <code>$color-primary-light</code></li><li><code>$color-danger</code>, <code>$color-danger-dark</code>, <code>$color-danger-light</code></li><li><code>$color-neutral-60</code>, <code>$color-neutral-80</code>, <code>$color-neutral-100</code></li><li><code>$text-color-base</code>, <code>$text-color-primary-inverse</code>, etc.</li><li><code>$background-color-*</code></li></ul><p><strong>Größen:</strong></p><ul><li><code>$size-button-tiny</code>, <code>$size-button-small</code>, <code>$size-button-base</code>, <code>$size-button-large</code></li><li><code>$input-height</code>, <code>$input-height-small</code>, <code>$input-height-large</code>, <code>$input-height-x-large</code></li></ul><p><strong>Spacing:</strong></p><ul><li><code>$space-x-small</code>, <code>$space-xx-small</code>, <code>$space-small</code>, <code>$space-base</code></li></ul><p><strong>Typography:</strong></p><ul><li><code>$font-size-small</code>, <code>$font-size-base</code>, <code>$font-size-large</code></li><li><code>$font-weight-bold</code></li><li><code>$letter-spacing-large</code></li></ul><p><strong>Border:</strong></p><ul><li><code>$border-size-base</code></li><li><code>$border-radius-x-large</code>, <code>$border-radius-base</code>, <code>$border-radius-rounded</code></li></ul><p><strong>Animation:</strong></p><ul><li><code>$duration-short</code></li></ul><hr><h3 id="offene-fragen-✅-alle-gelost" tabindex="-1"><a class="header-anchor" href="#offene-fragen-✅-alle-gelost"><span>Offene Fragen ✅ (alle gelöst)</span></a></h3><ol><li><s>secondary Variante</s> → ✅ Ja, implementiert als <code>variant="secondary"</code></li><li><s>x-large Size</s> → ✅ Implementiert als <code>size="xl"</code></li><li><s>bullet Form</s> → ✅ Nicht übernommen, <code>circle</code> + custom CSS reicht</li></ol><hr><h2 id="detailanalyse-modal-familie" tabindex="-1"><a class="header-anchor" href="#detailanalyse-modal-familie"><span>Detailanalyse: Modal-Familie</span></a></h2><h3 id="architektur-ubersicht" tabindex="-1"><a class="header-anchor" href="#architektur-ubersicht"><span>Architektur-Übersicht</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>┌─────────────────────────────────────────────────────────────┐</span></span>
|
|
<span class="line"><span>│ DsModal (Styleguide) │</span></span>
|
|
<span class="line"><span>│ = Basis-Modal-Komponente │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ↓ wird genutzt von │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ConfirmModal, DisableModal, ReportModal, etc. │</span></span>
|
|
<span class="line"><span>│ = Feature-Modals mit Business-Logik │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ↓ werden gerendert von │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ Modal.vue (Webapp) │</span></span>
|
|
<span class="line"><span>│ = Modal-Manager (Router via Vuex-State) │</span></span>
|
|
<span class="line"><span>└─────────────────────────────────────────────────────────────┘</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Erkenntnis:</strong> Die Webapp <code>Modal.vue</code> ist <strong>KEIN Duplikat</strong> von DsModal, sondern ein State-basierter Modal-Router.</p><hr><h3 id="styleguide-dsmodal" tabindex="-1"><a class="header-anchor" href="#styleguide-dsmodal"><span>Styleguide DsModal</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/layout/Modal/Modal.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>title</td><td>String</td><td>null</td><td>Modal-Titel</td></tr><tr><td>isOpen</td><td>Boolean</td><td>false</td><td>Geöffnet-Status (v-model)</td></tr><tr><td>force</td><td>Boolean</td><td>false</td><td>Schließen verhindern (kein ESC, kein Backdrop-Click)</td></tr><tr><td>extended</td><td>Boolean</td><td>false</td><td>Breiterer Modal (600px statt 400px)</td></tr><tr><td>cancelLabel</td><td>String</td><td>'Cancel'</td><td>Text für Abbrechen-Button</td></tr><tr><td>confirmLabel</td><td>String</td><td>'Confirm'</td><td>Text für Bestätigen-Button</td></tr></tbody></table><p><strong>Events:</strong></p><ul><li><code>@opened</code> - Modal wurde geöffnet</li><li><code>@cancel</code> - Abbrechen geklickt</li><li><code>@confirm</code> - Bestätigen geklickt</li><li><code>@close</code> - Modal geschlossen (mit type: 'close', 'cancel', 'confirm', 'backdrop')</li><li><code>@update:isOpen</code> - v-model Support</li></ul><p><strong>Slots:</strong></p><ul><li><code>default</code> - Modal-Inhalt</li><li><code>footer</code> - Footer mit Buttons (erhält confirm/cancel Funktionen als Slot-Props)</li></ul><p><strong>Features:</strong></p><ul><li>ESC-Taste zum Schließen</li><li>Backdrop-Click zum Schließen</li><li>Scroll-Lock auf Body</li><li>Animations (fade + scale)</li><li>Nutzt DsCard für Layout</li></ul><hr><h3 id="feature-modals-✅-nutzen-osmodal" tabindex="-1"><a class="header-anchor" href="#feature-modals-✅-nutzen-osmodal"><span>Feature-Modals ✅ (nutzen OsModal)</span></a></h3><table><thead><tr><th>Modal</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><strong>ConfirmModal</strong></td><td>✅ Nutzt OsModal</td><td>Generischer Confirm-Dialog mit Callbacks, Success-Animation</td></tr><tr><td><s><strong>DisableModal</strong></s></td><td>✅ Gelöscht</td><td>→ ConfirmModal (inline modalData)</td></tr><tr><td><strong>ReportModal</strong></td><td>✅ Nutzt OsModal</td><td>Report-Logik mit Radio-Auswahl</td></tr><tr><td><s><strong>DeleteUserModal</strong></s></td><td>✅ Gelöscht</td><td>→ ConfirmModal (inline modalData)</td></tr><tr><td><s><strong>ReleaseModal</strong></s></td><td>✅ Gelöscht</td><td>→ ConfirmModal (inline modalData)</td></tr></tbody></table><p><strong>Ergebnis:</strong> DsModal vollständig durch OsModal ersetzt. Vuex Modal Store entfernt — Modals werden inline gerendert (v-if + showConfirmModal). DeleteUserModal, DisableModal, ReleaseModal wurden in ConfirmModal konsolidiert.</p><hr><h3 id="webapp-modal-vue-modal-manager-✅-geloscht" tabindex="-1"><a class="header-anchor" href="#webapp-modal-vue-modal-manager-✅-geloscht"><span><s>Webapp Modal.vue (Modal-Manager)</s> ✅ Gelöscht</span></a></h3><p><strong>Vuex Modal Store (<code>store/modal.js</code>) und Modal-Router (<code>components/Modal.vue</code>) wurden entfernt.</strong></p><p>Modals werden jetzt inline gerendert: Jede Komponente hat eigenes <code>showConfirmModal</code>/<code>currentModalData</code> State und rendert <code><confirm-modal v-if="showConfirmModal"></code> direkt.</p><hr><h3 id="konsolidierungsvorschlag-osmodal-✅-implementiert" tabindex="-1"><a class="header-anchor" href="#konsolidierungsvorschlag-osmodal-✅-implementiert"><span><s>Konsolidierungsvorschlag</s> OsModal ✅ (implementiert)</span></a></h3><div class="language-typescript line-numbers-mode" data-highlighter="shiki" data-ext="typescript" data-title="typescript" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> OsModalProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Basis</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> title</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> isOpen</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // v-model:open</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Verhalten</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> persistent</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // = force (Schließen verhindern)</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> closeOnBackdrop</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Default: true</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> closeOnEsc</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Default: true</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Größe</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> size</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'default'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'large'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'fullscreen'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Footer</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> showFooter</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> cancelLabel</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> confirmLabel</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> confirmVariant</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'primary'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'danger'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Slots:</strong></p><ul><li><code>default</code> - Inhalt</li><li><code>header</code> - Custom Header (ersetzt title)</li><li><code>footer</code> - Custom Footer</li></ul><p><strong>Nicht übernommen:</strong></p><ul><li><code>extended</code> prop → wird zu <code>size="large"</code></li></ul><hr><h3 id="verwendete-design-tokens-tatsachlich-genutzt-1" tabindex="-1"><a class="header-anchor" href="#verwendete-design-tokens-tatsachlich-genutzt-1"><span>Verwendete Design-Tokens (tatsächlich genutzt)</span></a></h3><p><strong>Layout:</strong></p><ul><li><code>$z-index-modal</code> (9999)</li><li><code>$space-base</code>, <code>$space-small</code>, <code>$space-x-small</code>, <code>$space-large</code></li><li><code>$border-radius-x-large</code></li></ul><p><strong>Farben:</strong></p><ul><li><code>$background-color-softer</code> (Footer)</li></ul><p><strong>Shadows:</strong></p><ul><li><code>$box-shadow-x-large</code></li></ul><p><strong>Animation:</strong></p><ul><li><code>$ease-out-bounce</code></li></ul><hr><h2 id="detailanalyse-menu-familie" tabindex="-1"><a class="header-anchor" href="#detailanalyse-menu-familie"><span>Detailanalyse: Menu-Familie</span></a></h2><h3 id="architektur-ubersicht-1" tabindex="-1"><a class="header-anchor" href="#architektur-ubersicht-1"><span>Architektur-Übersicht</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>┌─────────────────────────────────────────────────────────────┐</span></span>
|
|
<span class="line"><span>│ DsMenu / DsMenuItem (Styleguide) │</span></span>
|
|
<span class="line"><span>│ = Routen-basierte Navigationskomponenten │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ↓ wird genutzt von │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ContentMenu, GroupContentMenu │</span></span>
|
|
<span class="line"><span>│ = Dropdown + DsMenu für Kontext-Menüs │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ Dropdown (Webapp) │</span></span>
|
|
<span class="line"><span>│ = Eigenständiger Popover-Wrapper (v-popover) │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ HeaderMenu │</span></span>
|
|
<span class="line"><span>│ = Komplexes Layout (DsFlex-basiert), KEIN DsMenu │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ AvatarMenu, NotificationMenu, FilterMenu, etc. │</span></span>
|
|
<span class="line"><span>│ = Feature-spezifische Menüs mit eigener Logik │</span></span>
|
|
<span class="line"><span>└─────────────────────────────────────────────────────────────┘</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Erkenntnis:</strong> DsMenu wird nur für strukturierte Routen-Navigation verwendet. Die meisten Webapp-Menüs sind Feature-spezifisch und bauen eigene Strukturen.</p><hr><h3 id="styleguide-dsmenu" tabindex="-1"><a class="header-anchor" href="#styleguide-dsmenu"><span>Styleguide DsMenu</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/navigation/Menu/Menu.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>routes</td><td>Array</td><td>null</td><td>Array von Route-Objekten</td></tr><tr><td>inverse</td><td>Boolean</td><td>false</td><td>Dunkler Hintergrund</td></tr><tr><td>navbar</td><td>Boolean</td><td>false</td><td>Horizontale Navbar-Darstellung</td></tr><tr><td>linkTag</td><td>String</td><td>'router-link'</td><td>Link-Komponente</td></tr><tr><td>urlParser</td><td>Function</td><td>default</td><td>URL-Parser für Routes</td></tr><tr><td>nameParser</td><td>Function</td><td>default</td><td>Name-Parser für Routes</td></tr><tr><td>matcher</td><td>Function</td><td>default</td><td>Active-State Matcher</td></tr><tr><td>isExact</td><td>Function</td><td>default</td><td>Exact-Match Checker</td></tr></tbody></table><p><strong>Slots:</strong></p><ul><li><code>default</code> - Custom Menu-Items</li><li><code>menuitem</code> (scoped) - Custom MenuItem Template</li></ul><p><strong>Features:</strong></p><ul><li>Automatische URL-Generierung aus Route-Namen</li><li>Submenu-Support via <code>route.children</code></li><li>Active-State Tracking</li></ul><hr><h3 id="styleguide-dsmenuitem" tabindex="-1"><a class="header-anchor" href="#styleguide-dsmenuitem"><span>Styleguide DsMenuItem</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/navigation/Menu/MenuItem.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>route</td><td>Object</td><td>null</td><td>Route-Objekt</td></tr><tr><td>parents</td><td>Array</td><td>[]</td><td>Parent-Routes (für Submenu)</td></tr><tr><td>linkTag</td><td>String</td><td>from parent</td><td>Link-Komponente</td></tr></tbody></table><p><strong>Features:</strong></p><ul><li>Automatische Submenu-Erkennung via <code>route.children</code></li><li>Hover/Click Submenu Toggle (bei navbar)</li><li>Click-Outside zum Schließen</li><li>Level-basierte CSS-Klassen</li></ul><hr><h3 id="webapp-dropdown" tabindex="-1"><a class="header-anchor" href="#webapp-dropdown"><span>Webapp Dropdown</span></a></h3><p><strong>Pfad:</strong> <code>webapp/components/Dropdown.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>placement</td><td>String</td><td>'bottom-end'</td><td>Popover-Position</td></tr><tr><td>disabled</td><td>Boolean</td><td>false</td><td>Deaktiviert</td></tr><tr><td>offset</td><td>String|Number</td><td>'16'</td><td>Abstand vom Trigger</td></tr><tr><td>noMouseLeaveClosing</td><td>Boolean</td><td>false</td><td>Verhindert Schließen bei Mouse-Leave</td></tr></tbody></table><p><strong>Slot-Props:</strong></p><ul><li><code>toggleMenu()</code> - Toggle Funktion</li><li><code>openMenu()</code> - Öffnen Funktion</li><li><code>closeMenu()</code> - Schließen Funktion</li><li><code>isOpen</code> - Geöffnet-State</li></ul><p><strong>Features:</strong></p><ul><li>Nutzt v-popover</li><li>Hover-Verzögerung (500ms open, 300ms close)</li><li>Body-Class bei Open</li></ul><p><strong>Erkenntnis:</strong> Dies ist das <strong>primäre Dropdown-Pattern</strong> in der Webapp - nicht DsMenu!</p><hr><h3 id="kategorisierung-der-menu-komponenten" tabindex="-1"><a class="header-anchor" href="#kategorisierung-der-menu-komponenten"><span>Kategorisierung der Menu-Komponenten</span></a></h3><table><thead><tr><th>Komponente</th><th>Typ</th><th>Nutzt DsMenu</th><th>Migration</th></tr></thead><tbody><tr><td><strong>ContentMenu</strong></td><td>Kontext-Menü</td><td>✅</td><td>OsDropdown + OsMenu</td></tr><tr><td><strong>GroupContentMenu</strong></td><td>Kontext-Menü</td><td>✅</td><td>OsDropdown + OsMenu</td></tr><tr><td><strong>HeaderMenu</strong></td><td>Layout</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>AvatarMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>NotificationMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>FilterMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>CategoriesMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>ChatNotificationMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>MenuBar</strong></td><td>Editor</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>ContextMenu</strong> (Editor)</td><td>Editor</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr></tbody></table><hr><h3 id="konsolidierungsvorschlag" tabindex="-1"><a class="header-anchor" href="#konsolidierungsvorschlag"><span>Konsolidierungsvorschlag</span></a></h3><p><strong>Drei separate Komponenten:</strong></p><ol><li><strong>OsMenu</strong> (für Navigation)</li></ol><div class="language-typescript line-numbers-mode" data-highlighter="shiki" data-ext="typescript" data-title="typescript" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> OsMenuProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> routes</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> RouteItem</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">[]</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> orientation</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'vertical'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'horizontal'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> inverse</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li><strong>OsMenuItem</strong> (für Menu-Items)</li></ol><div class="language-typescript line-numbers-mode" data-highlighter="shiki" data-ext="typescript" data-title="typescript" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> OsMenuItemProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> to</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> RouteLocationRaw</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> href</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> icon</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> active</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li><strong>OsDropdown</strong> (für Popover-Menüs) - <strong>NEU</strong></li></ol><div class="language-typescript line-numbers-mode" data-highlighter="shiki" data-ext="typescript" data-title="typescript" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> OsDropdownProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> placement</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'top'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'bottom'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'left'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'right'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'top-start'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'top-end'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> ...</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> offset</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> number</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> disabled</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> closeOnClick</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> closeOnOutsideClick</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Erkenntnis:</strong> OsDropdown ist wichtiger als OsMenu, da es häufiger verwendet wird!</p><hr><h3 id="verwendete-design-tokens-tatsachlich-genutzt-2" tabindex="-1"><a class="header-anchor" href="#verwendete-design-tokens-tatsachlich-genutzt-2"><span>Verwendete Design-Tokens (tatsächlich genutzt)</span></a></h3><p><strong>Spacing:</strong></p><ul><li><code>$space-x-small</code>, <code>$space-xx-small</code></li></ul><p><strong>Typography:</strong></p><ul><li>Font-Size via DsText</li></ul><p><strong>Farben:</strong></p><ul><li>Inverse-Modus Farben</li></ul><hr><h2 id="priorisierung-der-komponenten" tabindex="-1"><a class="header-anchor" href="#priorisierung-der-komponenten"><span>Priorisierung der Komponenten</span></a></h2><h3 id="tier-1-kern-komponenten-✅" tabindex="-1"><a class="header-anchor" href="#tier-1-kern-komponenten-✅"><span>Tier 1: Kern-Komponenten ✅</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th></tr></thead><tbody><tr><td>1</td><td><strong>OsButton</strong></td><td>✅ 133 Buttons in 79 Dateien, BaseButton gelöscht</td></tr><tr><td>2</td><td><strong>OsIcon</strong></td><td>✅ 131 Nutzungen, 82 Ocelot-Icons, BaseIcon gelöscht</td></tr><tr><td>3</td><td><strong>OsSpinner</strong></td><td>✅ 4 Spinner migriert, LoadingSpinner gelöscht</td></tr><tr><td>4</td><td><strong>OsCard</strong></td><td>✅ ~30 Dateien, BaseCard gelöscht</td></tr></tbody></table><h3 id="tier-a-triviale-ds-→-plain-html-✅" tabindex="-1"><a class="header-anchor" href="#tier-a-triviale-ds-→-plain-html-✅"><span>Tier A: Triviale ds-* → Plain HTML ✅</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th></tr></thead><tbody><tr><td>—</td><td>ds-section, ds-placeholder, ds-list, ds-list-item</td><td>✅ → HTML-Elemente + CSS-Klassen</td></tr><tr><td>—</td><td>ds-container, ds-heading, ds-text</td><td>✅ → HTML-Elemente + CSS-Klassen</td></tr><tr><td>—</td><td>ds-space</td><td>✅ → div + Margin-Utility-Klassen</td></tr><tr><td>—</td><td>ds-flex, ds-flex-item</td><td>✅ → HTML + CSS @media Queries</td></tr></tbody></table><h3 id="tier-b-einfache-ds-migration-✅" tabindex="-1"><a class="header-anchor" href="#tier-b-einfache-ds-migration-✅"><span>Tier B: Einfache ds-* Migration ✅</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th><th>Ziel</th><th>Status</th></tr></thead><tbody><tr><td>5</td><td><strong>OsBadge</strong></td><td>—</td><td>ds-chip (20 Nutzungen, 5 Dateien) + ds-tag (3 Dateien)</td><td>✅</td></tr><tr><td>—</td><td>ds-grid / ds-grid-item</td><td>10</td><td>CSS Grid (Plain HTML)</td><td>✅</td></tr><tr><td>—</td><td>ds-number</td><td>5</td><td>OsNumber (UI-Library)</td><td>✅</td></tr><tr><td>—</td><td>ds-radio</td><td>1</td><td>native <code><input type="radio"></code></td><td>✅</td></tr></tbody></table><h3 id="tier-2-layout-feedback" tabindex="-1"><a class="header-anchor" href="#tier-2-layout-feedback"><span>Tier 2: Layout & Feedback</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th><th>Abhängigkeiten</th><th>Status</th></tr></thead><tbody><tr><td>5</td><td><strong>OsModal</strong></td><td>7</td><td>OsButton</td><td>✅</td></tr><tr><td>6</td><td><strong>OsDropdown</strong></td><td>—</td><td>OsButton</td><td>⬜</td></tr><tr><td>7</td><td><strong>OsAvatar</strong></td><td>—</td><td>-</td><td>⬜</td></tr><tr><td>8</td><td><strong>OsInput</strong></td><td>23</td><td>ds-form Kopplung aufgelöst (formValidation Mixin)</td><td>⬜</td></tr></tbody></table><h3 id="tier-3-navigation-ausstehend" tabindex="-1"><a class="header-anchor" href="#tier-3-navigation-ausstehend"><span>Tier 3: Navigation (ausstehend)</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th><th>Abhängigkeiten</th></tr></thead><tbody><tr><td>9</td><td><strong>OsMenu</strong></td><td>11</td><td>OsMenuItem</td></tr><tr><td>10</td><td><strong>OsMenuItem</strong></td><td>6</td><td>-</td></tr></tbody></table><h3 id="tier-4-spezial-komponenten-ausstehend" tabindex="-1"><a class="header-anchor" href="#tier-4-spezial-komponenten-ausstehend"><span>Tier 4: Spezial-Komponenten (ausstehend)</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th></tr></thead><tbody><tr><td>11</td><td>OsSelect</td><td>3</td></tr><tr><td>12</td><td>OsTable</td><td>7</td></tr><tr><td>13</td><td><s>ds-form</s></td><td>—</td></tr></tbody></table><blockquote><p><strong>Hinweis:</strong> OsHeading, OsText, OsTag sind nicht mehr geplant — wurden zu Plain HTML migriert (Tier A).</p></blockquote><hr><h2 id="finaler-konsolidierungsplan" tabindex="-1"><a class="header-anchor" href="#finaler-konsolidierungsplan"><span>Finaler Konsolidierungsplan</span></a></h2><blockquote><p><strong>Hinweis:</strong> "Tier 1/A/B/2/3/4" bezeichnet die Migrations-Reihenfolge innerhalb von Phase 4.</p></blockquote><h3 id="tier-1-kern-komponenten-✅-1" tabindex="-1"><a class="header-anchor" href="#tier-1-kern-komponenten-✅-1"><span>Tier 1: Kern-Komponenten ✅</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>1. OsIcon ✅ Vereint: DsIcon + BaseIcon → 82 Ocelot-Icons</span></span>
|
|
<span class="line"><span>2. OsSpinner ✅ Vereint: DsSpinner + LoadingSpinner</span></span>
|
|
<span class="line"><span>3. OsButton ✅ Vereint: DsButton + BaseButton → 133 Buttons in 79 Dateien</span></span>
|
|
<span class="line"><span>4. OsCard ✅ Vereint: DsCard + BaseCard → ~30 Dateien</span></span>
|
|
<span class="line"><span>5. OsBadge ✅ Vereint: ds-chip (20 Nutzungen) + ds-tag (3 Dateien)</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tier-a-triviale-ds-wrapper-→-plain-html-✅" tabindex="-1"><a class="header-anchor" href="#tier-a-triviale-ds-wrapper-→-plain-html-✅"><span>Tier A: Triviale ds-* Wrapper → Plain HTML ✅</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>ds-section, ds-placeholder, ds-list, ds-list-item ✅ → HTML + CSS-Klassen</span></span>
|
|
<span class="line"><span>ds-container, ds-heading, ds-text ✅ → HTML + CSS-Klassen</span></span>
|
|
<span class="line"><span>ds-space ✅ → div + Margin-Utilities</span></span>
|
|
<span class="line"><span>ds-flex, ds-flex-item ✅ → HTML + CSS @media Queries</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tier-b-einfache-ds-migration-60" tabindex="-1"><a class="header-anchor" href="#tier-b-einfache-ds-migration-60"><span>Tier B: Einfache ds-* Migration (60%)</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>ds-chip → OsBadge (UI-Library) ✅</span></span>
|
|
<span class="line"><span>ds-tag → OsBadge shape="square" (UI-Library) ✅</span></span>
|
|
<span class="line"><span>ds-grid / ds-grid-item → CSS Grid (HTML) ✅</span></span>
|
|
<span class="line"><span>ds-number → OsNumber (UI-Library) ✅</span></span>
|
|
<span class="line"><span>ds-radio → native <input type="radio"> ✅ (1 Datei)</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tier-2-4-ui-library" tabindex="-1"><a class="header-anchor" href="#tier-2-4-ui-library"><span>Tier 2-4: UI-Library</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>5. OsModal → Basis: DsModal, Feature-Modals bleiben in Webapp ✅</span></span>
|
|
<span class="line"><span>6. OsDropdown → Basis: Dropdown (Webapp) — wichtiger als gedacht!</span></span>
|
|
<span class="line"><span>7. OsAvatar → Vereint: DsAvatar + ProfileAvatar</span></span>
|
|
<span class="line"><span>8. OsInput → Basis: DsInput (ds-form Kopplung aufgelöst via formValidation Mixin)</span></span>
|
|
<span class="line"><span>9. OsMenu → Basis: DsMenu/DsMenuItem</span></span>
|
|
<span class="line"><span>10. OsSelect → Basis: DsSelect</span></span>
|
|
<span class="line"><span>11. OsTable → Basis: DsTable</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="erkenntnisse-aus-der-analyse" tabindex="-1"><a class="header-anchor" href="#erkenntnisse-aus-der-analyse"><span>Erkenntnisse aus der Analyse</span></a></h2><h3 id="was-funktioniert-gut" tabindex="-1"><a class="header-anchor" href="#was-funktioniert-gut"><span>Was funktioniert gut:</span></a></h3><ol><li><strong>DsModal als Basis</strong> - Feature-Modals nutzen bereits DsModal → OsModal wird gleich funktionieren</li><li><strong>Dropdown-Pattern</strong> - Funktioniert gut mit v-popover</li><li><strong>Tier A Migration</strong> - 10 ds-* Wrapper durch HTML + CSS ersetzt, kein Funktionsverlust</li></ol><h3 id="was-gelost-wurde-✅" tabindex="-1"><a class="header-anchor" href="#was-gelost-wurde-✅"><span>Was gelöst wurde: ✅</span></a></h3><ol><li><s>Button-Varianten</s> → OsButton mit CVA-Varianten vereinheitlicht</li><li><s>Inkonsistente Naming</s> → os-* Prefix für Library, ds-* CSS-Klassen temporär beibehalten</li><li><s>Doppelte Komponenten</s> → BaseCard, BaseIcon, LoadingSpinner gelöscht (3/5 Duplikate aufgelöst)</li><li><s>Layout-Shift bei ds-flex</s> → CSS @media Queries statt JavaScript window.innerWidth</li></ol><h3 id="noch-offen" tabindex="-1"><a class="header-anchor" href="#noch-offen"><span>Noch offen:</span></a></h3><ol><li><strong>Logo</strong> - Existiert doppelt (Webapp + Styleguide)</li><li><s><strong>Modal</strong> - Existiert doppelt</s> → OsModal migriert ✅</li><li><s><strong>ds-form Kopplung</strong></s> → aufgelöst via formValidation Mixin (async-validator), vuelidate entfernt ✅</li></ol><hr><h2 id="token-extraktion-aus-analyse" tabindex="-1"><a class="header-anchor" href="#token-extraktion-aus-analyse"><span>Token-Extraktion (aus Analyse)</span></a></h2><h3 id="benotigte-design-tokens-fur-phase-1" tabindex="-1"><a class="header-anchor" href="#benotigte-design-tokens-fur-phase-1"><span>Benötigte Design-Tokens für Phase 1</span></a></h3><p><strong>Farben:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">// Primär/Sekundär/Danger</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-primary-dark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-primary-light</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-secondary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-secondary-dark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-secondary-light</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger-dark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger-light</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">// Neutral</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-neutral-60</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-neutral-80</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-neutral-100</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">// Semantisch</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$text-color-base</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$text-color-inverse</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$background-color-softer</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$background-color-soft</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-color-base</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Größen:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$size-button-tiny</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">24</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$size-button-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">32</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$size-button-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">40</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$size-button-large</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">48</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Spacing:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$space-xx-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$space-x-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">8</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$space-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">16</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$space-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">24</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Border:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-size-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-radius-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-radius-x-large</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">5</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-radius-rounded</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">em</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Animation:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$duration-short</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0.08</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">s</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p><strong>Z-Index:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$z-index-modal</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">9999</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$z-index-dropdown</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">8888</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Shadows:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$box-shadow-x-large</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 15</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 30</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> rgba</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.11</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">), ...</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$box-shadow-small-inset</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">inset</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> rgba</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.05</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">)</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="phase-3-webapp-integration-tracking" tabindex="-1"><a class="header-anchor" href="#phase-3-webapp-integration-tracking"><span>Phase 3: Webapp-Integration (Tracking)</span></a></h2><h3 id="osbutton-migration-abgeschlossen-133-133-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-migration-abgeschlossen-133-133-✅"><span>OsButton Migration - Abgeschlossen (133/133) ✅</span></a></h3><table><thead><tr><th>#</th><th>Datei</th><th>Button</th><th>Status</th></tr></thead><tbody><tr><td>1</td><td>UserTeaserPopover.vue</td><td>Open Profile</td><td>✅ Migriert</td></tr><tr><td>2</td><td>GroupForm.vue</td><td>Cancel</td><td>✅ Migriert</td></tr><tr><td>3</td><td>EmbedComponent.vue</td><td>Cancel</td><td>✅ Migriert</td></tr><tr><td>4</td><td>EmbedComponent.vue</td><td>Play Now</td><td>✅ Migriert</td></tr><tr><td>5</td><td>DonationInfo.vue</td><td>Donate</td><td>✅ Migriert</td></tr><tr><td>6</td><td>CommentCard.vue</td><td>Show More</td><td>✅ Migriert</td></tr><tr><td>7</td><td>MapStylesButtons.vue</td><td>Style Toggle</td><td>✅ Migriert</td></tr><tr><td>8</td><td>GroupMember.vue</td><td>Remove</td><td>✅ Migriert</td></tr><tr><td>9</td><td>embeds.vue</td><td>Allow All</td><td>✅ Migriert</td></tr><tr><td>10</td><td>embeds.vue</td><td>Deny All</td><td>✅ Migriert</td></tr><tr><td>11</td><td>notifications.vue</td><td>Check All</td><td>✅ Migriert</td></tr><tr><td>12</td><td>notifications.vue</td><td>Uncheck All</td><td>✅ Migriert</td></tr><tr><td>13</td><td>notifications.vue</td><td>Save</td><td>✅ Migriert</td></tr><tr><td>14</td><td>privacy.vue</td><td>Save</td><td>✅ Migriert</td></tr><tr><td>15</td><td>terms-and-conditions-confirm.vue</td><td>Read T&C</td><td>✅ Migriert</td></tr><tr><td>16</td><td>terms-and-conditions-confirm.vue</td><td>Save</td><td>✅ Migriert</td></tr></tbody></table><h3 id="osbutton-migration-alle-milestones-abgeschlossen-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-migration-alle-milestones-abgeschlossen-✅"><span>OsButton Migration - Alle Milestones abgeschlossen ✅</span></a></h3><table><thead><tr><th>Milestone</th><th>Status</th><th>Details</th></tr></thead><tbody><tr><td>M4a: Buttons ohne neue Props</td><td>✅</td><td>14 Buttons (Modals, Forms, Pages)</td></tr><tr><td>M4b: Props implementieren</td><td>✅</td><td>icon (Slot), circle, loading</td></tr><tr><td>M4c: Buttons mit icon/circle/loading</td><td>✅</td><td>Alle verbleibenden Buttons migriert</td></tr></tbody></table><h3 id="osbutton-features-alle-implementiert-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-features-alle-implementiert-✅"><span>OsButton Features - Alle implementiert ✅</span></a></h3><table><thead><tr><th>Feature</th><th>Status</th></tr></thead><tbody><tr><td><code>variant</code> (7 Varianten)</td><td>✅</td></tr><tr><td><code>appearance</code> (filled/outline/ghost)</td><td>✅</td></tr><tr><td><code>size</code> (xs/sm/md/lg/xl)</td><td>✅</td></tr><tr><td><code>icon</code> Slot</td><td>✅</td></tr><tr><td><code>circle</code> Prop</td><td>✅</td></tr><tr><td><code>loading</code> Prop</td><td>✅</td></tr><tr><td><code>disabled</code> mit hover/active-Override</td><td>✅</td></tr><tr><td><code>fullWidth</code> Prop</td><td>✅</td></tr><tr><td><code>type</code> Prop (button/submit/reset)</td><td>✅</td></tr></tbody></table><h3 id="status" tabindex="-1"><a class="header-anchor" href="#status"><span>Status</span></a></h3><p><strong>OsButton Migration: ✅ Vollständig abgeschlossen.</strong></p><ul><li>BaseButton.vue gelöscht, base-components.js Plugin entfernt</li><li>Alle Tests, Snapshots, Cypress E2E-Selektoren aktualisiert</li><li>Nächster Schritt: Tier B Rest (ds-number, ds-radio) oder Tier 2 (OsModal)</li></ul></div><!----><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link vp-meta-label" href="https://github.com/Ocelot-Social-Community/Ocelot-Social/edit/master/./packages/ui/KATALOG.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon edit-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="edit icon" name="edit"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><!----><!----></div></footer><!----><!----><!----><!--]--></main><!--]--><!--]--><footer class="vp-footer-wrapper" vp-footer><div class="vp-footer">Released under the <a class="vt-link link link" href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer"><!--[-->MIT License<!--]--><!----></a>.</div><div class="vp-copyright">© by <a href="https://busfaktor.org" target="_blank">busFaktor() e.V.</a> & Authors | <a href="https://ocelot.social/en/impressum/">Imprint</a></div></footer></div><!--]--><!--]--><!--[--><!----><!----><!--[--><!--]--><!--]--><!--]--></div>
|
|
<script type="module" src="/assets/app-YeL2FPh5.js" defer></script>
|
|
</body>
|
|
</html>
|